Customizing the Virtual Portal Look and Feel
  • 4 Minutes to read
  • Dark
    Light
  • PDF

Customizing the Virtual 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 administration view and end user view.

Note

You cannot define the portal colors for a virtual portal in the virtual portal administration.

To define the portal color scheme:

  1. For a specific virtual portal, in the view for that virtual portal, select Settings > Palette Generator in the navigation pane.
    The Palette Generator page is displayed.
    image.png
    The color scheme is separated into the following areas under both the ADMINISTRATION PALETTE and END USER PALETTE views:

    • BRAND COLORS, which determine the color for the main menu items in the navigation menu, as well as action icons and buttons.
    • ADDITIONAL COLORS, which determine message colors.
    • LAYOUT COLORS, which determine the general page layout colors.
    • TEXT COLORS, which determine the text colors.

    In addition, the GRID COLORS option, which determines table colors, is displayed in the END USER PALLETTE view.

    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, setting the BRAND COLORS from #4F5AE2 to #21CCAA and the TEXT COLORS color from #626CE8 to #08B5C9 changes the portal color scheme to the following:
    image.png
    Click CANCEL in the preview and then if you do not like the changes, click RESET TO DEFAULTS in the Palette Generator page to undo all your changes.

  5. Once you are satisfied with the color scheme, click DOWNLOAD.

Note

If you leave the Palette Generator page after making a color change, you will no longer be able to reset it to the default colors.

For the ADMINISTRATION PALETTE, a file is downloaded: config.json.

For the END USER PALETTE, a file is downloaded: skins.css.

Use the file as part of the skin for your portal, as described in Managing a Portal Skin.

Managing a Portal Skin

You can upload a default skin for all the portals in the global administration 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 the file 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. For the administration view, replace the config.json file in the zip with downloaded config.json file.
  4. For the end user view, replace the .skins.css in the endUser/css folder in the zip with the downloaded skins.css file.
  5. To upload the updated skin file, first change the zip file's extension back to .skin.
  6. Upload the skin file to the portal and set it as the default.

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 example, in the global administration view:
    image.png
  2. Click Upload Skin to upload the new skin.
    The Select a file to upload window is displayed.
    image.png
  3. Click Upload and browse to the skin received from CTERA support.
  4. Select the file with the extension .skin and click Open.
    The selected skin is uploaded.
  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 row of the skin to use as the default and click Set Default.
    image.png
    The selected skin becomes the default skin. Default Skin is displayed under the skin name and the icon changes from image.png to image.png.
  3. Refresh the portal page.

The default skin cannot be deleted.

To remove a skin from being the default:

  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 row of the default skin and click Remove Default.
    The icon changes from image.png to image.png.
  3. Refresh the portal page.

To delete a skin that is not 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 row of 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?