By Lee Sykes
June 2006
One of the regular problems skin designers come across when creating their own skins is un-explained styles appearing in their designs.
For instance, you have setup the Solpart menu to use a colored background, but surrounding each of the menu items is a white line border even though you have not specified a white line border in your skin.css file. (View the
Skinning Toolkit for DotNetNuke CSS class styling options.)
How does this happen?
You need to be aware of the order that the DotNetNuke CSS files are read and interpreted.
DotNetNuke reads the CSS code from these files in the following order:
- default.css (Created by DotNetNuke, stored at folder: Portals/_default/)
- skin.css (Created by your current page skin)
- container.css (Created by your current page container)
- portal.css (Created by DotNetNuke for each portal in your installation. A portal.css file template is stored at folder: Portals/_default/ which is copied to each portal folder ie: Portals/0 (each portal number ie. 0,1,2,3) it is this portal.css file that is read by your DotNetNuke skin)
Inheritance
Your skin inherits the settings from each of the css files, unless they are re-set by another CSS file. Lets walk through an example:
In the default.css file we will set the Normal class:
.Normal
{
font-family: Tahoma, Arial, Helvetica;
font-size: 11px;
font-weight: normal;
}
If we do not specify the Normal class in any of the other css files, this will be the settings for the Normal class used by the skin.
If we now set in the skin.css file:
.Normal
{
font-size: 15px;
}
The skin now picks up the settings from the skin.css file and uses a font-size of 15px, rather than the 11px size that is set in the default.css file.
The skin will however use the font-family and font-weight that we have specified in the default.css file because we have not overridden the settings within the skin.css file.
If we then set in the portal.css file:
.Normal
{
font-family: Verdana;
font-size: 12px;
font-weight: bold;
}
This will override all of the settings from the default.css, skin.css and container.css files for the .Normal class and the text will now use the Verdana font in bold at a size of 12px.
So if you are editing the skin.css file and un-explained styling is appearing in your skin, check the css code in the default.css file first to ensure that you are not inheriting any settings. If you are, then you need to override those settings, just as we did in the example above.
How to make life easier and files smaller
If you have to override a lot of the settings in the default.css file, this causes a lot of duplicate CSS code that is not needed.
If you are creating a skin for your own website where you know your skin is not going to rely on the settings from the default.css file, you can edit the default.css file and remove all of the duplicate code.
For instance, I personally start a new DotNetNuke installation by editing the default.css file and removing the code that I am going to specify in my skin.css file. This includes code for the Solpart menu, Normal classes, etc. In doing this I am starting with a blank canvas and do not have to worry about un-explained styling creeping into my skin.
Warning: If you are going to use this method, you can only use it in situations where you can edit the default.css file. If you are creating a skin to release into the DNN Community, you need to override the CSS settings in the default.css file using the skin.css file, otherwise when a user installs your skin all sorts of un-explained styling may appear.
The default.css file
Below is an example default.css file which has been edited. We have removed the classes that we commonly style within our skin.css file and we have just left the essential items such as styling for the FileManager, Wizard and Module Settings menu. We have also implemented CSS shorthand techniques and removed any excess coding that we have highlighted within this website such as the legacy DNN2-1 styles. The CSS code in this version also passes the
W3C standards.
If you use this code with the DNN-Blue skin you will notice that most of the styling has now been removed ready for you to adapt and style the skin suitable for your own needs.
The default.css file has now been reduced from the original 16k to 4k.
You can download this file from here:
Edited default.css file
(Make sure you backup the original default.css file before editing or replacing it.)
Edited default.css file example
/* ================================
Default styles FOR DotNetNuke
================================
*/
/* background color for the content part of the pages */
Body
{
background-color: #FFF;
font-family: Tahoma, Arial, Helvetica, Sans-Serif;
}
.ControlPanel {
width: 100%;
height: 64px;
background-color: #FFF;
border: #036 1px solid;
}
/* styles used in the FileManager */
.FileManager
{
border: #000 1px solid;
height: 400px;
}
.FileManager_ToolBar
{
border-bottom: #000 1px solid;
height: 25px;
}
.FileManager_Explorer
{
height:100%;
border: #696969 1px solid;
background-color: #FFF;
margin: 2px;
}
.FileManager_FileList
{
height:100%;
border: #696969 1px solid;
background-color: #FFF;
margin: 2px;
overflow: auto;
}
.FileManager_MessageBox
{
text-align: center;
vertical-align: middle;
background-color: #FFF;
padding: 25px;
}
.FileManager_Header
{
font-size: 11px;
font-weight: bold;
color: #E7E7FF;
background-color: #9EBFF6;
border-bottom: #696969 1px solid;
height: 25px;
}
.FileManager_Pager
{
background-color: #EEE;
border-top: #696969 1px solid;
height: 25px;
}
.FileManager_StatusBar
{
background-color: #dedfde;
height: 25px;
margin: 2px;
}
.FileManager_Item
{
font-size: 11px;
font-weight: normal;
color: #000;
background-color: #F8F8F8;
border-top: #000 1px dashed;
border-bottom: #000 1px dashed;
}
.FileManager_AltItem
{
font-size: 11px;
font-weight: normal;
color: #000;
background-color: #EEE;
border-style: none;
}
.FileManager_SelItem
{
font-size: 11px;
font-weight: bold;
color: #FFF;
background-color: #9ff;
border-style: none;
}
.FileManagerTreeNode
{
font-size: 11px;
font-weight: normal;
}
.FileManagerTreeNodeSelected
{
font-size: 11px;
font-weight: normal;
background-color: #dcdcdc;
}
/* styles used in the Wizard Framework */
.Wizard
{
border: #000 1px solid;
height: 400px;
width: 650px;
}
.WizardButton
{
border: #696969 1px solid;
padding: 2px;
background-color: #dcdcdc;
}
.WizardHeader
{
background: #ffc;
border-bottom: #000 1px solid;
height:40px;
}
.WizardFooter
{
border-top: #000 1px solid;
background: #cfc;
}
.WizardBody
{
padding: 10px;
height: 325px;
}
.WizardHelp
{
padding: 5px;
border-left: #000 1px solid;
width: 180px;
background-color: #cff;
}
.WizardHelpText
{
overflow: auto;
font-size: 8pt;
color: #000;
}
.WizardText
{
font-size: 9pt;
color: #000;
}
BLOCKQUOTE, PRE {
font-family: Lucida Console, monospace;
}
UL LI {
list-style-type: square ;
}
UL UL LI {
list-style-type: disc;
}
UL UL UL LI {
list-style-type: circle;
}
OL LI {
list-style-type: decimal;
}
OL OL LI {
list-style-type: lower-alpha;
}
OL OL OL LI {
list-style-type: lower-roman;
}
HR {
height:1pt;
}
/* Module Title Menu */
.ModuleTitle_MenuContainer {
border-width: 0;
}
.ModuleTitle_MenuBar {
height:16px;
background-color: Transparent;
}
.ModuleTitle_MenuItem {
color: #000;
font-size: 9pt;
font-weight: bold;
font-style: normal;
border: #FFF 1px solid;
border-width: 1px 0;
background-color: Transparent;
}
.ModuleTitle_MenuIcon {
background-color: #EEE;
border: #EEE 1px solid;
border-width: 1px 0 1px 1px;
text-align: center;
width: 15px;
height: 21px;
}
.ModuleTitle_SubMenu {
z-index: 1000;
cursor: pointer;
background-color: #FFF;
border-width: 0;
}
.ModuleTitle_MenuBreak
{
border: #EEE 1px solid;
border-width: 1px 0;
background-color: #EEE;
height: 1px;
}
.ModuleTitle_MenuItemSel
{
color: #000;
font-size: 9pt;
font-weight: bold;
font-style: normal;
background-color: #C1D2EE;
}