Free DotNetNuke MultiFunction Skin

Documentation and Example CSS provided below

See Lightbox Documentation for the OrangeBox documentation.

Example CSS Overrides
To change the look of the MultiFunction skin you will likely use the following CSS classes and IDs.

#Logo
.HeaderGraphic
#GraphicHeader
#GraphicHeader .page_header
.PageFooter
.FooterWrapper
.MenuRootItem.hov

Example CSS in use on http://www.ChrisHammond.com this includes overridden CSS for Engage:Publish

.categoryItemList
{
	background-color:transparent;border:0;margin-bottom:15px;
}
.divItemsListing h2
{
	font-size:20px;
}
.shadow
{
	min-width:254px;
}
#publishTagCloud ol
{
	padding:0;line-height:35px;
}
#Logo
{
	margin:15px 0 0;
}
#Body,.Head
{
	color:#333;
}
.HeaderGraphic
{
	background-image:url(https://s3.amazonaws.com/dnncdn/cjh/01-12/header_graphic.png);width:960px;
}
#GraphicHeader
{
	background-image:url(https://s3.amazonaws.com/dnncdn/cjh/01-12/headerbg_rp.png);
}
#GraphicHeader .page_header
{
	background:url(https://s3.amazonaws.com/dnncdn/cjh/01-12/headerbg.jpg) no-repeat scroll 50% 0 transparent;
}
.PageFooter
{
	background-image:url(https://s3.amazonaws.com/dnncdn/cjh/01-12/footerbg_rp.png);
}
.FooterWrapper
{
	background:url(https://s3.amazonaws.com/dnncdn/cjh/01-12/footerbg.jpg) no-repeat scroll 50% 0 transparent;
}
#Header
{
	border-bottom:3px solid #000;
}
#ContentWrapper
{
	background:url("/images/1x1.gif") repeat-x scroll 0 0 #fff;padding-top:15px;
}
.MenuRootItem.hov
{
	background-color:#fdcc00;
}
.Edit #GraphicHeader,.TwoColumn #GraphicHeader
{
	height:130px;max-height:130px;min-height:130px;background-position:0 -70px;
}
.Edit #GraphicHeader .page_header,.TwoColumn #GraphicHeader .page_header
{
	background-position:50% -70px;
}
.Edit .HeaderGraphic,.TwoColumn .HeaderGraphic
{
	background:url(https://s3.amazonaws.com/dnncdn/cjh/01-12/header_graphic_sm.png) no-repeat;height:106px;
}
#cjhimages
{
	padding:0;margin:0;width:325px;overflow:hidden;
}
#cjhimages ul
{
	list-style:none;float:right;padding:0;margin:0;text-align:right;
}
#cjhimages ul li
{
	display:inline;
}
#cjhimages ul li img
{
	border:none;padding:0 5px 5px 0;width:75px;height:75px;opacity:.6;-moz-opacity:.6;
}
#cjhimages ul li img:hover
{
	opacity:1;-moz-opacity:1;
}
#ob_title a,#ob_title a:active,#ob_title a:link,#ob_title a:hover,#ob_title a:visited
{
	color:#fff;
}
#Body
{
	background-color:#fff;
}
.LeftPane
{
	width:325px;
}
.TwoColumn .ContentPane
{
	width:605px;
}
.FooterLeftPane, .FooterMidPane, .FooterRightPane,.FooterWrapper .Head,.FooterWrapper a, .FooterWrapper a.SkinObject, .FooterWrapper a.CommandButton 
{
	color: #000;
}
.FooterLeftPane, .FooterMidPane, .FooterRightPane
{
	width:280px;
}

Example CSS in use on http://www.Project350z.com

#Logo
{
    padding:25px 0 0 0;
}
.HeaderGraphic
{
    background-image:url(https://s3.amazonaws.com/dnncdn/p350z/header_graphic.png);
}

#GraphicHeader
{

	background-image:url(https://s3.amazonaws.com/dnncdn/p350z/headerbg_rp.png);
}

#GraphicHeader .page_header
{
	background:url(https://s3.amazonaws.com/dnncdn/p350z/headerbg.jpg) no-repeat scroll 50% 0 transparent;
}

.PageFooter
{
	background-image:url(https://s3.amazonaws.com/dnncdn/p350z/footerbg_rp.png);
}

.FooterWrapper
{
	background:url(https://s3.amazonaws.com/dnncdn/p350z/footerbg.jpg) no-repeat scroll 50% 0 transparent;
}