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.
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
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
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.
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
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
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