Contact

DotNetNuke Tips for Skinning, CSS, and Design

Ralph Williams Blog

Create a non-Award Winning DotNetNuke Skin (pt. 3)

Mar 12

Written by: Ralph Williams
Friday, March 12, 2010 9:34 PM  RssIcon

This is part of a three part series on skinning my Reasonable Design Skin from the 2010 DotNetNuke Design Challenge Skinning Contest.

Part 1 was Slicing the design for the DNN Skin.

Part 2 was writing the HTML for the skin.

Here, in part 3, I will go over the CSS for the skin. If skinning with CSS is new to you, be sure to check out my post An Introduction to Skinning in CSS for DotNetNuke.

The CSS

Now that we have all of the HTML in place, we need to style it. The first thing that I do, is to apply my “pre-fab” tools. I will not go into much detail with these as there are plenty of available resources out there.

  1. Reset CSS. I use this to “level the playing field” across the browsers. I use a modified version of the YUI (Yahoo User Interface) reset.css. You can find out more here. Although, I will probably be changing this in the near future as, its not w3c compliant.
  2. Sticky footer. I mentioned this in the previous blog post. You can read more about the New CSS Sticky Footer Layout method here.
  3. Clearfix. There are some issues that come up while floating divs which requires them to be cleared. Please take a few minutes to read about the Clearfix method. 
        @import url("reset-fonts.css"); 
    /* CSS Sticky footer */ * {margin:0;padding:0;} html, body, form, #topWrap {height: 100%;} form > #topWrap {height: auto; min-height: 100%;} /* clearfix */ .clearfix:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}.clearfix {display: inline-block;}/* Hides from IE-mac \*/ * html .clearfix { height: 1%;}.clearfix {display: block;}/* End hide from IE-mac */

Next, we will begin positioning the content on the page.

  1. Forces scrollbar to avoid page jump and removes background. 
        html { 
    	margin-bottom:1px; /* forces scrollbar to avoid page jump */ 
        background:none; /* clears background */ 
    }
  2. Reset text align from reset.css to left aligned and set page background. 
        body { 
    	text-align:left; 
        background:url(images/top-bg.jpg) #d9d9d9 repeat-x; 
    }
  3. Set up div to be used for the CSS Sticky footer. 
        #topWrap { 
    	height:100%; 
        position:relative; 
    }
  4. Center the top section of the page. I typically add a class to specify the skin in the top most div of my skin. Setting up a skin-specific class (.home-page and .sub-page) allows you to keep the same class and id names on the rest of the skin and still make them specific to the skin. 
        .home-page #contentWrap { 
    	width:975px; 
        margin:0 auto 60px; 
    } 
    .sub-page #contentWrap { 
    	width:975px;
        margin:0 auto 141px; 
    }
  5. Position the Logo. 
        #logoWrap { 
    	float:left; 
        margin:38px 0 0 11px; 
    }
  6. Position the Menu. Had to use relative positioning and z-indexing to get menu to be on top of header images. 
        #menuWrap { 
    	float:right; 
        margin:31px 11px 24px 0; 
        background:url(images/menu-bg.png) repeat; 
        position:relative; z-index:10; 
    }
  7. Set position and background image of header wrapper. 
        #headerWrap { 
    	float:left; 
        height:354px; 
        width:975px; 
        background:url(images/header-bg.png) no-repeat; 
    }
  8. Add padding for the shadow of the header background image. 
        #headerRotator { 
    	margin:9px 11px 12px; 
    }
  9. Position Content Pane for both 2 column and full width skins, and position sidebar and add background color. 
        .content-pane { 
    	clear:both; 
        float:left; 
        width:620px; 
        margin-left:11px; 
    } 
    .side-bar-pane { 
    	float:right; 
        width:262px; 
        margin-right:11px; 
        background-color:#b3b5b8; 
        padding:12px; 
    }
  10. Set gradient background for lower part of the skin for full page width and add padding need for CSS Sticky footer. 
        #middleWrap { 
    	clear:both; 
        width:100%; 
        background:url(images/gradient-bg.jpg) repeat-x; 
        padding:45px 0 65px; 
    }
  11. Center lower content area and set width. 
        #middleInnerWrap { 
    	width:960px; 
        margin:0 auto; 
    }
  12. Position Bottom content panes. 
        .bottom-left-pane { 
    	width:286px; 
        float:left; 
        margin-right:46px; /* padding between left & middle panes */ 
    } 
    .bottom-middle-pane { 
    	width:286px; 
        float:left;
    } 
    .bottom-right-pane { 
    	width:286px; 
        float:right; 
    }
  13. Set gradient background for footer for full page width, height, and margin (used for CSS Sticky footer). 
        #footerWrap {
    	width:100%; 
        clear:both; 
        margin-top: -81px; /* negative value of footer height */ 
        height: 81px; /* sets height of footer */ 
        position:relative; /* forces footer over #middleWrap to access links */ 
        background:url(images/footer-bg.jpg) repeat-x #626d7f; /* sets footer background */ 
    }
  14. Center and set width for footer content. 
        #footerInnerWrap { 
    	width:960px; 
        margin:0 auto; 
    }
  15. Position left and right sides of footer content. 
        #footerLeft {
    	float:left; 
        width:70%; 
        margin-top:27px; 
    } 
    #footerRight { 
    	float:right; 
        width:30%; 
        margin-top:25px; 
        text-align:right; 
        color:#d9d9d9; 
        font-size:11px!important; 
        line-height:20px;
    }

Show Full Layout CSS

View Complete Layout, Content, Blog and DNN overide CSS

I am not going to go into the styles for the rest of the skin, such as the blog, portfolio and menu. This skin does use some advanced techniques, as I was doing it for a competition, but, hopefully, it will be able to shed insight on creating a DNN Skin.

Trackback Print
Tags:
Categories: Skinning
Location: Blogs Parent Separator RalphWilliams.com

4 comment(s) so far...


Gravatar

Re: Create a non-Award Winning DotNetNuke Skin (pt. 3)

Great job explaining your skinning process.
Can you fix this link for us to see:
ralphwilliams.com/portals/1/20100318create-non-award-winning-dnn-skin/skin.css

By Brian Scarbeau on   Friday, March 19, 2010 10:45 AM
Gravatar

Re: Create a non-Award Winning DotNetNuke Skin (pt. 3)

Brian,

Fixed the link. Thanks for the catch!

Ralph

By Ralph Williams on   Friday, March 19, 2010 1:20 PM
Gravatar

Re: Create a non-Award Winning DotNetNuke Skin (pt. 3)

Great post, Ralph. I would like to bestow upon you the prestigious:

'Mucho Bella' DNN skin award for 2009.

I think your next post should be on how to make your blog post content exceed the width of your content area. Scrolling sideways is fun! :P

By Pavlicko on   Friday, May 07, 2010 12:29 PM
Gravatar

Re: Create a non-Award Winning DotNetNuke Skin (pt. 3)

Why thank you, Pavlicko, for the fantastic award!

I guess I do need to get my code snippets working again.

By Ralph Williams on   Saturday, May 08, 2010 12:13 AM

Your name:
Gravatar Preview
Your email:
(Optional) Email used only to show Gravatar.
Your website:
Title:
Comment:
Security Code
CAPTCHA image
Enter the code shown above in the box below
Add Comment   Cancel 

Send me a message.

Name:*
Email Address:*
Message:*
Security Code:
CAPTCHA
Enter the code shown above in the box below
* required Submit   Cancel