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

Customizing the Virtual Portal Look and Feel

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

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:

    • 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, setting the primary color from #4F5AE2 to #21CCAA and the primary hue 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, RESET TO DEFAULTS in the Palette Generator page to undone all your changes.

  5. Once you are satisfied with the color scheme, click DOWNLOAD CSS.
    Two files are downloaded: skins.css and skins.admin.css.

Use these files 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 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.

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 skin file to upload window is displayed.
    image.png
  3. Click Upload and browse to the skin received from CTERA support.
  4. Select the 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?