Customizing the Log in page

You can change the background image, the logo, and the name of the product for the Log in page.

About this task

The Log in page is defined by using an SQL update command, as follows: 

update cfconfig.system_props set value='
{
    "backgroundImage": "/myweb/images/login_background_1600x900.jpg", 
    "favIcon": "/myweb/images/favicon.png",
    "title": {"group": "mycfm", "key": "My Counter Fraud Management"},
    "logoAltText": {"group": "mycfm", "key": "mycfm"}, 
    "logoImage": "/myweb/images/favicon.png",
    "productName": {"group": "mycfm", "key": "My Counter Fraud Management"},
    "css": ["/ibm/cfm/theme/public/login/login.css", "/myweb/css/login.css", "<!--[if IE 11]><link rel=\"stylesheet\" href=\"/ibm/cfm/theme/public/login/login_ie11.css\" type=\"text/css\" media=\"screen, projection\"><![endif]-->"]
}
'
where stereotype='CF.UI.LoginPage';
backgroundImage
Specifies the background image to display behind the Log in dialog box. The recommended image size is 1600 pixels by 900 pixels.
favIcon
Specifies the image to display in Favorites (IE) or Bookmarks (Firefox) for the saved favorite or bookmark.
title
Specifies the title to display in Favorites (IE) or Bookmarks (Firefox) for the saved favorite or bookmark.
logoAltText
Specifies the text to display in a screen reader for the logo image.
logoImage
Specifies the image to display in the Log in page in place of the IBM logo.
productName
Specifies the image to display in the Log in page in place of "IBM Counter Fraud Management".
css
Specifies the CSS file that contains the styles for the Log in page. You can specify more than one CSS file. The default is the /ibm/cfm/theme/public/login/login.css file.

The properties for the logo that is displayed in the Log in page must be defined in a CSS file. Ensure that your custom /myweb/css/login.css file includes the following lines to display a 32 x 32 pixel logo:

.ioc_ui_login_container .ibmlogo {
	height: 32px;
	background-size: 32px 32px;

To hide the logo in the log in page, use the following lines instead:

.ioc_ui_login_container .ibmlogo {
      display: none;
      visibility: hidden;       }
Note: It is a best practice to package your custom SQL, CSS, and JSON in a web project and then deploy the EAR file to the ICFM profile in WebSphere® Application Server. After you deploy the EAR file, you must regenerate the HTTP plug-in. For more information, refer to your application development tool and WebSphere Application Server documentation.

Procedure

To customize the log in page:

  1. Create your logo and favorite images as needed.
  2. Edit your custom login.css file.
  3. Run the SQL update command.
  4. Deploy your custom EAR file to the ICFM profile in WebSphere Application Server.