Containers

"Blue List" container
Container with blue link list. In this demo the container is used on the home page to wrap a "Modules used" box.
"Common Paragraph" container
Standard content wrapper with gray big title
"Default Container Big Header" container
Standard content wrapper with icon and red title. On this demo used as Install guide and Layout preview wrapper.
"Default Container Medium Header" container
Standard content wrapper with gray medium title.
"Default Container Small Header" container
Standard content wrapper with gray small title.
"Gallery" container
Quick Gallery module wrapper. Adds border and spacing for gallery items. Used on the home page for pictures gallery.
"Feedback" container
Contact form wrapper. This container fixes css problems standard dnn feedback module has..
"Grey Round Container With Arrow" container
Container with grey background, round corners and arrow at the top left corner. In this demo the container is used on the home page to wrap testimonials under the banner.
"Menu" container
Container for navigation menu. Should be applied to Menu Box module.
"NoHeader" container
Plain container without title. In this demo the container is used to wrap flash banner.
"Stripped" container
Container with stripped background. In this demo the container is used on the home page to wrap a “skin features” box.
"Twitter" container
Container for Twitter. Should be applied to Twitter module used with this skin.

Skin Layout

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.