For starters, create a new directory for your skin in your DNN development environment, e.g. C:\inetpub\wwwroot\DNN48\Portals\_default\Skins\MySkin. Then, using the editor of your choice, create a new skin file called, say, HorizontalMenu.ascx with the following code:
<%@ Register TagPrefix="dnn" TagName="LOGO" Srce="~/Admin/Skins/Logo.ascx" %>
<%@ Register TagPrefix="dnn" TagName="SOLPARTMENU" Srce="~/Admin/Skins/SolPartMenu.ascx" %>
<%@ Register TagPrefix="dnn" TagName="SEARCH" Srce="~/Admin/Skins/Search.ascx" %>
<%@ Register TagPrefix="dnn" TagName="LANGUAGE" Srce="~/Admin/Skins/Language.ascx" %>
<%@ Register TagPrefix="dnn" TagName="CURRENTDATE" Srce="~/Admin/Skins/CurrentDate.ascx" %>
<%@ Register TagPrefix="dnn" TagName="BREADCRUMB" Srce="~/Admin/Skins/BreadCrumb.ascx" %>
<%@ Register TagPrefix="dnn" TagName="USER" Srce="~/Admin/Skins/User.ascx" %>
<%@ Register TagPrefix="dnn" TagName="LOGIN" Srce="~/Admin/Skins/Login.ascx" %>
<%@ Register TagPrefix="dnn" TagName="COPYRIGHT" Srce="~/Admin/Skins/Copyright.ascx" %>
<%@ Register TagPrefix="dnn" TagName="TERMS" Srce="~/Admin/Skins/Terms.ascx" %>
<%@ Register TagPrefix="dnn" TagName="PRIVACY" Srce="~/Admin/Skins/Privacy.ascx" %>
<table cellspacing="3" cellpadding="3" width="100%" border="0">
<tr>
<td class="toppane" colspan="3" id="TopPane" runat="server" valign="top" align="center">
<td>
<tr>
<tr valign="top">
<td class="leftpane" id="LeftPane" runat="server" valign="top" align="center">
<td>
<td class="contentpane" id="ContentPane" runat="server" valign="top" align="center">
<td>
<td class="rightpane" id="RightPane" runat="server" valign="top" align="center">
<td>
<tr>
<tr>
<td class="bottompane" colspan="3" id="BottomPane" runat="server" valign="top" align="center">
<td>
<tr>
<table>
Note: Through some peculiarity of the editor I'm using, the article gets messed up if I leave the src atribute in the tag registration intact. If you want to copy and paste the above source code, please do a search and replace of srce->src. Thank you.
OK, the absolute minimum would be just a content pane, but that would be just plain silly, wouldn’t it? Might as well do a standard pane layout. Log on with admin or host privileges and change the skin of your site via the Admin->Site Settings page.
(Holds up hand in a stage whisper:) it’s the portal skin setting in the appearance section...
I’d suggest you create a blank page so you can see the skin without distractions at this point. This is what it should look like:
Note that the control panel has made an appearance without being invited. Never mind. We’ll fix that now. Other things you’ll need is a menu (so you’ll know where you’re going) and a way of logging in. So add the following lines above the table code:
<div id="ControlPanel" runat="server" valign="top" align="center"><div>
<dnn:USER runat="server" ID="dnnUSER" /> <dnn:LOGIN runat="server" ID="dnnLOGIN" />
<dnn:SOLPARTMENU runat="server" ID="dnnSOLPARTMENU" />
Now you’ve got the control panel at the top of the page, then the user information and login buttons, then the menu and finally the content panes. Refresh your browser window and your skin should look like this:
The word "Urgh" springs readily to mind. Still, you’ve got some things in the Solpartmenu that you need to be aware of. Although you added the Solpartmenu with a minimal configuration (all you specified were the Id and runat properties), you’ve got things happening. Mouseover effects. Breadcrumb arrows. Child indicators. Icons (if you look at the admin or host dropdowns). All added by default, which means you’ll need to figure out how to switch them off if you don’t want them. Swell. We’ll do that a bit later. First we really should get rid of the "Urgh" factor.
First, add another file called skin.css to your skin folder. And, yes, it must be called skin.css, unlike your .ascx skin files, which can have any name you want. Add the following styles to your skin.css file:
body
{
background-color: Green;
}
.controlpanel
{
width: 100%;
background-color: Yellow;
border-style: none;
}
.skinmaster
{
width: 90%;
height: 100%;
background-color: White;
}
OK, what have we done here? First of all we’ve set the background colour of the page to green (or whatever you like). Then we’ve applied a style to the control panel (I hate that black border, so it's gone bye-bye) and finally, we’ve prepared a class that will (eventually) wrap all our content into something that’s always 90% the width of the page, thereby leaving nice margins left and right. Only not quite yet. You’ll see.
In order to use this new style, wrap the current content into a div tag, like this (and don’t forget to apply the class attribute to the div that holds the control panel!)
<div class="skinmaster">
<div id="ControlPanel" runat="server" class="controlpanel" valign="top" align="center"></div>
<dnn:USER runat="server" ID="dnnUSER" /> <dnn:LOGIN runat="server" ID="dnnLOGIN" />
<dnn:SOLPARTMENU runat="server" ID="dnnSOLPARTMENU" />
<table cellspacing="3" cellpadding="3" width="100%" border="0">
<tr>
<td class="toppane" colspan="3" id="TopPane" runat="server" valign="top" align="center">
</td>
</tr>
<tr valign="top">
<td class="leftpane" id="LeftPane" runat="server" valign="top" align="center">
</td>
<td class="contentpane" id="ContentPane" runat="server" valign="top" align="center">
</td>
<td class="rightpane" id="RightPane" runat="server" valign="top" align="center">
</td>
</tr>
<tr>
<td class="bottompane" colspan="3" id="BottomPane" runat="server" valign="top" align="center">
</td>
</tr>
</table>
</div>
Now the site looks as follows:
Yes, it's now even more on the "Urgh" side. I promise you that we will not keep those colours, but for now they're useful to see where each design element is. Anyway. Margins. You'd think that's easy, right? Add a text-align:center to the body tag, right? OK, let's do that...
body
{
background-color: Green;
text-align: center;
}
...and look at the site...
...and look at the site in FireFox...
Bummer.
Fortunately there's an easy way around this. Amend your .skinmaster style as follows:
.skinmaster
{
width: 90%;
height: 100%;
background-color: White;
text-align: left;
margin-left: auto;
margin-right: auto;
}
Now your site should be nice and centered in FireFox and Chrome, too.
Well, that's very nearly it for part one. The only thing remaining is to place the USER and LOGIN controls (unless you like them in the top left hand corner. In that case, well done, you're finished, go grab a coffee.) If you want your login controls aligned to the right, wrap the two controls inside a div tag, like so:
<div class="loginpanel">
<dnn:USER runat="server" ID="dnnUSER" /> <dnn:LOGIN runat="server" ID="dnnLOGIN" />
</div>
...and add the new style to your stylesheet:
.loginpanel
{
text-align: right;
padding-right: 20px;
}
The right padding prevents the text from going right up to the right hand border of your central container. If your background is the same throughout your site (like www.creativecats.com), you won't need to do this, of course...
And there you are. Now go and set the colours, padding and margins in your stylesheet the way you want them. Oh, and one final word of caution: IE8, at least, does not hide the control panel completely! Right now, if you log out, you'll still see a yellow block right across the top. So make sure that you're setting the background colour of the control panel either to transparent or to the same colour as the main content area.
Next: Skinning the Solpart Menu.