(Click to open topic with navigation)

1 – Setup and customization > 1.3 Viewpoint customization > Customizing the Viewpoint background and login screen

Customizing the Viewpoint background and login screen

You can customize the look and feel of the Viewpoint login page, and the header of the Viewpoint system by specifying different colors and images or logos.

The login page uses the following images:

Image Location Description Dimensions in pixels (W x H)
body.png images/core/ A blue-to-white gradient image that is used in the background on the login page. This image is placed in the top corner of the page and is repeated horizontally. 1 x 698
body-arch.png images/core/ An image of the Delicate Arch that matches the blue-to-white gradient of the default body.png background image. 885 x 672
cloud-suite-login.png images/core/ An image for the text that appears on the login page. By default, the image says Moab Cloud Suite. 344 x 34

The header uses the following image:

Image Location Description Dimensions in pixels (W x H)
cloud-suite-header.png images/core/ The image that appears as the logo in the header once logged in. By default, the image says "Moab Cloud Optimizer for HP Cloud Service Automation." 289 x 36

To customize the Viewpoint login page

  1. Copy the default image(s) from the web-app/images/core directory into a separate directory in case you need them again later.
  2. Rename the filenames of any custom images to match the filenames of corresponding default images. For example, if you want to replace the arch logo on the login screen, you must name your new image body-arch.png.

    3. In order for the new images to display correctly, you must create them using the same dimensions as the default images.

  3. Place the custom image(s) in the web-app/images/core directory to replace the default file(s).

The login page reflects your modifications.

To customize the Viewpoint header

  1. To customize the header image/logo, do the following:
    1. Copy the default cloud-suite-header.png image from the web-app/images/core directory into a separate directory in case you need it again later.
    2. Rename the filename of your custom image to match cloud-suite-header.png.

      3. In order for the new image to display correctly, you must create it using the same dimensions as the default image (283 x 36).

    3. Place the custom image in the web-app/images/core directory to replace the default file.
  2. To customize the color of the header background, do the following:
    1. Open the main.css stylesheet file.
    2. Find div#tophead, and change the background-color property to reflect the color you want.
    3. Save the main.css file.

The Viewpoint header reflects your modifications.

Related topics