Customizing the Portal Look and Feel
  • 06 Apr 2022
  • 3 Minutes to read
  • Dark
    Light
  • PDF

Customizing the Portal Look and Feel

  • Dark
    Light
  • PDF

Article Summary

If you want to change the portal look and feel you can do the following:

  • Change the color scheme for an individual team or reseller portal.
  • Customize the portal skin by changing objects in the default skin. Customizing a skin should only be performed with CTERA support. After a skin has been customized you can upload it to the portal and set it as the default skin.

Managing the Portal Colors

You can define the portal colors for both the administration and end user views for a specific team or reseller portal in the view for that portal. You can change the color scheme for both the portal administrator view and end user view.

To define the portal color scheme:

  1. For a specific virtual portal, in the view for the virtual portal, select Settings > Palette Generator in the navigation pane.
    The Palette Generator page is displayed.
    GlobalAdministrationimagesPortalAdmin141421.png
    The color scheme is separated into the following areas:
    • The brand colors, which determine such things as the color for the main menu items in the navigation menu, as well as action icons and buttons.
    • The additional colors, which determine such things as message colors.
    • Layout colors, which determine such things as the general page layout.
    • Grid colors, which determine such things as table colors.
    • Text colors, which determine such things as the text colors.
    Clicking an item in one of these areas displays the current color in an editable format and to what the item applies to.
  2. Choose the view to change: ADMINISTRATION PALETTE or END USER PALETTE.
  3. Click the item to change the color and enter the HTML color code you want for that item.
  4. Click PREVIEW to preview the new color scheme.
    For example, changing the primary brand color from #4F5AE2 to blue (#239ECF) and the secondary brand color from #405F6E to red (#E74C3C) changes the portal color scheme to the following:
  5. GlobalAdministrationimagesPortalAdmin141422.png
    Click CANCEL in the preview and then If you do not like the changes, RESET TO DEFAULTS in the Palette Generator page to undone all your changes.
  6. Once you are satisfied with the color scheme, click DOWNLOAD CSS.
    Two files are downloaded: skins.css and skins.admin.css.
  7. You use these files as part of the skin for your portal, as described in Managing a Skin.

Managing a Skin

You can upload a default skin for all the portals in the global administrator view or for a specific team or reseller portal in the view for that portal.

Note:

You can get a basic skin from CTERA support. The skin file has an extension .skin.

To change a skin to include a new color scheme:

  1. Create CSS files with the desired color scheme as described in Managing the Portal Colors.
  2. Change the extension of the .skin file you want to use to .zip.
  3. Add the files, that were downloaded when you created the desired color scheme, to the css folder in the zip.
  4. Change the ZIP file's extension to .skin.
  5. Upload the skin file to the portal and set it as the default, as described in To upload a skin to the portal:.

To upload a skin to the portal:

  1. For all portals, in the global administration view or for a specific virtual portal, in the view for the virtual portal, select Settings > Skins in the navigation pane.
    The SKINS page is displayed.
    For all virtual portals:
    GlobalAdministrationimagesPortalAdmin141431.png
    For a virtual portal:
    GlobalAdministrationimagesSkins-portal1.png
  2. Click Upload Skin to upload the new skin.
    The Select a skin file to upload window is displayed.
    GlobalAdministrationimagesSkinUpload.png
  3. Click Upload and browse to the skin received from CTERA support.
  4. Select the skin and click Open.
  5. Click FINISH.
Note:

You can also download a skin from the portal to make changes. CTERA recommends only doing this in coordination with CTERA support.

To make a skin the default skin:

  1. For all portals in the global administration view, or for a specific virtual portal, in the view for the virtual portal: Select Settings > Skins in the navigation pane.
    The SKINS page opens, displaying all the available skins.
  2. Select the skin to use as the default and click Set Default.
    GlobalAdministrationimagesPortalAdmin141434.png
  3. Refresh the portal to apply the customizations.

To delete a skin

  1. For all portals, in the global administration view or for a specific virtual portal, in the view for the virtual portal, select Settings > Skins in the navigation pane.
    The SKINS page opens, displaying all the available skins.
  2. Select the skin to delete and click Delete.
    A confirmation window is displayed.
  3. Click DELETE to confirm.
    The skin is deleted.

Was this article helpful?