Layout Previews

Layout Previews

How do I add new skins and containers?

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

  1. Duplicate index.ascx skin file in Skins folder. Rename the copy to, lets say, index-copy.ascx.
  2. Duplicate index.css and name the copy index-copy.css
  3. 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

  1. Duplicate default.ascx container file in Containers folder. Rename the copy to, lets say, default-copy.ascx.
  2. 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

  1. Open index.ascx file. First few lines of code with <%@... should not be modified. Please work on tags and HTML below them.
  2. 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.
  3. Make sure you didn't put one content pane into another. Save the file, now you got a new content pane.
Containers

Containers

  • Blue/Green/Orange Background Container

    Container with Blue/Green/Orange background. In this demo the container is used on the home page to wrap "The Courses" box.

  • Blue/Green/Orange Header Container With Bookmark

    Standard content wrapper with a “bookmark” icon and Blue/Green/Orange title. In this demo the container is used on the home page to wrap a "Welcome" box.

  • Contact Info Container

    Content wrapper. Used on the “Contact us” page, wraps contact information in the right content pane.

  • Contact Us Container

    Contact form wrapper. This container fixes css problems standard DNN feedback module has.

  • Default Blue/Green/Orange Header Container

    Standard content wrapper. Blue/Green/Orange title. In this demo the container is used on the “Prices” page to wrap main content box.

  • FishEye Container

    FishEye menu wrapper. In this demo the container is used at the right top corner of the main page.

  • Flower List Blue/Green/Orange Container

    Container with Blue/Green/Orange background and a flower on it. In this demo the container is used on the home page to wrap "The Courses" box.

  • Gallery Container

    Quick Gallery module wrapper. Adds border and spacing for gallery items. Used on the home page for the pictures gallery.

  • Menu Container

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