Creating your first DotNetNuke Skin
From ThemesWiki
| Official Page |
| Project Documentation |
| Download |
|
Contents |
[edit] Creating Your First Skin
After setting up your development environment, you are ready to create your skin.web design We will create a skin in record time. You may be impressed by how fast and easy it is for you to create a skin.
Note - Remember when we download the starter kits from DotNetNuke.com? One template is for creating a skin. As of the time of this writing, the current download's template will produce a skin that looks just like the default skin. If this is what you're looking for, you can achieve the same result by copying the DNN-Blue folder and renaming it to something else. Rather than doing this, however, we are starting from scratch.
- Create a folder in your development environment. Name it as FirstSkin. In VWD, to create a new folder, right-click on the folder you want to create it in in this case Skins and select New Folder.
- Next, create an htm file inside the FirstSkin folder called Skin.htm. Use the File menu to create a New File. This will bring up a dialog box where you will pick what type of file you wish to create. Pick HTML Page and name the file as Skin.htm.
- Now, open our new Skin.htm file.
- A typical htm document will have tags like
<html>,<head>, and<body>. A DotNetNuke skin has none of these. Delete any content so you have clean slate to start from. - Once we have a blank htm page to work from, type in the following and save:
[LOGIN] [MENU] <div id="ContentPane" runat="server"></div>
- Go to the Skins menu item on your Admin menu.
- You will now see two drop-down boxes, one for Skins and one for Containers. In the drop-down for Skins, pick the skin you have created. You should see something like this:
- Click on the link in the lower-middle portion of the screen that says Parse Skin Package. You should see your skin now:
- Now that our skin has been parsed, let's apply it to our current DotNetNuke portal by clicking on the Apply link. Note - Keep in mind that we only have one pane, the ContentPane. If this was a live site with modules on other panes, the positions may have been changed.
- Now, go to the home page by clicking on your menu bar at the top.
[edit] What Do We Have Here?
I know what you're thinking: This has got to be the world's simplest DotNetNuke skin. And you're right. You may not be rushing to install this skin on your production portals, but you have created your very first operational skin!
Let's go over what just happened, from creating our skin to seeing it in action. Skins start out as a simple HTML file. Just as with any website, an HTML file will have some degree of markup. Of course, we have not added much markup to our skin yet.
Note - If you're wondering from where DotNetNuke gets all the HTML structure such as the html, head, and body tags, take a look at Default.aspx in the root of your DNN install. This is the page used essentially every time a page is served up. You can look in that file and find an ASP.NET element called SkinPlaceHolder. This is where our skin will be injected into each DotNetNuke page. Everything before and after this place holder is what will be served to any DNN page request no matter what skin is applied.
The code we entered for our skin is:
[LOGIN] [MENU] <div id="ContentPane" runat="server"></div>
Of the code we typed, [LOGIN] and [MENU] are special keywords to DotNetNuke, called tokens. The [Login] token will turn into the login link you're used to seeing and the [Menu] token will serve as our DotNetNuke menu. Adding the [login] token will ensure that we're not locked out of our portal after applying this skin. The <div> tag we added will be a simple ContentPane for now.
Notice the two attributes we added to this <div> tag id and runat. These are attributes required by ASP.NET. The id is a unique identifier in the page and the value given to it (ContentPane) is recognized as name by DotNetNuke. The runat attribute tells the ASP.NET engine that it needs to be processed by it.
[edit] Why Parse?
Recall when we clicked on a link to parse our skin. What DotNetNuke does at this point is take our HTM file and replace those tokens with ASP.NET user controls that have been predefined in DotNetNuke. (Tokens are the representations of SkinObjects) At the end of this parsing process, the result is an ASCX file that becomes the real skin file, which is loaded into the Default.aspx at the runtime event of a page request.
Anytime after parsing the skin for the first time, you may go in and look at the ASCX file with a text editor, and even modify and see immediate changes without doing a parse. As tempting as editing the ASCX file may be (especially if you're an ASP.NET developer and understand editing ASCX files), you really should not be doing that. This ASCX file is regenerated and is replaced each time a HTM skin file is re-parsed. We will also want to create our skins in a way that would be compatible with the future versions of DotNetNuke. Starting off with an HTM skin file puts us on the path to achieve this goal.online website design
[edit] Finishing Touches
The next thing you will want to do is add more tokens and a little HTML to make yourself a little more proud of your DNN skin. To do this, go back to your HTM file and add two or three items from the list of tokens shown as follows:
[LOGO] [BANNER] [SEARCH] [LANGUAGE] [CURRENTDATE] [BREADCRUMB] [USER] [COPYRIGHT] [TERMS] [PRIVACY] [DOTNETNUKE]
Now add in some HTML. You may want to add in a few <hr/> (horizontal rule) or <br/> (vertical break) tags to separate things out.
When you make changes and want to see them, remember to go to the Admin menu and then to the Skins page and re-parse the skin, then go to the Home page to see the changes.
[edit] Additional References
- For instructions on installing DotNetNuke, click here
- For instructions on Adding Styles in DotNetNuke, click here
- For instructions on Setting up Development Environment for Skinning DotNetNuke, click here
[edit] Source
The source of this content is Chapter 2: Creating Your First Skin of DotNetNuke Skinning Tutorial by Darren Neese (Packt Publishing, 2008).logo design by Kevin Josh 2010
Executive Editor Sean Lopez own : SEO Company and provider of Link Building Services and SEO Services
And Like Costumes and Halloween Costumes and criar sites
And Like The Global Information Network and Global Information Network
