By Lee Sykes
Released June 2006
Updated March 2007 (for DNN 4.4+)
You can reduce the overall size of your CSS files and therefore the page load time of your DotNetNuke portal by editing the CSS files.
It is possible to reduce the default.css file from 17K to 12K by using CSS shorthand techniques and editing the code so that it passes the
W3C CSS Validation Test.
The default.css file is created by the DotNetNuke installation and is located at folder: Portals/_default/
You can read further information covering CSS Shorthand in this article:
Minimising and creating efficient CSS code
If you use shorthand techniques for the default.css file as well as your skin.css files you will be able to easily reduce the overall file size and increase the performance of your DotNetNuke portal.
Below is an example of the default.css file using shorthand techniques. You can also download this file from here:
valid default.css using shorthand
(Make sure you backup the original default.css file before editing or replacing it.)
Further explanations of working with the default.css file can be found at:
Introduction to CSS and inheritance in DotNetNuke skins
Reference documentation for each of the classes used in the default.css file can be found at:
DotNetNuke Skinning Toolkit
Default.css file using CSS shorthand techniques
/* ================================
Default styles FOR DotNetNuke
================================
*/
/* background color for the content part of the pages */
Body
{
background-color: white;
font-family: Tahoma, Arial, Helvetica, Sans-Serif;
}
.ControlPanel, .PagingTable
{
width: 100%;
height: 64px;
background-color: #FFF;
border: #036 1px solid;
}
.SkinObject, A.SkinObject:link, A.SkinObject:visited, A.SkinObject:active, A.SkinObject:hover
{
font-size: 8.5pt;
font-weight: bold;
color: #036;
text-decoration: none;
}
/* style for module titles */
.Head
{
font-size: 20px;
font-weight: normal;
color: #333;
}
/* style of item titles on edit and admin pages */
.SubHead
{
font-size: 11px;
font-weight: bold;
color: #036;
}
/* module title style used instead of Head for compact rendering by QuickLinks and Signin modules */
.SubSubHead
{
font-size: 11px;
font-weight: bold;
color: black;
}
/* text style used for most text rendered by modules */
.Normal, .NormalDisabled, .NormalBold
{
font-size: 11px;
font-weight: normal;
}
/* text style used for rendered text which should appear disabled */
.NormalDisabled
{
color: Silver;
}
/* text style used for rendered text which requires emphasis */
.NormalBold
{
font-weight: bold;
}
/* text style used for error messages */
.NormalRed
{
font-size: 12px;
font-weight: bold;
color: #f00;
}
/* text style used for textboxes in the admin and edit pages, for Nav compatibility */
.NormalTextBox
{
font-size: 12px;
font-weight: normal;
}
/* styles used by Data Grids */
.DataGrid_AlternatingItem, .DataGrid_Header, .DataGrid_Item, .DataGrid_SelectedItem
{
background-color: Transparent;
color: Black;
font-size: 10px;
font-weight: normal;
}
.DataGrid_AlternatingItem
{
background-color: White;
color: Red;
}
.DataGrid_Container
{
background-color: Transparent;
}
.DataGrid_Footer
{
background-color: White;
}
.DataGrid_Header
{
font-weight: bold;
text-align: center;
}
.DataGrid_SelectedItem
{
background-color: Silver;
color: Blue;
}
/* styles used by TreeMenu Skin Object */
.TreeMenu_Node
{
font-size: 12px;
font-weight: normal;
}
.TreeMenu_NodeSelected
{
font-size: 12px;
font-weight: normal;
background-color: #dcdcdc;
}
A.TreeMenu_Node:link, A.TreeMenu_NodeSelected:link, A.TreeMenu_Node:visited, A.TreeMenu_NodeSelected:visited
{
text-decoration: none;
color: #036;
}
A.TreeMenu_Node:hover, A.TreeMenu_NodeSelected:hover
{
text-decoration: none;
color: #f00;
}
A.TreeMenu_Node:active, A.TreeMenu_NodeSelected:active
{
text-decoration: none;
color: #036;
}
/* 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
{
font-size: 11px;
font-weight: bold;
background-color: #EEE;
border-top: #696969 1px solid;
height: 25px;
}
.FileManager_StatusBar
{
font-size: 11px;
font-weight: normal;
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-family: Tahoma, Arial, Helvetica;
font-size: 11px;
font-weight: normal;
background-color: #dcdcdc;
}
A.FileManagerTreeNode:link, A.FileManagerTreeNodeSelected:link, A.FileManagerTreeNode:visited, A.FileManagerTreeNodeSelected:visited
{
text-decoration: none;
color: #036;
}
A.FileManagerTreeNode:hover, A.FileManagerTreeNodeSelected:hover
{
text-decoration: none;
color: #f00;
}
A.FileManagerTreeNode:active, A.FileManagerTreeNodeSelected:active
{
text-decoration: none;
color: #036;
}
/* 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;
height: 25px;
text-align: right;
}
.WizardBody
{
padding: 10px;
height: 325px;
}
.WizardHelp
{
padding: 5px;
font-size: 9pt;
border-left: #000 1px solid;
width: 180px;
background-color: #cff;
}
.WizardHelpText
{
overflow: auto;
font-size: 8pt;
width: 180px;
color: #000;
height: 300px;
}
.WizardText
{
font-size: 9pt;
color: #000;
}
/* text style used for help text rendered by modules */
.Help
{
border: black 1px solid;
padding: 2px;
font-weight: normal;
font-size: 11px;
color: black;
background-color: #ff9;
}
/* text style for buttons and link buttons used in the portal admin pages */
.CommandButton
{
font-size: 11px;
font-weight: normal;
}
/* hyperlink style for buttons and link buttons used in the portal admin pages */
A.CommandButton:link, A.CommandButton:visited
{
text-decoration: underline;
color: #036;
}
A.CommandButton:hover
{
text-decoration: underline;
color: #f00;
}
A.CommandButton:active
{
text-decoration: underline;
color: #036;
}
/* button style for standard HTML buttons */
.StandardButton
{
padding: 0 5px;
font-weight: normal;
font-size: 11px;
background: #ddd;
color: #000;
font-family: Verdana, sans-serif;
}
/* GENERIC */
H1, H2
{
font-size: 20px;
font-weight: normal;
color: #664;
}
H3, H4
{
font-size: 12px;
font-weight: normal;
color: #036;
}
H5, H6 DT
{
font-size: 11px;
font-weight: bold;
color: #036;
}
TFOOT, THEAD
{
font-size: 12px;
color: #036;
}
TH
{
vertical-align: baseline;
font-size: 12px;
font-weight: bold;
color: #036;
}
A:link, A:visited
{
text-decoration: none;
color: #036;
}
A:hover
{
text-decoration: underline;
color: #f00;
}
A:active
{
text-decoration: none;
color: #036;
}
SMALL
{
font-size: 8px;
}
BIG
{
font-size: 14px;
}
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
{
color: #696969;
height: 1pt;
text-align: left;
}
/* Module Title Menu */
.ModuleTitle_MenuContainer
{
border-width: 0;
}
.ModuleTitle_MenuBar
{
cursor: pointer;
height: 16px;
background-color: Transparent;
}
.ModuleTitle_MenuItem
{
cursor: pointer;
color: black;
font-size: 9pt;
font-weight: bold;
font-style: normal;
border: white 1px solid;
border-width: 1px 0;
background-color: Transparent;
}
.ModuleTitle_MenuIcon
{
cursor: pointer;
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
{
cursor: pointer;
color: #000;
font-size: 9pt;
font-weight: bold;
font-style: normal;
background-color: #C1D2EE;
}
.ModuleTitle_MenuArrow
{
font-family: webdings;
font-size: 10pt;
cursor: pointer;
border: #FFF 1px solid;
border-width: 0 1px 1px 0;
}
.ModuleTitle_RootMenuArrow
{
font-family: webdings;
font-size: 10pt;
cursor: pointer;
}
/* Main Menu */
.MainMenu_MenuContainer
{
background-color: transparent;
}
.MainMenu_MenuBar
{
cursor: pointer;
height: 16px;
background-color: Transparent;
}
.MainMenu_MenuItem
{
cursor: pointer;
color: black;
font-size: 9pt;
font-weight: bold;
font-style: normal;
border: #FFF 1px solid;
border-width: 1px 0;
background-color: Transparent;
}
.MainMenu_MenuIcon
{
cursor: pointer;
background-color: #EEE;
border: #EEE 1px solid;
border-width: 1px 0 1px 1px;
text-align: center;
width: 15px;
height: 21px;
}
.MainMenu_SubMenu
{
z-index: 1000;
cursor: pointer;
background-color: #FFF;
border-width: 0;
}
.MainMenu_MenuBreak
{
border: #EEE 1px solid;
border-width: 1px 0;
background-color: #EEE;
height: 1px;
}
.MainMenu_MenuItemSel
{
cursor: pointer;
color: black;
font-size: 9pt;
font-weight: bold;
font-style: normal;
background-color: #C1D2EE;
}
.MainMenu_MenuArrow
{
font-family: webdings;
font-size: 10pt;
cursor: pointer;
border: #FFF 1px solid;
border-width: 0 1px 1px 0;
}
.MainMenu_RootMenuArrow
{
font-family: webdings;
font-size: 10pt;
cursor: pointer;
}
/* LEGACY STYLES from DNN 1-2 */
.HeadBg
{
background-color: #CCC;
}
.TabBg
{
background-color: #000;
}
.SelectedTab
{
font-weight: bold;
font-size: 8.5pt;
color: #FFF;
text-decoration: none;
}
A.SelectedTab:link
{
text-decoration: none;
color: #FFF;
}
A.SelectedTab:visited
{
text-decoration: none;
color: #EEE;
}
A.SelectedTab:hover
{
text-decoration: none;
color: #CCC;
}
A.SelectedTab:active
{
text-decoration: none;
color: #EEE;
}
.OtherTabs
{
font-weight: bold;
font-size: 8.5pt;
color: white;
text-decoration: none;
}
A.OtherTabs:link
{
text-decoration: none;
color: white;
}
A.OtherTabs:visited
{
text-decoration: none;
color: #EEE;
}
A.OtherTabs:active
{
text-decoration: none;
color: #EEE;
}
A.OtherTabs:hover
{
text-decoration: none;
color: #CCC;
}
.PagingTable
{
height: 33px;
}
.LabelEditOverClass
{
cursor: pointer;
text-decoration: underline overline;
}
.LabelEditTextClass
{
border: solid 1px red;
background-color: Transparent;
}
.LabelEditWorkClass
{
/*background: url(/DotNetNuke/images/dnnanim.gif) no-repeat right;*/
border: solid 0px red;
background-color: Transparent;
}
/* style for the DNNTextSuggest control select menu */
.SuggestTextMenu
{
border: solid 1px #000;
white-space: nowrap;
background: #FFF;
}
/* style for the DNNTextSuggest control selected menu node */
.SuggestNodeOver
{
background-color: navy;
color: #FFF;
}