Branding the control panels

Quick-start tutorial: Home 1 2 3 4 5 6 7 8 9

You can customize the look and feel of your customers' 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 customers' 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 service provider control panel that is your primary login).

What you can change

- Banners and logos

- Colors and graphics

- Padding, spacing, and font sizing

- Content (Service providers can add content to the site 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

# About branding user and site control panels

To add your company's brand to site user control panels, you need to make your changes before you add the site. For example, if you create a site, then change the style sheets later, the user control panels of that site are not affected. Only the site administrator can customize user control panels after the site has been added.

Further, if you create a reseller, the reseller can replace your brand with theirs in the control panels of sites they create; site administrators can replace your brand with theirs in the user control panels.

# Changing the styles used in control panels

To change the colors, text, and general look and feel of control panels, follow these instructions:

## Step 1. Download the current style sheet

1. Go to the branding files page
   .

2. If this is the first time the style sheet has being changed, click Download Current by the style sheet you want to download. If the style sheet has been modified before, click restore default, then click Download Current.

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

4. Open a browser and download the base style sheet:

1. 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 Ensim Pro server.

2. Click Go. The base style sheet is displayed.

3. Save the base style sheet so you can refer to it later if necessary.

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

6. In your new style sheet, change the styles you copied from the base style sheet as needed.

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

8. Save the new style sheet.

## Step 2. Upload the modified style sheet

1. After you have obtained the styles, modified them, and saved them in a new style sheet, return to the branding files page
   .

2. In the Style Sheet section, click Browse next to the reseller, site, or user text box.

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

4. Click Upload Changes. The style sheet is updated.

5. To view the changes, log in to the appropriate 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.

# Change control panel banners

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 reseller, site, and 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:

1. Go to the branding files page
   .

2. In the Banner section, click Browse next to the reseller, site, or user control panel text box, then navigate to the file you want to use for the banner. You can use the same graphic or different graphics for each control panel.

3. Click Open.

4. To keep the current banner for any control panel, leave the text box blank.

5. Click Upload Changes.

The new banner appears in the control panel. To view it, log in to the appropriate 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).

Changes are not displayed in the control panel that is your primary login.

# Add your logo

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 in .gif or .jpg format.

- Is no larger than 46 KB.

To upload your logo:

1. Go to the branding files page
   .

2. In the Logo section, click Browse next to the reseller, site, or user control panel text box, then navigate to the file you want to upload. You can use the same graphic or different graphics for each control panel.

3. Click Open.

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

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

5. To keep the current logo for any control panel, leave the text box blank.

6. Click Upload Changes.

The graphic appears in the control panel. To view it, log in to the appropriate 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).

Changes are not displayed in the control panel that is your primary login.

# Reload default settings

You can reload the default style sheets, banners, and logos used in the control panels at any time. If you are the service provider who owns the Ensim Pro server, the defaults are the system's initial settings. 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 reseller templates