DotNetNuke Tips for Skinning, CSS, and Design

Written by: Ralph Williams
Wednesday, February 17, 2010 1:08 AM 

Recently we started a new DNN User Group in Tampa, the DotNetNuke Tampa UG, and at our first meeting we discussed what topics we should talk about. One that sort of surprised me was the topic of skinning in DNN. I guess that I have started to take for granted what I have learned in the past few years. But as I looked back, I realized that it has been a rough long road to where I am today.

When I first started at my job, I had not heard of DotNetNuke. So, I had to learn all of the basics of skinning and how to add that to what I already knew about making a website, which wasn’t much. Right about the time that I started to get the hang of it, I realized that I could produce better sites by skinning without the use of tables. So, just make the switch from using rows and columns to boxes. Simple, right? No way! I struggled and struggled and struggled and finally gave up. Shortly after giving up, we hired an Internet Marketing manager and the first thing he told me was, “Those tables have gotta go!” Needless to say, that friendship was off to a rocky start!

So, why did I have to change? Well, I shortly became educated that search engines put higher weight on information that is at the top of the page. I started looking at my code and saw that my actual content was not at the top of the page, but was quite a ways down. Not only that, now that I have embraced the tabless skinning, I feel that I have much more flexibility and it’s much easier to tweak. I decided that it was time to bite the bullet and make the change. There were a few things that really seemed to hold me up as I went down this new road of tabless skinning.

DOCTYPE

Setting my skin up with the XHTML 1.0 Transitional doctype was my first big roadblock. I didn’t realize that the browsers needed to be told that I was going to be skinning with divs and css. Applying this setting in DotNetNuke wasn’t as easy pre-DNN v4.4. I finally found a fix by John Mitchell on his “Mostly DotNetNuke” blog. This just used a script to inject the doctype (see his script here). Cathal Connolly also came up with a fix that would work in versions 4.4+. This was to add an XML for each skin to your skin folder that would set the doctype as you specified. (see the details here). This has been the accepted way to accomplish setting your doctype correctly. However, with DNN 5.x, you now have the ability to set the default doctype in the host settings. All I have to say about that is, “THANK YOU!”

Typically, you will want to set your doctype to XHTML 1.0 Transitional or XHTML 1.0 Strict. I tend to go with the Transitional setting as it is a bit more forgiving. You can read more about doctype here.

Columns with Divs

The next challenge to overcome was working with divs. Getting a grasp on divs was not an easy task. I had been so used to just creating a table and adding the necessary columns to create my layout. For some reason, the idea of floating a box didn’t seem to work as easily as I had expected it to. Explaining divs and floats could take up a whole blog series, so I won’t go deep into it. I will just hit the high points.

To create a layout by using divs and css, you first need to realize the difference between divs and tables. One of the biggest differences in my opinion is, using divs to create multiple columns with more divs below. Divs will not automatically grow to the same height as the div next to it. For example, lets say that we are going to create the layout to the right.

With a table, you would use the following code:

	
 
        
Header
 
    
 
    
 
        
Menu
 
    
 
    
 
        
LeftPane
 
        
ContentPane
 
        
RightPane
 
    
 
    
 
        
LowerLeft
 
        
LowerRight
 
    
 
    
 
        
Footer
 
    

With divs, you will use the following code: (note the simplicity)

Header
Menu
LeftPane
ContentPane
RightPane
LowerLeft
LowerRight
Footer

Next, we will begin arranging our divs. The first 2 will have a 100% width, the next 3 will have 33% width, the next 2 with 50% widths, with the last 1 having a 100% width. Specifying a width while skinning with floating divs is extremely important. Next we want to float the 3 top content panes to the left, this means that each div’s left side will “float” against the immediate right side of the previous div.

Remember that a key difference while working with divs, is that they don’t automatically grow in height. If you content panes have content of varying height, and you were to just leave your LowerLeft and LowerRight panes floating left, they would start stacking up under the first div it would fit under. You could end up with something like the image to the right.

So, what we need to do is to clear the float. There are a few options when clearing a float. The first, and most typical, is to clear both the left and right floats. I often clear both just in case you had decided to right float the RightPane. Clearing the float will force it to drop below any divs that have been floated in the direction you specified. If you clear the right float, then it will drop below only divs that have been floated right. If you clear the left floats, then it will drop below only divs that have been floated left. In this scenario, I would use the following CSS for my layout.

#headerWrap { width:100%;} 
#MenuWrap { width:100%;} 
#LeftPane { float:left; width:33%;} 
#ContentPane { float:left; width:34%;} 
#RightPane { float:left; width:33%;} 
#LowerLeftPane { clear:both; float:left; width:50%;} 
#LowerRightPane { float:left; width:50%;} 
#footerWrap { clear:both; width:100%;
}

That wraps up this post. I will continue with this series discussing how to approach the slicing of your design with CSS skinning in mind. Stay tuned!

Trackback Print

Tags:

Categories: Skinning

Location: Blogs RalphWilliams.com

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