This skin is no longer being maintained, be sure to check out HammerFlex, a responsive skin for DotNetNuke using Bootstrap v3 http://cjh.am/1mGBQby

Source Code Modification

If you want to install MultiFunction, you should setup your development environment following this tutorial http://www.christoc.com/Tutorials/All-Tutorials/aid/1
Then install the SOURCE version of the module to the Host/Extensions page.
From there open up the Visual Studio solution in 2012 or 2013.

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 Chris Hammond

#Logo{
	margin:15px 0 0;
}

#Body,.Head
{
	color:#333;
}

.HeaderGraphic
{
	background-image:url(/portals/0/i/12-12/header_graphic.jpg);
	width:1200px;
}

#GraphicHeader
{
	background-image:url(/portals/0/i/12-12/headerbg_rp.png);
}

#GraphicHeader .page_header
{
	background:url(/portals/0/i/12-12/headerbg_rp.png) no-repeat scroll 50% 0 transparent;
}

.PageFooter
{
	background-image:url(/portals/0/i/12-12/footerbg_rp.png);
}

.FooterWrapper
{
	background:url(/portals/0/i/12-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:#901a1c;
}

.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(/portals/0/i/12-12/header_graphic_sm.jpg) no-repeat;
	height:98px;
}


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

#Logo
{
	padding:25px 0 0;
}

.HeaderGraphic
{
	background-image:url(/portals/4/i/12-31-12/hg1.jpg);
}

#GraphicHeader
{
	background-image: url(/portals/4/i/12-31-12/headerbg_rp.jpg);
}

#GraphicHeader .page_header
{
	background:url(/portals/4/i/12-31-12/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;
}

#ContentWrapper{background:url("/images/1x1.gif") repeat-x scroll 0 0 #fff;padding-top:15px;}
.ContainerHeader{padding:0 0 5px;}


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

.HeaderGraphic{display:none;}

.Edit #GraphicHeader, .TwoColumn #GraphicHeader
{
	height:99px;
	max-height:39px;
	min-height:32px;
	background-position:0 -168px;
}

.Edit #GraphicHeader .page_header, .TwoColumn #GraphicHeader .page_header
{
	background-position:50% -168px;
}

#Body, #ContentWrapper
{
	background-color:#fff;
	background-image:none;
	color:#000;
}

#ContentWrapper
{
	padding-top:10px;
}

Last edited Jun 17, 2014 at 7:58 PM by christoc, version 13

Comments

No comments yet.