Customizing CAPC logos and colors

Document ID : KB000048352
Last Modified Date : 14/02/2018
Show Technical Document Details

Description:

This document describes the steps that are required to modify one of the default CA Performance Center themes and the Login page to accommodate specific customer requirements. All references in the document assume that the software is installed in the default location (/opt/CA). This document is relevantfor the current GA version of CA Performance Center at the time of its creation: r2.3.

Solution:

User Interface Customization: Introduction

CA Performance Center refers to customizable user interface elements as "themes." In this document, we discuss how to change one of the existing themes (CA-Blue or CA-Grey) to the logo and colors that you require. In this document, we use CA-Blue as an example. Be sure to make a backup copy of the directory that contains the predefined stylesheet or logo file before making changes so that you can revert to the original if necessary.

All changes that are made to the system take immediate effect when you force a browser refresh by clicking F5.

Any modifications that you make using the procedures in this document are lost during an upgrade. Therefore, be sure to save the modified directory before the upgrade.

In some steps, changes to the layout-min.css file are required. If JavaScript debugging is enabled, apply the same changes to the layout.css file.

We recommend using the website http://www.colorhexa.com to look up the hex value of the color that you want to use and select the exact shade that you want.

Login Page Customization

Changing the Logo

By default, all themes use the CA Technologies corporate logo. The default Login Logo image is located in the /opt/CA/PerformanceCenter/sso/webapps/sso/images directory. The filename is logo.png. To substitute anew logo, rename the existing file (to something like logo.png.old) and copy the logo file that you want to use into the directory with filename logo.png.

The original size of the logo is 36x22 pixels. Be sure that any new logo image is the same size as the original image.

Changing the Background Color

To change the background color so that, for example, dashboards appear on a red field rather than a blue field, edit the sso_styles.css file in /opt/CA/PerformanceCenter/sso/webapps/sso/css. Search for 061935 (the hex code for the color blue), and replace it with the code for the color that you would like to use for the background. For example, replace it with 'ff0000' for a red background. Save the file and refresh the browser.

Main Web Interface

Changing the Logo

The logo for the main CA Performance Center user interface is located in /opt/CA/PerformanceCenter/PC/webapps/pc/css/CA-Blue/images and the name is logo.png. To substitute anew logo, rename the existing file (to something like logo.png.old), and copy the logo file that you want to use into the directory with filename logo.png. Refresh the browser to see the changes.

Changing the Background Color

To change the background color, modify the layout-min.css file in the /opt/CA/PerformanceCenter/PC/webapps/pc/css/CA-Blue/includes directory. Search for 061935 (Blue) and change it to the hex code for the desired color. For example, #ff0000 changes it to red.

Changing the Color of the View Title Bar Text

To change the color of the view title text, modify the extOveride-min.css file in the /opt/CA/PerformanceCenter/PC/webapps/pc/css/CA-Blue/includes directory. Search for ".x-panel-header-text{color:#222;font-size:1.2em}" and change the value for the color from 222 (dark grey) to the hex code for the desired color. For example, #ffff00 changes it to yellow.

Changing the Color of the Group Filter Text

The Group Filter dialog lets you select a group context or apply permission groups to user accounts. To change the color of the Group Filter text, modify the layout-min.css file in the /opt/CA/PerformanceCenter/PC/webapps/pc/css/CA-Blue/includes directory. Search for the pageFilter parameter and change the value for the color from #a4b5c9 (greyish blue) to the hex value of the desired color. For example, enter a value of #000000 to change the color to black.

Changing the Color of the Dashboard Name

To change the color of the Dashboard Name that appears at the top of each dashboard page, modify the layout-min.css file in the /opt/CA/PerformanceCenter/PC/webapps/pc/css/CA-Blue/includes directory. Search for pageContextBar and change the value for the color from #fff (white) to the hex code of the desired color. For example, #000000 changes the text to black.

Changing the Color of the Options Links

To change the color of the Options links on the toolbar (specifically, Auto Refresh, View Suppression, Email, Print and the More menu), modify thelayout-min.css file in the /opt/CA/PerformanceCenter/PC/webapps/pc/css/CA-Blue/includes directory. Search for secondaryNavigation followed by the required selection. Change the value for the color from #fff (white) to the hex code of the desired color. For example, #000000 changes the text to black.

Changing the Color of the Performance Center Text

To change the color of the Performance Center text, which appears above the toolbar, modify the layout-min.css file in the /opt/CA/PerformanceCenter/PC/webapps/pc/css/CA-Blue/include directory. Search for productTitle and change the value for the color from #fff (white) to the hex code of the desired color. For example, #000000 changes the text to black.