The flexibility of the MultiFunction Skin for DotNetNuke

I’ve been meaning to make some changes to the skin I was using on ChrisHammond.com for a couple of weeks now. Basically, it was running the MultiFunction Free DotNetNuke Skin that I created and released back in May. I wanted to make the “Home” skin use a different header image than the other pages, meaning the home page would have a larger header graphic, and the other pages would have a smaller graphic.

So tonight I set out to do that, with the goal of doing it all via CSS. I was successful, though I did find a few things to tweak in MultiFunction for the next release of the skin (not related to the changes I was making tonight).

Here’s the CSS I’m using now on ChrisHammond.com for the overrides for MultiFunction. I’ve also added this to the Documentation page of the MultiFunction skin on GitHub.

#Logo {
    margin: 15px 0 0;
}

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

.HeaderGraphic {
    background-image: url(https://s3.amazonaws.com/dnncdn/cjh/header_graphic.png);
}

#GraphicHeader {
    background-image: url(https://s3.amazonaws.com/dnncdn/cjh/headerbg_rp.png);
}

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

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

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

#Header {
    border-bottom: 3px solid #000000;
}

#ContentWrapper {
    background: url("https://s3.amazonaws.com/dnncdn/cjh/contentbg_rp.png") repeat-x scroll 0 0 #CCCCCC;
}

.MenuRootItem.hov {
    background-color: #06105a;
}

.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/header_graphic_sm.png) no-repeat;
    height: 106px;
}

These changes ensure that the homepage has a distinct visual style with a larger header while other pages maintain a more compact layout. Let me know if you have any feedback or suggestions for further refinements!