Skin Layout

Other DotNetNuke Skins and DNN Modules by Coding Staff.

How do I add new skins and containers?

All Coding Staff skins are CSS based; therefore, it easy to modify them. All you need to know is just basics of CSS and HTML. So, how do you get started?

Depending on where skin was installed (host or portal), its sources location will be root/Portalsl/_default/Skins or root/Portals/PortalID_or_Name/Skins. You should be able to find the skin in one of those folders. Same  with containers, you will find them in root/Portalsl/_default/Skins or root/Portals/PortalID_or_Name/Containers or in root/Portalsl/_default/Containers.

Before you go any further, we would highly recommend installing Firebug. Firebug is an extensions for Firefox browser that will make it much easier to understand what styles and tags are affecting your skin.

Here are few tips on how you can do some simple skin modifications.

Adding one more skin that looks similar to index page skin

  • Duplicate index.ascx skin file in Skins folder. Rename the copy to, lets say, index-copy.ascx.
  • Duplicate index.css and name the copy index-copy.css
  • Duplicate index.doctype.xml and name the copy index-copy.doctype.xml

... done, now you got index-copy skin which you can modify in any way.

Adding one more container that looks similar to default container

  • Duplicate default.ascx container file in Containers folder. Rename the copy to, lets say, default-copy.ascx.
  • Duplicate default.css and name the copy default-copy.css

... done, now you got default-copy container which you can modify in any way.

Adding one more content pane to index page skin

  • Open index.ascx file. First few lines of code with <%@... should not be modified. Please work on tags and HTML below them.
  • Existing content panes have runat="server" attribute. Add a wrapper for your content pane in location you need it to be. Assign a class name and id to the wrapper. Id is going to be used as a name of your content pane. Add runat="server" attribute to the wrapper.
  • Make sure you didn't put one content pane into another. Save the file, now you got a new content pane.

Containers Preview

BigTitleGrey

<p>Donec fermentum sapien nunc. Quisque luctus, dolor et viverra euismod, lorem odio convallis sapien, eget euismod tellus felis vitae diam.</p>

<h1>Nam</h1>

<p>aliquet hendrerit nisi eu egestas.</p>

 

Content

<p>Donec fermentum sapien nunc. Quisque luctus, dolor et viverra euismod.</p> <hr/>

<h1>Lorem</h1>

<p>odio convallis sapien, eget euismod tellus felis vitae diam. Nam aliquet hendrerit nisi eu egestas.</p>

News

  • <ul><li><h3><strong>Done </strong>fermentum sapien nunc.</h3>

    Quisque luctus, dolor et viverra euismod.</li></ul>

ContentInBox

  • <ul><li><h3>Donec fermentum sapien nunc.</h3>

    <p>Quisque luctus, dolor et viverra euismod, lorem odio convallis sapien, eget euismod tellus felis vitae diam.</p></li></ul>

Other Containers

  • Contact Us Form

    This Container is used to wrap a contact form on the contact page.

  • CS Contact Info

    This Container is used to wrap contact information on the contact page.

  • Feed Back On the Main Page

    This Container is used to wrap a contact form with a colorful "send" button on the main page.

  • Footer Copy Rights

    This Container is used to wrap Copy Rights on the Footer Left Pane on every page of the demo site.

  • No Title

    A Container without a title.

  • Page Name

    This container is used on the Inner Skin pages at the top left corner.

  • Page Quote

    This container is used on the Inner Skin pages, after Page Name container.

  • Title Light Grey

    This Container is used to wrap a Links form on the home page.

  • Top Menu

    Container is for the navigation menu. Should be applied to the Menu Box module.

Other DotNetNuke Skins and DNN Modules by Coding Staff.