Hi Jens

It is quite easy to do, and I have several very similar skin files (ascx) so modules and layout can very a little between pages.

For example in a Table layout just layout the table as you would anyway and use 'class="contentpane" id="ContentPane" runat="server"' where you would like the panes (renaming them of course). Class is needed as DNN/.NET will give them unique IDs so this way you can control the styling.

Just set the table width, height, rows, columns, cells etc just as you normally would but with the pane details included.

Table Example

<TABLE cellspacing="3" cellpadding="3" width="100%" border="0">
  <TR>
    <TD class="toppane" colspan="3" height="18" 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>

CSS layouts can just use DIV tags for this.

CSS Layout Example

<div  class="content1pane" id="Content1Pane" runat="server"></div>
<div  class="content2pane" id="Content2Pane" runat="server"></div>

So... as I use YUI Tabs... all I need in a skin ascx file (apart from importing/referencing the js and css) for this is:

<div class="yui-skin-sam"><span class="yuibutton"></span>
<script type="text/javascript">
var myTabs = new YAHOO.widget.TabView("TabDisplay");
</script>

<div id="TabDisplay" class="yui-navset">
    <ul class="yui-nav">
        <li class="selected"><a href="#tab1"><em>Tab 1 Title</em></a></li>
        <li><a href="#tab2"><em>Tab 2 Title</em></a></li>
    </ul>           
    <div class="yui-content">
        <div><div  class="contentpane" id="Tab1Pane" runat="server"></div></div>
        <div><div  class="contentpane" id="Tab2Pane" runat="server"></div></div>
    </div>
</div>
</div>

So if you have your general skin, it becomes easy to duplicate this and modify for any pages that require a different layout for modules.

Does that help?

Ok... I understand what you are meaning (I hope).

To switch, is to use a completely separate skin file.  So your skin.html (I use the .ascx files myself... so you may need to look for this which is much like an html file)... is easiest to be duplicated - so you have SkinWideLeft.ascx (.html) and SkinWideRight.ascx.   Then each of these is adjusted slightly for the different look.

If using just CSS for the layout, you may be best to do something like:

<div id="content1pane" class="WidePane" runat="server"></div>
<div id="content2pane" class="NarrowPane" runat="server"></div>

for the  |........|...|  and

<div id="content1pane" class="NarrowPane" runat="server"></div>
<div id="content2pane" class="WidePane" runat="server"></div>

for the  |...|........|

In the DNN Page you would choose which skin to apply.  Doing it this way it runs on a single CSS file - skin.css... or the skin folder can be duplicated and renamed for a different skin.css to be used if you really do want/need a separate skin.css to be used.

Does that make sense for you?