Skinning the WebControlCenter

If you have not already, login to the Control Center at https://www.webcontrolcenter.com/customer.aspx and from the menu item CUSTOMER click on SKIN ADMIN.

This Skinning Admin page is used for customizing the look of the Control Center. This document will outline the procedure for applying your own skin. You can upload several skins and test them out. Once you’ve decided on a skin you like, you can make it your default skin by clicking the “Set Current” link. From that point on, the selected skin will be visible by you and all domains under your customer ID.

Creating your first skin
The first step in creating a customized skin is downloading the default skin. You do so by logging in to the Admin area of the Control Center using your customer ID and password. Once logged in navigate to the Skinning Admin page [Customer Admin - Skin Admin]. Here you will see a table with a skin in it named “Default.” Click the download link next to the word “Default” to download a Zip file that contains all of the files you need. Unzip the file to a folder on your computer, and you will see the files you need to begin building your own skin. The unzipped file consists of all images, a style sheet (default.css), and a couple templates (default.htm and popup.htm), all of which can be customized.

Now that you have the skin, you need to make the necessary changes. To change images, simply edit the current image or copy a replacement image file over the image you want to replace. The new images MUST have the same name as the old ones, and should conform to the same sizing as the images you replace.

If you want to modify the html template, you can do so by modifying the default.htm and popup.htm files. Default.htm is the standard template that the control center uses on every page, and popup.htm is the template used for popup windows like the knowledge base. Feel free to change whatever you would like to in these templates, but there are a few rules:

First of all, you will see a few placeholder tags in these template files, and THESE TAGS MUST BE IN YOUR NEW TEMPLATE OR THE CONTROL CENTER WILL NOT FUNCTION PROPERLY. Also, the PAGETITLE and INCLUDES tags must reside between the <head></head> tags in your template, and all others must reside between the <body></body> tags. Tags that start with "[TEXT:" can be implemented. If the Control Center has a translation of the text string that follows, it will be translated, otherwise the text will be displayed as is. Your new templates must have the same filenames as the old ones or the Control Center will not recognize them.

The final part of creating your skin is to modify the stylesheet file (default.css). There are many comments in the file to explain what the various classes do.

NOTE: The printhide style, located in "print.css", is used for the Print Page link within the "Option" control. Anything using this class will be hidden from the printed page, yet still exist on screen.

Deploying your new skin
To deploy your new skin, put all of your files into a zip file, go back to the Skin Admin page, and click the Upload button. Input the requested information, and it will tell you when and how to upload your file. It will then unzip your files and parse the templates. Your skin is now complete.

Please note that only image files, .htm files, and .css files will be unzipped, and after it is parsed, the original zip file you upload will be deleted. In addition, if you leave out any files, the Control Center will plug in the missing file with a copy of the matching file from the default skin. This means that if you only want to replace one image, you can upload a zip file containing only that one image, and your new skin will be identical to the default skin with the exception of the new image you uploaded.

One final note of caution: When trying out a new skin for the first time, click the Test button instead of the Set Current button. The test button only changes your skin for your current session, so it won’t change the way the control center looks for anyone logged in as one of your domains. If you are testing a skin and it makes the Control Center unusable for you, close your browser and log in again. You will then see whatever skin you had before. Once you have decided that you are pleased by the look of your skin, you can make it the default skin for you and all domains under your account by clicking ‘Set Current’ next to the appropriate skin.

Happy skinning!

Add Feedback