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.