The flexibility of the MultiFunction Skin for DotNetNuke

By
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/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: }

Recent Comments

Comment Avatar
I am wanting to change the background color of the MultiFuction page per users choice. I have a Teacher that wants his page a different color. Thanks
Posted By: Paul Logan on May 2014
Comment Avatar
Paul, you would likely need to create a skin object that allows for this, the skin itself won't provide that functionality.
Posted By: Chris Hammond on May 2014

Add Comment

Please add your comment by filling out the field(s) below. Your comment may need to be approved before it becomes visible.
Enter your first name for display with the comment
Enter your last name for display with the comment.
Enter your comment here.
If you can't type DNNRocks in, you can't post, plain and simple.
Submit Comment Cancel

Chris Hammond

Chris Hammond is a father, husband, leader, software developer, photographer and car guy. Chris focuses on the latest in technology including artificial intelligence (AI) and has spent decades becoming an expert in ASP.NET and DotNetNuke (DNN) development. You will find a variety of posts relating to those topics here on the website. For more information check out the about Chris Hammond page.

Find me on Twitter, GitHub and LinkedIn.