Customizing › Custom Branding › Customization of the Login Page › Customize the Login Page

Customize the Login Page

As part of customizing your implementation, you can customize 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. Before you edit the logon.css file, verify that you meet the prerequisites for editing CSS files.

Follow these steps:

1. Open your web browser and access the login page for CA Service Catalog.

   For example, for the predefined CA _Technologies_r7 theme, before you make any customizations, the login page appears similar to the following:

   

2. Back up the %USM_HOME%\filestore\themes\common\css\logon.css file.

   Important! As a best practice, always 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;
   ...
   

5. Update the lines to match the look-and-feel specification you want, and save the file.

   For example, for the previous step, to change the color of the product name from the current color to blue, update the lines as follows:

   .loginproductname {
     text-align: left;
     font-family: CAlibri, Verdana, Arial, Helvetica, sans-serif;
     color: blue;
   ...
   

6. 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;
   ...
   

7. Update the lines to match the look-and-feel specification you want, and save the file.

   For example, consider the previous step. To change the background color of the login page to yellow and align the affected text to the right, update the lines as follows:

   .login_page {
     background-color: yellow;
     text-align: right;
   ...
   

8. Refresh your browser and verify your updates on the login page.

   For example, the following page reflects the customizations made in the previous steps. The product name is blue. The background color is yellow. The affected text is aligned on the right.

   

9. 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 customized the login page.