Contact

DotNetNuke Tips for Skinning, CSS, and Design

Ralph Williams Blog

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

Mar 12

Written by:
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.

Tags:
Categories: Skinning

21 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

Loan in singapore

DotNetNuke Tips for Skinning, CSS, and Design - Create a non-Award Winning DotNetNuke Skin (pt. 3)
# Loan in singapore

By TrackBack on   Wednesday, November 21, 2012 11:48 AM

senseo pas cher

nice homepage
# senseo pas cher

By TrackBack on   Tuesday, March 19, 2013 7:05 AM

aspirateur pas cher

nice homepage
# aspirateur pas cher

By TrackBack on   Wednesday, March 20, 2013 6:57 PM

ted's woodworking plan

awesome site
# ted's woodworking plan

By TrackBack on   Wednesday, March 27, 2013 11:13 PM

the tao of badass

nice homepage
# the tao of badass

By TrackBack on   Wednesday, April 03, 2013 11:24 PM

personal loan quotes

DotNetNuke Tips for Skinning, CSS, and Design - Create a non-Award Winning DotNetNuke Skin (pt. 3)
# personal loan quotes

By TrackBack on   Monday, April 08, 2013 1:12 PM

cheap louis vuitton handbags for sale free shipping

While we may not know how LV produces these canvases, the website says that it is hardy bags which you can lightly wipe to remove any trace of dirt.
# cheap louis vuitton handbags for sale free shipping

By TrackBack on   Tuesday, April 16, 2013 2:42 AM

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

that bag is beautiful and so lux but yes it does smuge so just have to be alittle careful when carrying it.Hello all, I just bought the AQUARELLE WATERCOLOR bag in April,I had been on a waiting list since January, heard the release date was May 1st. Cost around $3750.00 Love this bag!!!
# louis vuitton bags outle

By TrackBack on   Tuesday, April 16, 2013 2:42 AM

authentic louis vuitton bags outlet online

I bought one from Neiman's in Dallas this past summer, love it of course. But then went to Austria last month and saw it in the LV store there.
# authentic louis vuitton bags outlet online

By TrackBack on   Tuesday, April 16, 2013 2:43 AM

louis vuitton bags outlet for women

they propperly they might of smugde it! if i was a judge to CHOSES THE MOST BEAUTIFUL AND FASHINOL I WOULD GIVE THE RANTING:0 OUT OF 10 THEY SMUDGE SO MUCH INTO THE BAG.
# louis vuitton bags outlet for women

By TrackBack on   Tuesday, April 16, 2013 2:43 AM

cheap louis vuitton bags online free shipping

I picked mine up yesterday and it is the most gorgeous Louis Vuitton bag I've ever seen. You really have to see it in person to see how beautiful the colors are. My daughter, who doesn't have the same love for purses that I have, even gasped when my SA brought it. And she's 19 and she loved it too!!!!!!
# cheap louis vuitton bags online free shipping

By TrackBack on   Tuesday, April 16, 2013 2:43 AM

baidu censor

Other countries censor content and not just rogue regimes such as the Iranian mullocracy. Poor people! http://www.baidu.com
# baidu censor

By TrackBack on   Sunday, April 21, 2013 10:52 AM

クリスチャンルブタン

DotNetNuke Tips for Skinning, CSS, and Design - Create a non-Award Winning DotNetNuke Skin (pt. 3)
# クリスチャンルブタン

By TrackBack on   Monday, April 22, 2013 4:00 AM

authentic retro jordans

Pistole's letter did not say whether or when he might reconsider lifting the knife ban. Still, he defended easing the ban, saying the bombings at the Boston Marathon underscore the need for TSA to focus on more serious threats such as explosives.
# authentic retro jordans

By TrackBack on   Wednesday, April 24, 2013 12:54 PM

louis vuitton handbags outlet

Opponents of allowing knives on planes attributed Pistole's reversal to "a huge backlash" from flight attendants, airline executives and lawmakers.
# louis vuitton handbags outlet

By TrackBack on   Wednesday, April 24, 2013 12:55 PM

louis vuitton bags us

Pistole's letter did not say whether or when he might reconsider lifting the knife ban. Still, he defended easing the ban, saying the bombings at the Boston Marathon underscore the need for TSA to focus on more serious threats such as explosives.
# louis vuitton bags us

By TrackBack on   Wednesday, April 24, 2013 12:55 PM

baidu censor

Some countries censor Internet content and not just rogue regimes such as the Iranian mullocracy. Poor people! http://www.baidu.com
# baidu censor

By TrackBack on   Saturday, April 27, 2013 4:33 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