CTERA Portal Customization Guidelines

Portal customization is available for the following:

• End user and team administration colors.
  • The brand colors, such as the color for the main menu items in the navigation menu, as well as action icon and button colors.
  • Message colors.
  • Layout colors.
  • Table grid colors.
  • Text colors.
• The end user portal.
• The end user portal for team portal administrators.
• The end user portal for guest users.
• Invitations.

The portal global administration view cannot be customized, aside from the Help link. For information on customizing this link, refer to Customizing Legal Information, About Us, Support and Help Links.
Reports and emails sent from the portal can be customized from within the product, as described in the portal documentation. The administrator is responsible for this customization.

When customizing the CTERA Portal follow these guidelines:

• Use the Palette Generator to change the portal colors. The CSS files generated can then be incorporated in the customized skin.
• Customize skins.css for the end user portal and skins.admin.css for the administration portal.
  Warning

  Customize the skins.css and skins.admin.css files after changing the portal colors using the Palette Generator, otherwise any customizations are lost when the new skins.css and skins.admin.css files are generated by the Palette Generator. Also, only changes that are described in the procedure in Customizing Portal Skins can be implemented. Other changes to these files, such as changing margins, padding, size, display, etc., may work with a specific portal version, but can cause major bugs in portal upgrades.

The following cannot be customized:

• The css.css file.
• The JS scripts.
  Note

  Mandatory references to js scripts are marked with a comment stating they cannot be removed.

• The layout of the end user portal's user interface and the team portal's administration view.

Customizing Portal Skins

You can customize the following:

• End user, team and reseller administration colors, as described in Customizing Portal Colors.
• The end user portal for team and reseller portals, team portal administrators, control panel for reseller portal administrators, and for guest users.
  • The images, such as the logo.
    Note

    Customizing the logo image for email notifications must be done after every portal upgrade since the image is not included as part of the upgrade. If the image is not redone, email notifications are not sent and an error is issued with each notification.

  • The Search Bar in the Cloud Drive and/or Shared With Me folder in an end user portal.
  • The legal information, about us, support and help links in the login footer or user profile, as described in Customizing Legal Information, About Us, Support and Help Links. These customizations can be done at any time, before or after customizing the skin.

To customize a skin:

1. Contact CTERA Support and request the sample skin file.
   This is a standard CTERA skin.
2. Change the .skin suffix to .zip and extract the files to a folder.
3. Customize the colors as described in Customizing Portal Colors.
4. To customize the end user portal:
   1. Replace skinname/endUser/css/skins.css with the skins.css file generated by customizing the portal colors.
   2. Change the logo image by replacing logo.png in skinname/endUser/img and the css attributes as follows:
      • For the logo in the user interface, edit the .header .logo element in skinname/endUser/css/skins.css`:

        .header .logo {
              background: url(../img/logo.png) no-repeat center center;
              width: 200px;
        }
        

      • For the logo for public links, edit the .logo-invitation element in skinname/endUser/css/skins.css:

        body#invitation-view .navbar .logo-invitation {
              width: 300px;
              height: 70px;
              top: -10px;
                    background: url(../img/logo.png) no-repeat 0 0;
        }
        

      Note

      The logo sizes must be able to fit the area: 200 pixels width for the logo in the user interface and 300 pixels width and 70 pixels height for the logo for public links.

   3. Change background images by replacing the files in skinname/endUser/img:
      background-medium.png – For tablets.
      background-large.png – For desktops.
      background-x-large.png – For large desktops, 1200px and up.
   4. Hide the Search Bar in either or both the Cloud Drive and Shared With Me folders, by editing skinname/config.json. The content of the file controls which search bars are hidden:

      {
            "HideSearchInCloudDrive" : true,
            "HideSearchInSharedWithMe" : true
      }
      

      where setting HideSearchInCloudDrive to true hides the search bar in the cloud drive view and setting HideSearchInSharedWithMe to true hides the search bar in the Shared With Me view.
      The default, when no parameters are specified, is false for both settings.
   Note

   skinname is the name of the folder where the base skin was extracted.

5. To customize the administrator portal:
   1. Replace skinname/admin/css/skins.admin.css with the skins.admin.css file generated by customizing the portal colors.
   2. Change the logo image by replacing logo.png in skinname/img and the css attribute, by editing the .logo element in skinname/admin/css/skins.admin.css:

      .logo {
          display: inline-block;
          width: 200px;
          height: 250px;
          background: url(../../img/logo.png) no-repeat center center;
      }
      

   Note

   skinname is the name of the folder where the base skin was extracted.
   The logo size must be able to fit the area: 200 pixels width and 250 pixels height.

6. After making customizations, edit MANIFEST.MF, and set the value of name to the name of your skin.
   For example: name=myFirstSkin
7. Select all of the files and folders under the extracted folder and compress then into a ZIP file with the name of the skin you specified in MANIFEST.MF.
   Note

   The name of the ZIP file must be the name of the skin specified in MANIFEST.MF.

8. Change the .zip suffix to .skin.
9. As a global administrator, upload the skin file to the CTERA Portal and set it as the default skin, as described in Managing a Skin.
   Note

   Only a global administrator can upload a skin file to a CTERA Portal.

10. Customize the legal information, about us, support and help links in the login footer or user profile, as described in Customizing Legal Information, About Us, Support and Help Links.
    Note

    These customizations can be done at any time, before or after customizing the skin.

Customizing Portal Colors

You use the Palette Generator to customize both the end user and team administrator colors.
To use the Palette Generator:

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

   Clicking an item in one of these areas displays the current color in an editable format and to what the item applies to.

2. Click the item and enter the HTML color code you want for that item.

3. Click PREVIEW to preview the new color scheme.
   For example, changing the primary brand color to blue (#239ECF) and the secondary brand color to red (#E74C3C) changes the portal color scheme to the following:
   
   If you do not like the changes, click CANCEL in the preview and then RESET TO DEFAULTS in the Palette Generator page to undo all the changes.

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

5. You use these files as part of the skin for your portal.

Customizing Legal Information, About Us, Support and Help Links

You can customize the following links:

• In the end user and team administrator Login page, in the footer:

  • The Support link. The default opens a new browser window with the CTERA support page.
  • The Legal Information link. The default opens a window with the CTERA EULA.
  • The About Us link. The default opens a new browser window with the CTERA website.

• In the end user portal's MY PROFILE option:

  • The profile Help link displays a window with options including:
    • Online Help link. The default opens a new browser window with the CTERA online help.
    • Legal Information link. The default opens a window with the CTERA EULA.
    • Get Support link. The default opens a new browser window with the CTERA support page.

• In the team administrator MY PROFILE option:

  • The HELP link. The default opens a new browser window with the CTERA online help.
  • The LEGAL link. The default opens a window with the CTERA EULA.
  • The SUPPORT link. The default opens a new browser window with the CTERA support page.

• In a global administrator portal's Login page in the footer:

  • The Support link. The default opens a new browser window with the CTERA support page.

• In the global administrator portal's MY PROFILE option:

  • The HELP link. The default opens a new browser window with the CTERA online help.

To customize the Legal Information, About Us and Help links:

1. Open an SSH session to the CTERA Portal server as root.
2. Connect to the CTERA Portal CLI, by running the following command: telnet localhost
   Log in to the CTERA Portal CLI, by running the following command:
   login Administration admin adminUserName where adminUserName is the admin user's name.
   For example: login Administration admin admin
   You are prompted to enter the administrator's password.
3. Enter the administrator's password.
4. Set up portal links:
   • To set the Legal Information link, run the following command: set /settings/defaultPortalSettings/gui/legalUrl "link" where link is a link to your company's legal information page. It must be enclosed in quotation marks and it must be an HTTPS URL.
   • To set the About Us, run the following command: set /settings/defaultPortalSettings/gui/aboutUrl "link" where link is a link to your company's website. It must be enclosed in quotation marks and it must be an HTTPS URL.
   • To set the Help link for the end user portal, run the following command: set /settings/defaultPortalSettings/gui/endUserHelpUrl "link" where link is a link to the online help you wan to use. It must be enclosed in quotation marks and it must be an HTTPS URL.
   • To set the Help link for the administration view, run the following command: set /settings/defaultPortalSettings/gui/adminHelpUrl "link" where link is a link to the online help you wan to use. It must be enclosed in quotation marks and it must be an HTTPS URL.
5. Exit the CTERA Portal CLI, by running the following command: quit
6. Restart CTERA Portal, by running the following command: portal-manage.sh restart
   The changes are applied.

To customize the Support link:

1. Select Settings in the navigation pane.
2. Select Virtual Portal, under SETTINGS in the Control Panel content page.
   The Virtual Portal Settings window is displayed.
3. For a virtual portal, click Override to enable editing the settings.
4. Scroll down to the Support section and change the support settings as required.

Where:
Support URL – The URL to which CTERA Portal users browse for customer support.
Email Sender's Name – The email address that is displayed in the From field of notifications sent to users by the virtual portal.
5. Click SAVE.

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.

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, listing the available skins.
2. Click Upload Skin to upload the new skin.
   The Select a skin file to upload window is displayed.
   
3. Click Upload and browse to the skin received from CTERA support.
4. Select the skin and click Open.
5. Click FINISH.

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.
   
3. Refresh the portal to apply the customizations.

Advanced Login Page Customizations

The following customization should be performed with the help of CTERA Support.

When customizing the CTERA Portal Login page, it must include the "Powered by CTERA" icon, the CTERA copyright, and the following controls:

You can customize the Login page for an end user portal by editing skinname/endUser/login.html where skinname is the name of the folder where the skin is located.