My DotNetNuke ramblings

SchwingSkin 1.0 released

host posted on July 16, 2010 05:32

What is SchwingSkin

SchwingSkin is a grid framework based on DNNGrid960. But this time we extended this a little by defining predefined grid structures with SkinObjects, ContentPanes and other DotNetNuke items already in place and all you need to style it is a "Themelet" (CSS/Images/JS combo)

what does a base skin look like.

A base skin consists of a nr of SkinObjects and ContentPanes all enclosed in a grid structure.

The base skin is a 3 column skinwith a header and footer and looks as follows:

<Schwing:UNLOADCSS FileNames="portal.css,default.css,superfish.css" runat="server" />
<schwing:COMMENT runat="server" ID="StylesIE" Name="IE" file="themelets/base/ie.css" Condition="IE" UseSkinPath="true" />
<Schwing:STYLE DefaultCSS="base.css" CSSPath="themelets/" ID="STYLE1" runat="server" />
<div class="dnngridcontainer_16">
    <div id="Top">
        <div class="dnngrid_4">
            <div id="Logo">
                <dnn:LOGO runat="server" />
            </div>
        </div>
        
        <div class="dnngrid_8">
            <div id="PageTitle">
                <Schwing:TITLE TagFormat="<h1>{0}</h1>" runat="server" />
            </div>
        </div>
        
        <div class="dnngrid_4">
            <div id="Login">
                <ul class="horizontal">
                    <li>
                        <dnn:LOGIN runat="server" />
                    </li>
                    <li>
                        <dnn:USER runat="server" />
                    </li>
                </ul>
            </div>
        </div>
        
        <div class="clear">
             </div>
    </div>
    <div id="Nav">
        <div class="dnngrid_16">
            <div id="Menu">
                <ddr:MENU ID="MENU1" MenuStyle="themelets/base/Superfish" runat="server" />
                <div class="clear">
                     </div>
            </div>
        </div>
        
        <div class="clear">
             </div>
    </div>
    <div id="Crumb">
        <div class="dnngrid_16">
            <div id="Crumble">
                <Schwing:BREADCRUMB ID="BREADCRUMB1" runat="server" RootLevel="0" UseTemplate="true"
                    CrumbTemplate="<ul class='horizontal'><li><b>You are here : </b></li>{0}{1}</ul>"
                    HomeTemplate="" ItemTemplate="<li><a href='{0}'>{1}</a><span class='divider'> >> </span></li>"
                    ActiveItemTemplate="<li><span>{0}</span></li>" />
            </div>
        </div>
        
        <div class="clear">
             </div>
    </div>
    <div id="Content">
        <div class="dnngrid_4">
            <div id="LeftPanel">
                <div id="LeftPane" runat="server" />
            </div>
        </div>
        
        <div class="dnngrid_8">
            <div id="ContentPanel">
                <div id="ContentPane" runat="server" />
            </div>
        </div>
        
        <div class="dnngrid_4">
            <div id="RightPanel">
                <div id="RightPane" runat="server" />
            </div>
        </div>
        
        <div class="clear">
             </div>
    </div>
    <div id="Footer">
        <div class="dnngrid_8">
            <div id="Terms">
                <ul class="horizontal">
                    <li>
                        <dnn:PRIVACY runat="server" />
                    </li>
                    <li>
                        <dnn:TERMS runat="server" />
                    </li>
                </ul>
            </div>
        </div>
        
        <div class="dnngrid_8">
            <div id="CopyRight">
                <dnn:COPYRIGHT runat="server" />
            </div>
        </div>
        
        <div class="clear">
             </div>
    </div>
</div>

Hey some of those SkinObjects are new to me

This is correct because I like more control over what is outputted in my content I have developed a nr of templateable skinobjects which are also included in the skin package. The most omportant one ofcourse is the Schwing:Style skinobject. THere you define which themelet you want to use and if you pass the skinstyle in the querystring it will load that one too.

Containers

In the initial release there is also a base container included that is styleable to pretty much anything you want ( but more will be released ). This one looks like:

<div class="cnt">
<ddr:ACTIONS runat="server" MenuStyle="actions"/>
    <div class="header">
        <Schwing:TITLE ID="TITLE1" TagFormat="<h3>{0}</h3>" runat="server" />
    </div>
    <div class="inner">
        <div id="ContentPane" runat="server" />
    </div>
</div>

With this base structure its very easy to design a whole nr of container variations as you can see from the examples.

Menu and ActionMenu

Because I like full control over anything for the Menu and ActionMenu we are using DDRMenu from DNNGarden to give us ultimate freedom in styling the menu as we like.

The CSS

The skin.css is just there to define the grid structure and in theory should be left alone because all styling should be done in the themelet.css

skin.css

@import url("css/reset.css");
@import url("css/text.css");
@import url("css/960_16_10_10.css");

The skin.css imnports 3 other css files to reset html to default values do something with text and define the base grid structure.

base.css

@import url("base/themelet.css");
@import url("base/superfish/menu.css");

the initial themelet css imports the actual css file for the themlet as well as the styling for the menu. This way it easy to change the whole themelt at once bey reloading just one css file.

The future

I will build upon this one some more with more base skin files, differnt grid setups and base skins for more advanced layouts. Feel free to send me your themelets to be included in future releases. The next update will be a html setup to locally develop your designs and then copy over to DotNetNuke.

Download

All files can be downloaded from SchwingSkin site.