Layout Screenshots

Layout Screenshots

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 Preview

Content

<p>Quisque aliquet diam vitae tellus congue auctor. Proin malesuada urna in ipsum faucibus volutpat.</p>

<h1>Praesent</h1>

  • <ul><li>Nulla euismod fringilla odio a commodo.</ul></li>

<p><a class="more" href="#">   read more </a> <p>

News

  • <ul><li>30.09.2009</li></ul>

<p>Praesent consectetur sem et urna scelerisque vel mattis turpis imperdiet. Integer faucibus consequat fringilla. Duis at sapien ac mauris sodales euismod.</p>

<h1>mattis</h1>

Other Containers

  • Content with image on the left

    This Container is used to wrap a Content form with the picture on the left of it on the main page

  • Contact Us Form

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

  • Contact Info Grey Back

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

  • CS Contact Info

    Another container for wrapping a contact information on the contact page.

  • No Title

    A Container without a title.

  • Navigation

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

  • Banner

    Container should be applied to the Flash Banner module.