Cloud Cruiser became HPE Consumption Analytics on Nov. 1st. You'll still see the old name in places while we update this site.

 

 

Consumption Analytics Documentation

Home > Cloud Cruiser 4 > Administering > Rebranding the user interface

Rebranding the user interface

You can change the logos and product name that appear in HPE Consumption Analytics Portal to apply your own branding.

Changing the product name

The product name appears below the main logo and in the text of browser tabs, as shown in the following screenshot:

Product name appearing in Cloud Cruiser Portal

To change the product name

  1. In the Cloud Cruiser Portal, go to Administration > Configuration > UI .
  2. Enter a new name in the Product Name field and click Save .

You must log out and log back in to see the new product name in the navigation pane and browser tab.

Changing the logos

You can replace several logos that appear in the HPE Consumption Analytics Portal Portal.

Because the files for HPE Consumption Analytics Portal logos are in your installation directory, changes you make to these files will be overwritten when you upgrade to a newer version of HPE Consumption Analytics Portal.

HPE recommends that you create backup copies of any logo files you intend to edit.

To replace logos

  1. On the Cloud Cruiser computer, go to the directory <installDir>/apache-tomcat-7.0.54/webapps/ROOT/skins/CC/brand_images.
  2. Replace the following files with new image files.
    If an image exceeds the dimensions of the original image it replaces, it is truncated.
     

    Name

    Filename

    Pixel dimensions

    Login logo

    logo_login.png

    216 x 55

    Main logo

    logo.png

    296 x 70

    Collapsed logo

    logo_small

    48 x 48

    Report logo

    report_logo.png

    300 x 85

    Favicon

    logoicon.ico

    16 x 16

Login logo

 

Login dialog

Main logo and favicon

 

Main logo and favicon

Collapsed logo

 

Collapsed logo

Report logo

 

Report logo

Changing the link in the main logo

By default, when you click the HPE logo in the upper-left corner, the HPE website opens in a new browser window. You can change that link to open any other website, such as one on your own corporate intranet site.

To change the link in the main logo

  1. In the Cloud Cruiser Portal, go to Administration > Configuration > General > Other.
  2. Enter a new value for the logo_url_link property, and click Save.

Changing the colors

You can alter the colors used in HPE Consumption Analytics Portal UI by modifying the CSS files for the elements that compose the UI. Each element's CSS file contains several sections with Hex color codes for that section of the element. 

If you are more familiar with RGB color coding, you might find it helpful to use an RGB-to-Hex converter, such as the one at http://www.rapidtables.com/convert/color/rgb-to-hex.htm.

To learn the file name of the HPE Consumption Analytics Portal UI element you want to modify, right click that part of the UI and select Inspect or  Inspect element. Your browser opens new panels to display details about that element, including its file name. For example, the following image shows the file name for the side navigation bar element, cv_sidenav.css:

InspectElement.bmp

Within an element's CSS file you can alter the color codes for several sections. The following sections describe the primary CSS files and color sections you can modify. These and other CSS files are in your <install_directory>\apache-tomcat-7.0.54\webapps\ROOT\skins\CC directory.

Because the CSS files are in your installation directory, changes you make to these files will be overwritten when you upgrade to a newer version of HPE Consumption Analytics Portal.

HPE recommends that you create backup copies of any CSS files you intend to edit.

cv_brand_styles.css

To change the main background color of the log in screen, search for the mainBackground section in the cv_brand_styles.css file and alter the Hex color code for the background parameter.

cv_sidenav.css

To change the colors used in the side navigation bar, search for the following sections in the cv_sidenav.css file and alter the codes for the corresponding parameters:

To change this... Search for... And modify the code for
Default text color ccSideNavPopoverMenuItemMainTitleDisabled color
Text color after clicking ccSideNavPopoverMenuItemSubTitleFloatDisabled color
Menu color

ccSideNavPopoverMenuItemMainTitleDisabled

ccSideNavMainPanelBodyDisabled

CCSideNavBottomPanelBody

background-color

Menu color after clicking ccSideNavPopoverMenuItemSubTitleFloatDisabled background-color
Sub-menu color ccSideNavPopoverSubMenuSelectedOver background-color
Sub-menu text color ccSideNavPopoverSubMenuSelectedOver color

cv_toolbars.css

ToolbarElement.bmp

To change the colors used in HPE Consumption Analytics Portal toolbars, search for the following sections in the cv_toolbars.css file and alter the codes for the corresponding parameters:

To change this... Search for... And modify the code for
Toolbar background

ccHeaderToolbar

ccHeaderToolbarWithShadow

background-color
Toolbar header ccHeaderToolbarHeaderLabel color
Toolbar sub-header text ccHeaderToolbarSubHeaderLabel color
Disabled button color ccHeaderToolbarButtonDisabled background-color
Enabled button color ccHeaderToolbarItem background-color
Button text ccHeaderToolbarItem color

cv_tab.css

TabElement.bmp

To change the colors used in HPE Consumption Analytics Portal tabs, search for the following sections in the cv_tab.css file and alter the codes for the corresponding parameters:

To change this... Search for... And modify the code for
Bar color tabBarTopnavTop background-color
Text color tabBarTopnavTop color
Hover/Select color ccTopnavTabTopSelectedFocusedDown background-color

cv_button.css

To change the colors used for HPE Consumption Analytics Portal buttons, search for the following sections in the cv_button.css file and alter the codes for the corresponding parameters:

To change this... Search for... And modify the code for
Button color ccCSSButtonFocusedDisabled background-color
Button text color ccCSSButtonFocusedDisabled color

Adding text to the Sign In page

You can add text to the HPE Consumption Analytics Portal Sign In page, just below the Password field. For example, you can add text that alerts users that by signing in they agree to your terms of service, and you can include a link to your terms of service.

To add text to the Sign In page

  1. Open the Administration > Configuration > General > UI tab.
  2. In the Additional sign-in text field, enter the text you want to appear on the Sign In page.
    If you want to include a hyperlink, use HTML markup in your text. For example:
    By signing in, you agree to our <a href=\"http://www.cloudcruiser.com\" target=\"_blank\">Terms of Service</a>
    AdditionalSignInText.jpg
     

    Any double-quote marks (") you include in the Additional sign-in text field must be escaped with a single slash (\). If any double quotes are not escaped, HPE Consumption Analytics Portal will hang during startup.

  3. Click Save.
  4. Reopen the HPE Consumption Analytics Portal Sign In page to see your changes.
    SignIn.jpg
Last modified

Tags

Classifications

This page has no classifications.
© Copyright 2018 Hewlett Packard Enterprise Development LP