Modify the Login Page

You can modify the login page, as follows:
casm173
You can modify the login page, as follows:
You can modify the login page
without
changing the theme for one or more business units. The same login page applies to all users, regardless of whether you have changed any theme. This separation provides greater flexibility to your organization. This separation also enables you to update the login page alone more quickly and efficiently.
As an administrator, ensure that you have expertise in the following areas before modifying the login page:
  • UI design, especially look-and-feel elements
  • Standard specifications for CSS files
  • Customization of the CSS files, using a CSS file editor for your web browser
Predefined Login Page
The following table lists the elements of the login page that you can customize, except for the login logo. When applicable, each row lists the section of the login.css file that affects the look-and-feel of the element.
GUI Element
File Location under USM_HOME*
Section in Logon.css File
Text for the browser window title and title bar
view\webapps\usm\locale\icusen\logon.xml
.loginpage
Text for product name
view\webapps\usm\locale\icusen\logon.xml
.loginproductname
Login input text
view\webapps\usm\locale\icusen\logon.xml
Note:
This text supplies the User Name, Password, and Advanced-Business Unit fields.
.logininputtext
Copyright text and date
view\webapps\usm\locale\icusen\logon.xml
.loginpagecopyright
USM_HOME is the documentation convention that specifies the local CA Service Catalog installation directory. For 32-bit computers, the default path name is C:\Program Files\CA\Service Catalog. For 64-bit computers, the default path name is C:\Program Files (x86)\CA\Service Catalog for 32-bit installations or C:\Program Files\CA\Service Catalog for 64-bit installations.
The favorites icon appears in the browser address bar and the product title bar of every product page, including the login page. The favorites icon is a global page element that you can modify.
For the Text elements, the File Name column displays the folder location for an English system (icusen). For other languages, the location is different.
Edit the logon.css file
Modify the look-and-feel of the login page to reinforce branding or other messaging. The same login page applies to all users, regardless of business unit that they are logging in to.
Follow these steps:
  1. Open your web browser and access the login page for CA Service Catalog.
  2. Back up the USM_HOME\filestore\themes\common\css\logon.css file.
    A
    lways
    back up CSS files and other configuration files before editing them.
  3. Open the file, using the 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 configure the look-and-feel of the product name, find the following line:
    .loginproductname { text-align: left; font-family: CAlibri, Verdana, Arial, Helvetica, sans-serif; color: #ffffff; ...
    To change the color of the product name from the current color to blue, update the lines:
    .loginproductname { text-align: left; font-family: CAlibri, Verdana, Arial, Helvetica, sans-serif; color: blue; ...
  5. Repeat the previous step for other look-and-feel changes that you want to make.
    For example, to configure the background color of the login page, find the following lines:
    .login_page { background-color: #00174A; text-align: center; ...
    To change the background color of the login page to yellow and align the affected text to the right, update the lines:
    .login_page { background-color: yellow; text-align: right; ...
  6. Refresh your browser and verify your updates on the login page.
  7. Update the elements of the login page to meet your requirements. Verify each change by saving the file and refreshing the login page.
You have modified the login page.