If you ever tried to view the source when a DotNetNuke page is loaded in the browser, you probably noticed that there are several CSS style sheets attached to it. Here is some useful information about how the DotNetNuke CSS system works and how you can make it work for you.
I added numbers to the example below to make it easier to understand.
<LINK id="_dnn3_Portals__default_" rel="stylesheet" type="text/css" href="/dnn3/Portals/_default/default.css"></LINK>
<LINK id="_dnn3_Portals_0_Skins_MyFirstSkin_" rel="stylesheet" type="text/css" href="/dnn3/Portals/0/Skins/MyFirstSkin/skin.css"></LINK>
<LINK id="_dnn3_Portals_0_Containers_MyFirstSkin_" rel="stylesheet" type="text/css" href="/dnn3/Portals/0/Containers/MyFirstSkin/container.css"></LINK>
<LINK id="_dnn3_Portals_0_" rel="stylesheet" type="text/css" href="/dnn3/Portals/0/portal.css"></LINK>
When a page has multiple CSS style sheets attached to it then all the styles in those documents will apply to it. But when there are CSS classes with the same names and same styles in more than one of those style sheets then the styles that loaded last will override the previous. For example there is a CSS class in the “/Portals/_default/default.css” with the name “.Head” which includes these styles:
In /Portals/_default/default.css file:
.Head{
font-family:Tahoma, Arial, Helvetica;
font-size:20px;
font-weight:normal;
color:#333;
}
If in the skin.css we add a CSS class with the same name .Head we can override some or all of the styles applied previously.
In the /Portals/0/Skins/MyFirstSkin/skin.css file:
.Head{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:18px;
font-weight:bold;
}
Now only the color style of the /Portals/_default/default.css will apply to our page. The other styles will get overridden and to our page, DotNetNuke will apply the ones that we added in the skin.css. Let's see now why and how DotNetNuke adds those style sheets to the page.
The first style sheet DotNetNuke will attach to the page will always be the /Portals/_default/default.css and in there we can find some default styles that will apply to our page only if won’t get overridden from the next style sheets. Those default styles are there to ensure that the portal will have some styles applied to it even if all the other styles sheets are blank.
The second style sheet is the skin’s CSS which can be skin.css (/Portals/PortalID/skins/skinname/skin.css) or skinfilename.css (/Portals/PortalID/skins/skinname/skinfilename.css). To explain that further, when we create a skin we can have as many skin files we want to define different page structures. For example we can have: homepage.ascx, innerpage.ascx, admin.ascx, whatever.ascx etc. Each of these skin files may have its own style sheet. To do that we have to include in the skin’s folder a CSS file with the same name. So if we need to apply some CSS styles only to the homepage.ascx we have to put them in the homepage.css. Most of the skins don't use that feature but include just the skin.css which will apply to all skin files. When a skin includes a skin.css but also a skinfilename.css, DotNetNuke will attach both to the page, first the skin.css and then the skinfilename.css which of course will override the styles in the skin.css if there are CSS classes with the same name.
Then comes the style sheet for the containers (/Portals/PortalID/containers/skinname/container.css) which includes styles for the skin's containers but can override all the styles from the previous loaded stylesheets.
Last style sheet and the one that can override all the above is the portal.css (/Portals/PortalID/portal.css). This is the stylesheet we edit when we open the Stylesheet Editor in the Site Settings. In there we can find all the default CSS classes but without styles in them. They're blank so the administrator can easy override the default styles from the portal's interface.
There are more style sheets that interfere in our page's appearance and we cannot find them in the attached style sheets. Every module we use in our portal may include a module.css where the module’s developer can put styles to control the appearance of the module. Usually those styles are very basic and we don’t need to touch them but if you want to give it a try you can find them in each module's folder in /DesktopModules/. Just remember that not all modules use a module.css. Also for some complicated modules, their developers use templates to control the appearance of the module which is an ideal solution.
Let's take a look now at some of the most common used default CSS styles and what other styles a skin should include.
Important default CSS classes
/* the styles for our titles */
.Head{}
/* the normal text everywhere in our portal */
.Normal{}
/* the command links when we are logged in as administrators */
.CommandButton{}
Of course there are many more default styles (we can find them all in /Portals/_default/default.css) but most of them are to be applied on elements that we can also apply new custom CSS classes that we'll define in skin.css. I find this way more efficient. So for the CurrentDate skin object we can tell DotNetNuke that we don't want to use the default CSS class but a new CSS class which will be used only for that element:
In our skin.ascx file:
<dnn:CURRENTDATE runat="server" id="dnnCURRENTDATE" CssClass="CurrentDate" />
In our skin.css file:
/* the styles to be applied on the CurrentDate skin object */
.CurrentDate{}
DotNetNuke uses by default the .SelectedTab CSS class for the CurrentDate but uses this CSS Class also for other elements.
Other common but important styles we usually need to override:
/* the styles that will be applied to the body of our document like the background-color */
Body{}
/* the links everywhere in the contents of our portal */
A:link{}
A:visited{}
A:hover{}
A:active{}
Styling the Solpart menu
A challenging task when someone is new to DotNetNuke skinning is the Solpart menu CSS styles. Solpart is the most common used navigation system in DotNetNuke portals but although it's pretty cool, when it comes to its appearance, things become a bit tricky. Instead of going into theories on how things work with solpart, which is something that I can't do anyway, I suggest to download one of my free skins and copy the code I use and then go from there.
Resources related to this article