Mar
11
Written by:
Ralph Williams
Thursday, March 11, 2010 11:38 PM
Continued from Part 1 – Slicing the Design.
Setting up the HTML for my skin.
Because of some of the design elements that the annoying designer (me) had in the design, there is a small bit of complexity to it.
There are a few things at work here.
- the content area needs to be centered on the page, which means it needs to be wrapped in a div that is centered.
- To center a div, you must set a specified width and set the left and right margins to auto. (ex. margin:0 auto; shorthand for margin-top:0px; margin-right:auto; margin-bottom:0px; margin-left:auto;)
- the gradient spans the full width of the page in the lower content area that holds the bottom three content panes.
- The footer does the same thing.
- I want the footer to always be at the bottom of the browser.
- I want to use as little code and nesting of divs as possible.
- It needs to act the same across all browsers.
Stick Footer to bottom of page
The first thing that I did was to set it up for the footer to "stick" to the bottom of the browser. To be honest, this was/is one of the most challenging things about doing your layout tableless. I typically use the New CSS Sticky Footer Layout method.
- A div [#topWrap] which will hold everything but the footer.
- The footer div [#footerWrap]. The footer background will be applied to this div.
Center Content
Next, I need to take care of the centering of the content.
- A div [#contentWrap] within the #topWrap div. This will contain the logo, menu, header, main content pane and sidebar. In the CSS, a width will be specified and then centered.
- A div [#middleWrap] also within the #topWrap div. It will contain a div that centers the three lower content panes. In the CSS, this will be givin 100% width and will apply the gradient in the lower content area.
- A div [#middleInnerWrap] that will contain the three lower content panes. In the CSS, this will be given a certain width and centered as the #contentWrap div was.
- The div [#footerInnerWrap] will contain and center the footer content.
Logo, Menu, Header, and top content panes
Next, I will begin adding the logo, menu, contentpane and sidebars into the #contentWrap div. I will discuss the positioning, when I cover the CSS.
Note: I add a class to anything that will a contentpane. I do this because DotNetNuke will automatically add a "dnn_" in front of whatever ID your content pane has. So, in this case, "contentPane" will become "dnn_contentPane".
Lower Content Panes and Footer
I then add the content pane for the middle containers within the #middleInnerWrap. Again, I will cover more about the positioning with the CSS.
bottom left pane
bottom middle pane
bottom right pane
Next, I add the footer content within the #footerInnerWrap
Convert to .ascx file
At this point, all of the HTML is done, and I just need to set it up to be a DNN .ascx file.
- Add all of the registrations.
- Add in my style objects for IE 6 and 7,
- add in all of the DotNetNuke attributes that I will be using.
It will look like this once those changes have been made.
Show Full HTML
<%@ Control language="vb" CodeBehind="~/admin/Skins/skin.vb" AutoEventWireup="false" Explicit="True" Inherits="DotNetNuke.UI.Skins.Skin" %>
<%@ Register TagPrefix="dnn" TagName="LOGO" Src="~/Admin/Skins/Logo.ascx" %>
<%@ Register TagPrefix="dnn" TagName="LOGIN" Src="~/Admin/Skins/Login.ascx" %>
<%@ Register TagPrefix="dnn" TagName="COPYRIGHT" Src="~/Admin/Skins/Copyright.ascx" %>
<%@ Register TagPrefix="dnn" TagName="USER" Src="~/Admin/Skins/User.ascx" %>
<%@ Register TagPrefix="dnn" TagName="LINKS" Src="~/Admin/Skins/Links.ascx" %>
<%@ Register TagPrefix="dnn" TagName="NAV" Src="~/Admin/Skins/nav.ascx" %>
<%@ Register TagPrefix="dnn" Namespace="DotNetNuke.UI.Skins" Assembly="DotNetNuke" %>
<%@ Register TagPrefix="dnn" TagName="STYLES" Src="~/Admin/Skins/Styles.ascx" %>
Other resources to help
In the next post, I cover the CSS that positions all of what we have done here.