· Chris Hammond
Last Updated

The flexibility of the MultiFunction Skin for DotNetNuke

Learn how to customize the header image size for different pages using CSS in this tutorial on skin modifications for DotNetNuke.

Learn how to customize the header image size for different pages using CSS in this tutorial on skin modifications 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!

Share:
Back to Blog

Related Posts

View All Posts »