DotNetnuke Skinning - CSS, XML, HTM / HTML, & ASCX Files

Here we provide several CSS, XML, HTM / HTML, & ASCX Files to compare and refer to when designing and editing your DotNetNuke Skins.

CSS Files	XML Files	HTM / HTML Files	ASCX Files
skin.css (DNN-Gray)	skin.xml (DNN-Gray)	DNN-Gray.html	DNN-Gray.ascx
container.css (DNN-Gray)	container.xml (DNN-Gray)
default.css
portal.css

Skin.css (DNN-Gray)

This is the DNN-Gray Skin's skin.css file and is here to give you an example of the skin.css file. The CSS classes, ID, etc. used within the skin.css file primarily depend on the skin designer. But it is usually best to use the default.css file as you a blue print when creating your skin.css file.

/*
================================
Skin styles for DotNetNuke
================================
*/   

.pagemaster {
    width: 100%;
    height: 100%;    
    background-color: #fefefe;
}
.skinmaster {
    height: 100%;
    background-color: #eeeeee;
    border-right: #8f9092 1px solid;
    border-top: #8f9092 1px solid;
    border-left: #8f9092 1px solid;
    border-bottom: #8f9092 1px solid;
    -moz-border-radius-bottomleft: 15px;
    -moz-border-radius-bottomright: 15px;
    -moz-border-radius-topleft: 3px;
    -moz-border-radius-topright: 3px;
}
.skinheader {
}
.skingradient {
    background-image: url(gradient_DKGray.jpg);
    height: 30px;
}
.controlpanel {
    width: 100%;
    background-color: #fefefe;
}
.toppane {
    width: 100%;
    background-color: transparent;
    padding-left: 6px;
    padding-right: 4px;
    padding-top: 6px;
}
.leftpane {
    width: 175px;
    background-color: transparent;
    padding-left: 6px;
    padding-right: 4px;
    padding-top: 6px;
}
.contentpane {
    width: 100%;
    background-color: transparent;
    padding-left: 6px;
    padding-right: 4px;
    padding-top: 6px;
}
.rightpane {
    width: 175px;
    background-color: transparent;
    padding-left: 6px;
    padding-right: 4px;
    padding-top: 6px;
}
.bottompane {
    width: 100%;
    background-color: transparent;
    padding-left: 6px;
    padding-right: 4px;
    padding-top: 6px;
}
.main_dnnmenu_container {
    background-color: transparent;
}
.main_dnnmenu_bar {
    cursor: pointer;
    cursor: hand;
    height:16px;
    background-color: Transparent;
}
.main_dnnmenu_item td { /*TD if menu option for using tables is on*/
    cursor: pointer;
    cursor: hand;
    color: #000000;
    font-size: 9pt;
    font-weight: bold;
    font-style: normal;
    background-color: Transparent;
    font-family: Tahoma, Arial, Helvetica;
        white-space: nowrap;  /*Word wrapping menu item now optional*/    
        padding: 1px 3px 3px 1px;    
}

.main_dnnmenu_rootitem  { /*TD if menu option for using tables is on*/
    cursor: pointer;
    cursor: hand;
    color: #000000;
    font-size: 9pt;
    font-weight: bold;
    font-style: normal;
    background-color: Transparent;
    font-family: Tahoma, Arial, Helvetica;
    white-space: nowrap;  /*Word wrapping menu item now optional*/        
    padding: 0px 12px 0px 5px;   /*explicitly set padding for root menu items*/
}

.main_dnnmenu_itemhover {  
    background-color: #aaaaaa;
}

.main_dnnmenu_itemhover td {  
    background-color: #aaaaaa;
}


.main_dnnmenu_icon {
    cursor: pointer;
    cursor: hand;
    text-align: center;
    width: 15px;
    height: 100%;
}
.main_dnnmenu_submenu {
    background-color: #cccccc;  
    z-index: 1000;
    cursor: pointer;
    cursor: hand;
    filter:progid:DXImageTransform.Microsoft. Shadow(color='#696969', Direction=135, Strength=3);
    padding: 1px 1px 1px 1px;   /*explicitly set padding for sub-menus */
}
.main_dnnmenu_break {
    height: 1px;
    font-size: 1px;
}

.main_dnnmenu_arrow {
    border-right: #cccccc 1px solid;
    border-bottom: #cccccc 1px solid;
    border-top: #cccccc 0px solid;
    font-family: webdings;
    font-size: 10pt;
    cursor: pointer;
    cursor: hand;
}
.main_dnnmenu_rootmenuarrow {
    font-family: webdings;
    font-size: 10pt;
    cursor: pointer;
    cursor: hand;
}
.StandardButton {
   background: #aaaaaa none;
   color: #ffffff;
   font-family: Verdana, sans-serif;
   font-size: 11px;
   font-weight: normal;
}
.TreeViewMenu {
    width: 175px;
    background-color: #dddddd;
    border-right: #8f9092 1px solid;
    border-top: #8f9092 1px solid;
    border-left: #8f9092 1px solid;
    border-bottom: #8f9092 1px solid;
    -moz-border-radius-bottomleft: 15px;
    -moz-border-radius-bottomright: 15px;
    -moz-border-radius-topleft: 3px;
    -moz-border-radius-topright: 3px;
}
.TreeViewMenu_Header {
    background-image: url(gradient_LtGray.jpg);
}
.Head {
   font-family: Tahoma, Arial, Helvetica;
   font-size:  18px;
   font-weight:  normal;
   color: #333333;
}