Customizing › Custom Branding › Themes › Customize a Theme

Customize a Theme

After you have created a theme, you can customize it, to give it a unique look-and-feel. Customizing a theme helps to reinforce branding and other messaging for the business unit or the department or organization it represents. Before you edit the main.css file, verify that you meet the prerequisites for editing CSS files.

Follow these steps:

1. Log in to CA Service Catalog and note the look-and-feel of the home page. The following sample home page uses the default settings of the CA_Technologies_R7 theme:

   

2. Back up the main.css file in the custom theme folder that you created. A sample path name is %USM_HOME%\filestore\themes\custom_theme\css\main.css file.

   Important! As a best practice, always back up CSS files and other configuration files before you edit them.

3. Open the main.css file of your custom theme. Use a suitable CSS editor for your web browser.
4. Find the lines that control the look-and-feel specification that you want to update.

   For example, To change the background color globally on product pages, do the following:

   1. Find the following default setting:

      td.pagebg{background-image:url(../images/grid/page-bg.png);background-repeat:repeat-x;background-color:#D9E2F3;}
      

   2. Delete the following phrase:

      background-image:url(../images/grid/page-bg.png);
      

      The line now appears as follows:

      td.pagebg{background-repeat:repeat-x;background-color:#D9E2F3;}
      

   3. Change the background-color:#D9E2F3 to the color of your choice, for example, background-color:red.
   4. Save the file.

   Note: The setting in this example does affect the background color of the entire product page. However, the background colors of specific sections of the page override the background color of the entire page.

5. Refresh the CA Service Catalog UI. Verify the changes to the product pages.

   A sample page follows. This page displays the updates to the background color specified in the previous step.

   

6. Update other elements of the theme meet your requirements. Verify each change by saving the file and refreshing the login page.

   For example, you can customize the look-and-feel of the top-level menu tabs (Home, Service Builder, Accounting, and Administration). To do so, find and edit the following section in the main.css file:

   a.tabs {
   font-family:verdana, arial,sans-serif;
   font-size:10px;
   font-weight:700;
   color:yellow;
   text-align:center;
   white-space:nowrap;
   text-decoration:none;}
   

7. If necessary, refine your original edits of the main.css file, or create additional customizations. Verify your updates on the UI, as explained in the previous steps.

You have customized the theme. In addition, you can also customize certain global page elements that are not directly related to themes.