Modify the Theme

A theme specifies the settings for the following look-and-feel elements:
casm173
A theme
specifies the settings for the following look-and-feel elements:
  • Images and icons (
    except for
    logos)
  • Menus
  • Tabs
  • Toolbars
  • Wizards
When applicable, these elements include the following specifications:
  • Colors (especially background colors)
  • Font name and point size
  • Highlighting, such as bold or underline
  • Position on a page or dialog
You modify these look-and-feel elements by editing the Cascading Style Sheet (CSS) files for the theme. Each theme includes the following CSS files:
  • logon.css, which applies to the login page
    only
  • main.css, which applies to other product pages
A theme is organized in folders, with one top-level folder for each theme. In addition to the CSS files, a theme includes several other supporting files and several folders. You do not need to edit these additional files and folders. However, you copy them as a group when you copy and modify a CSS file.
The look-and-feel of the UI matches the theme of the business unit that you are logged in to. If theme is not set for a business unit, CA Service Catalog checks the business unit hierarchy until it finds a theme. Thus, if a business unit does not have its own theme, it uses the theme of its closest parent business unit. You can use the same theme for all business units. Alternatively, you can optionally create and use different themes for different business units.
As an administrator, edit the theme for one or more business units
only
if you have expertise in:
  • UI design, especially look-and-feel elements
  • Standard specifications for CSS files
  • Customization of CSS files, using a CSS file editor for your web browser
To customize a theme:
Step 1 - Understand Predefined and Custom Themes
A theme is organized in folders, with one top-level folder for each theme. In addition to the CSS files, a theme includes several other supporting files and several folders. You do not need to edit these additional files and folders. However, you copy them as a group when you copy and modify a CSS file.
In the USM_HOME\filestore\themes folder, CA Service Catalog includes the following top-level folders for each predefined theme:
  • CA_Technologies_R7
    Specifies the predefined look-and-feel elements of CA Service Catalog.
  • common
    Contains look-and-feel elements that apply to
    all
    predefined and custom themes.
    Do
    not
    copy and modify the
    common
    folder.
If you have already created custom themes, your top-level folders for those themes also appear in the USM_HOME\filestore\themes folder.
To create a custom theme, you copy either a predefined folder (such as CA_Technologies_R7) or a custom folder that you created earlier. Afterwards, you modify the CSS file of interest in the folder that you copied.
You store all custom theme folders under the filestore folder. You store them on the same folder level as the CA_Technologies_R7 folder.
Each top-level folder name becomes the name of an option for a theme. When you edit a business unit, you can select a theme for it.
If you update a theme for a specific business unit, the change affects the users who belong to that business unit. The change also affects any child business units that do not have their own theme specified. Child business units inherit the theme of their parent business unit. However, they can optionally override the inherited theme by specifying their own theme.
Step 2 - Create a Custom Theme
You create a custom theme by copying and modifying an existing theme. You can copy and modify either a predefined CA Service Catalog theme or another existing theme that you created earlier.
As a best practice, do
not
modify a predefined CA Service Catalog theme directly. Instead, copy and modify it, so that you can efficiently return to the original version, if necessary.
Always
back up the CSS files before editing them.
Follow these steps:
  1. Access the computer on which the filestore resides.
  2. Find and expand the USM_HOME folders. Expand the \filestore\themes folder. Review the organization of the predefined and custom themes in that folder.
    The name of each top-level folder is an option that you can select when you select a theme for a business unit.
  3. Copy the top-level folder of existing theme that you want to use as a starting point for your new theme.
  4. Rename the new theme.
    For example, suppose that the existing theme was named Rome_Super_Tenant_A. If the new theme is for a second super tenant, you can name it Rome_Super_Tenant_B. Conversely, if the new theme is for a new child business unit of the parent super tenant, you can name it Rome_Super_Tenant_A--Child-1.
  5. Add or edit the business unit for which you want to use this theme. In the Available Branding field, select the new theme that you created.
    For example:
    • To apply the theme to all business units that do not have their own theme, edit the root business unit and apply this theme.
    • To apply the theme to a specific business unit, add or edit the business unit and apply the theme.
      The theme also applies to all child business units that do not have their own theme.
  6. Change the new theme by editing its main.css file.
The new theme is ready for modifications.
Step 3 - Change the New Theme
After you have created a theme, you can change it, to give it a unique look-and-feel.
Follow these steps:
  1. Log in to CA Service Catalog and note the look-and-feel of the home page.
  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.
  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, perform the following actions:
    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.
    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.
  6. Update other elements of the theme to 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).