In DotNetNuke, all the skin files are actually composed of user controls that inherit from the DotNetNuke.UI.Skins base. There are a couple different methods for creating skins and it comes down to preference really, once you understand the basics of what needs to happen.
The first method is by creating an .html file with special DotNetNuke tokens. When you upload your skin package, the DotNetNuke engine will read your html file, replacing all the tokens with the proper code syntax for you and automatically create the .ascx (user control) that is actually used to render your skin. Being more of a code monkey than a hip designer, this is not my preferred method. But, I’ll go over what I can tell you about it and let you get started from there.
The first thing I did was google for “open source css” and found a template to use for this demonstration. I found one here http://www.free-css.com/. All of the free CSS templates found here are either completely free without restrictions, classed under GPL/GNU or fall under a Creative Commons licence. The files I’m using for this tutorial are available in the download package attached to this article.
Here is the finished product from the downloaded template. We will convert this to a DotNetNuke skin and make it is as close to the original as possible. Please know however, that this article is written more from a how-to perspective on DNN Skins than on CSS styling itself.
Now, if we try to visualize the skeleton of the page (take out the content), we’ll see that we have the basic structure shown below:
Now, that we have our basic structure we can begin to build our outline. I use Visual Studio, but you can use Dreaweaver or notepad…whatever you prefer. Whatever you choose, let’s begin by laying out the basic structure with HTML
The easiest way (for me) is to open the index.html file that I downloaded, link the stylesheet and start stripping out all the content so that I end up with something like this:
By viewing the CSS Stylesheet that’s included, we can see that the image with the table and chairs is produced from the style for the #header element. This is where we need to place our logo which we can do by using the [LOGO] token. You can see the other tokens we’ll use in this skin below.
*The content in the images may change in the downloaded package as I correct things as I work. Please refer to the zip file for the final tags that were used.
Now, this is a good point to stop and point some things out. First of all, depending on what version of DotNetNuke you are using will direct how you go from here. For all versions PRIOR to DotNetNuke 4.9, you should also provide an XML file that accompanies this html file in the skin package that you upload to your website. The reason for this is that the XML file contains the parameters you will use for each of the tokens. For example, the [NAV] token will create a menu. But, do you want it to show up vertical or horizontal?
Note on the Content Panes – Use the [CONTENTPANE] token followed by " :X “ where X is the number to use to identify the pane. Then, in the XML file use this format:
For more information on pre DNN 5 skinning, review the following DotNetNuke Skinning Guide. It is actually very good information for the beginner even if you are using newer versions of DNN.
In DotNetNuke 4.9 and later, you can now embed the parameters directly into your html file like this:
From here, I am going to use the DNN 5 approach because a) I have DNN 5 installed on my localhost and b) I really don’t like this method of skinning, so I’m taking the easy way out! :-) So, here’s what we have with all the parameters in tact:
Ok, so now that I’ve got the basic structure down, let’s get ready to add it to our skin repository in the website. *At this point, there is still tweaking that will be required to get our new DNN skin to look the original, primarily with the menu item due to the way DNN menu’s render and this template uses CSS only to style the menu. I’ll leave that up to you to have fun with.
Also, because this is a CSS based skin, I am adding a file for the doctype. Basically, you create a text file and add the following:
<SkinDocType>
<![CDATA[<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">]]>
</SkinDocType>
Then, name the file with this naming convention: skinfilename.doctype.xml
INSTALLING THE SKIN
There are basically two ways that I can think of to make your new skin accessible…
- If you are using DNN 5 and above, you need to package your skin with the new requirements of the skinning engine
- If you are using below DNN 5, you will need to include the .html file, the .xml file, the skin.css file and a .doctype declaration file if you are using a css, rather than table, based file.
- Regardless of version, you can directly upload the folder and files to your website. If you want the skin file accessible at the host level, upload to wwwroot\Portals\_default\skins , if you want it at site level only upload to wwwroot\Portals\PortalID\Skins.
If you are using below DNN 5, you will need to include the .html file, the .xml file, the skin.css file and a .doctype declaration file if you are using a css, rather than table, based file. Regardless of version, you can directly upload the folder and files to your website. If you want the skin file accessible at the host level, upload to wwwroot\Portals\_default\skins\ , if you want it at site level only upload to wwwroot\Portals\PortalID\Skins. The first two methods you can use to install the skin the same way you would install any other skin. If you use the third method, you must login to the site and “Parse” the html file. Navigate to the Skins administration page
Find your skin file in the Skins: dropdownlist. Scroll towards the bottom of the page and click Parse Skin Package
You should see something like the following output:
Finally, there are just a couple things I want to mention. First, DNN will automagically apply a css file for your skin if it has the same name as the skin file itself. Or, it will look for a skin file named skin.css. (If you are creating module, the same principle applies where DNN will look for a module.css by default). The second is that if you would like to refer to images, stylesheets, etc directly in your skin file, you can use <%=SkinPath %> and DNN will replace this with the relative path to your skin. Ex: <img src="<%=SkinPath %>images/myimage.gif" />
Once I installed the skin, I added a Text/HTML module to each of the three panes and copy and pasted the original content source from the original file directly into each module. Withouth any additional styling, here’s is the finished product so far:
Anyhow, I hope that helps lay down some initial information. I’ll talk more on creating skins using the usercontrol method next, which is where I am much more comfortable.
************************************* Refer to DotNetNuke Documentation for most accurate information ******************
Skinning Tokens
- For Skin Files
MENU
LOGIN
BANNER
BREADCRUMB
COPYRIGHT
CURRENTDATE
DOTNETNUKE
HELP
HOSTNAME
LINKS
LOGO
PRIVACY
SIGNIN
TERMS
USER
- For Containers
ACTIONS
ICON
TITLE
VISIBILITY