Chris Hammond · 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.
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/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 Codeplex.
1: #Logo 2: {3: margin: 15px 0 0;
4: } 5: 6: #Body, .Head
7: {8: color:#333;
9: } 10: 11: .HeaderGraphic
12: {13: background-image:url(https://s3.amazonaws.com/dnncdn/cjh/header_graphic.png);
14: } 15: 16: #GraphicHeader 17: { 18: 19: background-image:url(https://s3.amazonaws.com/dnncdn/cjh/headerbg_rp.png);
20: } 21: 22: #GraphicHeader .page_header
23: {24: background:url(https://s3.amazonaws.com/dnncdn/cjh/headerbg.jpg) no-repeat scroll 50% 0 transparent;
25: } 26: 27: .PageFooter
28: {29: background-image:url(https://s3.amazonaws.com/dnncdn/cjh/footerbg_rp.png);
30: } 31: 32: .FooterWrapper
33: {34: background:url(https://s3.amazonaws.com/dnncdn/cjh/footerbg.jpg) no-repeat scroll 50% 0 transparent;
35: } 36: 37: #Header 38: {39: border-bottom: 3px solid #000000;
40: } 41: 42: #ContentWrapper 43: {44: background: url("https://s3.amazonaws.com/dnncdn/cjh/contentbg_rp.png") repeat-x scroll 0 0 #CCCCCC;
45: } 46: 47: .MenuRootItem.hov
48: {49: background-color:#06105a;
50: } 51: 52: 53: .Edit #GraphicHeader, .TwoColumn #GraphicHeader
54: {55: height:130px;
56: max-height:130px;
57: min-height:130px;
58: background-position:0 -70px;
59: } 60: 61: .Edit #GraphicHeader .page_header, .TwoColumn #GraphicHeader .page_header
62: {63: background-position:50% -70px;
64: } 65: 66: .Edit .HeaderGraphic, .TwoColumn .HeaderGraphic
67: {68: background:url(https://s3.amazonaws.com/dnncdn/cjh/header_graphic_sm.png) no-repeat;
69: height:106px
70: }
