Branding the control panels
Quick-start tutorial: Home 1 2 3
You can customize the look and feel of your users' control panels to suit your preferences or to match your company's branding. This look and feel includes the logo, banner, colors, graphics, and styles used in your users' control panels. You can reload the default settings at any time if necessary.
You can brand your customers' control panels only; you cannot brand your top-level control panel (the site control panel that is your primary login).
What you can change
Banners and logos
Colors and graphics
Padding, spacing, and font sizing
The URL of the control panel
What you cannot change
Your top-level control panel
The title of the page displayed in the browser window
The positioning of elements on a page
To change the colors, text, and general look and feel of control panels, follow these instructions:
Go to the branding files page.
If this is the first time the style sheet has being changed, click Download Current by the style sheet. If the style sheet has been modified before, click restore default, then click Download Current.
Save this style sheet to your local system, then open the style sheet using your favorite editor.
Notice that the style sheet is empty except for a comment containing a URL. This URL points to the base style sheet for the system. Style sheets you modify and upload are loaded after the base style sheet; they override the base style sheet’s styles.
Open a browser and download the base style sheet:
In the browser's Address bar type the URL contained in the comment of the style sheet you just downloaded. Make sure to replace <CP SERVER> with the domain name of your server.
Click Go. The base style sheet is displayed.
Save the base style sheet so you can refer to it later if necessary.
Using your favorite editor, open the base style sheet, copy the styles you want to override, and paste those styles into a new style sheet.
To determine which styles you want to override, you can save a page from the control panel to use as a source for finding page elements and associated CSS class names.
To do this, go to a page in the control panel and click Save As from the browser's File menu. This saves a page, such as ISP_Admin.htm, to your local machine. It also saves a folder, such as ISP_Admin_files, with any images or style sheets used to display the page.
The saved page is rewritten by Internet Explorer when it is saved so that all image and style sheet references point to the files in this new folder. You can open the file in Dreamweaver (or the text or HTML editor of you choice) to determine which styles you want to override.
Learn more about modifying the style sheet
Any styles you add to the new style sheet take precedence over styles in the base style sheet, so copy only those styles you want to override.
In your new style sheet, change the styles you copied from the base style sheet as needed.
The base style sheet uses relative-path URL references to images in some styles. If you copied any of these styles to your new style sheet, you need to change them so that the references will be correct when you upload the new style sheet.
For example, the base style sheet uses the following two relative path image references in the style sheet:
background-image: url(images/menubar.gif)
background-image: url(../../images/button_logout.gif);
These references are relative to c:\program files\ensim\webppliance\common\css\styles\blue which is the folder where the base style sheet is stored. Customized style sheets are stored in a different folder, namely, c:\program files\ensim\webppliance\brandingfiles.
For images to display correctly, change the relative path URLs in modified styles as follows:
For images specified as url(images/), change the URL to ../common/css/styles/blue/images/
For images specified as url(../../images/), change the URL to ../common/css/images/
Save the new style sheet.
After you have obtained the styles, modified them, and saved them in a new style sheet, return to the branding files page.
In the Style Sheet section, click Browse next to the text box.
Navigate to the style sheet you modified, then click Open. To keep the current style sheet for any control panel, leave the text box blank.
Click Upload Changes. The style sheet is updated.
To view the changes, log in to the user control panel. If you do not see the changes, your browser might be using a previously cached version of the style sheet. Refresh your browser's cache to view the changes (in Internet Explorer, press Ctrl while clicking the browser's refresh button).
Changes are not displayed in the control panel that is your primary login.
Banners are the graphics that appear at the top of the control panels in the long space to the left or right of the logo space. You can replace the banners in the user control panels you own with any other image that:
Has approximately the same dimensions as the default banner to ensure that control panel elements display correctly. The default banner is 1,650 pixels wide by 60 pixels tall. If a banner is too long to be displayed, it slides under the logo.
Is in .gif or .jpg format.
Is no larger than 46 KB in size.
To change the banners:
In the Banner section, click Browse next to the user control panel text box, then navigate to the file you want to use for the banner.
Click Open.
To keep the current banner for any control panel, leave the text box blank.
Click Upload Changes.
The new banner appears in the control panel. To view it, log in to the user control panel. If you do not see the change, your browser might be using a previously cached version of the banner. Refresh your browser's cache to view the change (in Internet Explorer, press Ctrl while clicking the browser's refresh button).
The logo is the graphic that appears to the left or right of the banner at the top of the control panel. You can replace the default logo with any graphic that:
Has approximately the same dimensions as the default graphic to ensure that interface elements display correctly. The default graphic is 157 pixels wide by 60 pixels tall.
Is no larger than 46 KB.
To upload your logo:
In the Logo section, click Browse next to the user control panel text box, then navigate to the file you want to upload.
Next to Logo Position, choose Left to display the logo in the upper left of the control panel, or choose Right to display the logo in the upper right.
If you want to change the position of the logo, you need to navigate to the logo file as described in step 2; you cannot simply change the position by choosing left or right.
To keep the current logo for any control panel, leave the text box blank.
The graphic appears in the control panel. To view it, log in to the user control panel. If you do not see the change, your browser might be using a previously cached version of the logo. Refresh your browser's cache to view the change (in Internet Explorer, press Ctrl while clicking the browser's refresh button).
You can reload the default style sheets, banners, and logos used in the control panels at any time. If you are a reseller or site administrator, the defaults are the settings currently used by your service provider; they change whenever your service provider rebrands control panels.
To reload default settings:
On the branding files page, click Restore Default next to any item you want to reload.
Next Quick-start topic: Add User Accounts