Now that we understand how the ASCX files and CSS files relate to each other, it’s time to create our first skin file. Today we are going to deal primarily with the issues of layout.
If you are using one of the Skins that come with DotNetNuke you will see five content areas, called “Panes,” that modules can be added to. Creating these content areas is the main responsiblity of a DotNetNuke skin. These content areas are specified in the skin by using a regular HTML element–DIV and TD are the most common–and specifying the following attributes:
Ideally a content area should disappear from rendering if it has no modules in it. One of the recurring issues with the stock themes is that if you don’t modify them to include visible=”false” you’ll end up with an empty left area if you don’t put anything in the left pane. Easily remedied, but annoying when you have to do this with each upgrade to DNN.
- id = this is the name of the pane. Try to stick with the same names that DotNetNuke uses on the stock themes. If you don’t, all of the modules that are in panes with different names will end up on the ContentPane pane.
- Make sure you have one pane with the id of “ContentPane”
To get a skin with the same layout that DotNetNuke ships with, you will use the following HTML:
<table cellspacing="3" cellpadding="3" width="100%" border="0"> <tr> <td colspan="3" id="TopPane" runat="server" valign="top" align="center" visible="false"> </td> </tr> <tr valign="top"> <td id="LeftPane" runat="server" valign="top" align="center" visible="false"> </td> <td id="ContentPane" runat="server" valign="top" align="center" visible="false"> </td> <td id="RightPane" runat="server" valign="top" align="center" visible="false"> </td> </tr> <tr> <td colspan="3" id="BottomPane" runat="server" valign="top" align="center" visible="false"> </td> </tr> </table>
You might want to throw the following two lines at the top of the file so you can login once this skin has been applied.
<%@ Register TagPrefix="dnn" TagName="LOGIN" Src="~/Admin/Skins/Login.ascx" %> <dnn:LOGIN runat="server" id="dnnLOGIN" />
You can optionally add a ControlPanel id if you want to constrain where the control panel displays for the administrators.
One of the great things about DotNetNuke is that you are not constrained to this layout. You could have 20 different content areas if that made sense. You could place the TopPane and BottomPane inside the LeftPane and RightPane instead of having the LeftPane and RightPane inside the TopPane and BottomPane as they are now. As a designer you have complete freedom in deciding what your skin will look like.
Other post in DotNetNuke - Skinning
- DotNetNuke Skinning - Getting Set Up - June 10th, 2008
- DotNetNuke Skins - Handling CSS Files - June 12th, 2008
- DotNetNuke Skins - Hello, World - June 17th, 2008
- DotNetNuke Skins - Skin Objects - June 19th, 2008
- DotNetNuke Skinning - Dealing with Images - July 3rd, 2008
- DotNetNuke - Avoiding Container Collision - June 11th, 2012
- Infinite DotNetNuke Skin Sets For One Low Price - August 14th, 2012
- DotNetNuke Skins - ASCX vs HTML mode - November 6th, 2012
- DotNetNuke Skinning - Collapsible Containers - January 8th, 2013
- DotNetNuke Skinning - Standard CSS Classes - February 5th, 2013
- DotNetNuke - Skinning - March 12th, 2013
- DotNetNuke Skinning - Containers - December 18th, 2013
- DotNetNuke Skinning - SolPartMenu - January 29th, 2014