Use Cases

Customizing SSO user sign-on windows in PingFederate

You can customize the default single sign-on (SSO) end user sign-on window for PingFederate. Learn more about customizable user-facing pages in IdP user-facing pages in the PingFederate documentation.

Component

PingFederate 10.1 and later

Configuration instructions

Read the following sections for instructions specific to the configuration you are performing.

Formatting the default sign-on window template

Steps

  1. To view the various HTML files that PingFederate presents to the end user, in your PingFederate server open the <pf_install>/pingfederate/server/default/conf/template folder.

  2. Format the default sign-on window template.

    1. Open the html.form.login.template.html.

    This document contains the default sign-on window.

    1. Customize the content of the sign-on window.

      The html.form.login.template.html file contains information in comments to assist you in customizing the content of the web page.

      Remember to save a backup or copy of the file before editing.

  3. Save the html.form.login.template.html file.

  4. If you changed the name of the html.form.login.template.html file, you must update it in the PingFederate administrative console.

    1. In the PingFederate administrative console, go to Authentication > Integration > IdP Adapters.

    2. Click the adapter that you want to modify.

    3. On the IdP Adapter tab, scroll to the bottom and click Show Advanced Fields.

    4. In the Login Template field, enter the updated html login template.

    5. Save your changes.

Using CSS to customize SSO user sign-on windows in PingFederate

Edit the CSS in the main.css directory file to set up a custom background for your single sign-on (SSO) end user sign-on window in PingFederate.

About this task

If you are familiar with CSS, you can edit the main.css directory file to customize the background of your PingFederate SSO sign-on window as desired.

If you are running PingFederate in a cluster, you must make these changes on each runtime node.

Steps

  1. Open the <pf_install>/pingfederate/server/default/conf/template/css/main.css file.

  2. Edit the main.css file.

    Remember to create a copy or backup of the main.css file in case you need to revert to the default settings.

    1. To locate the html rule set, open the file and search for html {.

      Example:

      html {
  height: 100%;
  background-color: #f7f7f7;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-color: #3d454d;
  background-color: rgba(61, 69, 77, 0.9) \9;
  /*IE9 hack */
  background-image: radial-gradient(40% 40%, circle cover, rgba(61, 69, 77, 0.9) 30%, #3d454d 80%);
  background-image: -o-radial-gradient(40% 40%, circle cover, rgba(61, 69, 77, 0.9) 30%, #3d454d 80%);
  background-image: -ms-radial-gradient(40% 40%, circle cover, rgba(61, 69, 77, 0.9) 30%, #3d454d 80%);
  background-image: -moz-radial-gradient(40% 40%, circle cover, rgba(61, 69, 77, 0.9) 30%, #3d454d 80%);
  background-image: -webkit-radial-gradient(40% 40%, circle cover, rgba(61, 69, 77, 0.9) 30%, #3d454d 80%);
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

    2. Edit the CSS as desired.

  3. Save the main.css file.

Setting up a custom background for the SSO user sign-on window in PingFederate

Edit the main.css directory file to set up a custom background for your single sign-on (SSO) end user sign-on window in PingFederate.

About this task

This procedure is applicable for PingFederate 8.4.x and later.

If you are unfamiliar with CSS, you can use this workaround to edit the main.css file in the PingFederate directory server. Perform the following changes to specify the desired PingFederate server image file for your custom background.

If you are running PingFederate in a cluster, you must make these changes on each runtime node.

Steps

  1. Select the image you want to use as a custom background and save it as <pf_install>/pingfederate/server/default/conf/template/images/custombackground.png.

    To update the image later, repeat step 1 or update the filepath in the main.css file to point to a different image.

  2. Open the <pf_install>/pingfederate/server/default/conf/template/assets/css/main.css file.

  3. Edit the main.css file.

    Remember to create a copy or backup of the main.css file in case you need to revert to the default settings.

    1. To locate the html rule set, open the file and search for html {.

      Example:

      html {
  height: 100%;
  background-color: #f7f7f7;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-color: #3d454d;
  background-color: rgba(61, 69, 77, 0.9) \9;
  /*IE9 hack */
  background-image: radial-gradient(40% 40%, circle cover, rgba(61, 69, 77, 0.9) 30%, #3d454d 80%);
  background-image: -o-radial-gradient(40% 40%, circle cover, rgba(61, 69, 77, 0.9) 30%, #3d454d 80%);
  background-image: -ms-radial-gradient(40% 40%, circle cover, rgba(61, 69, 77, 0.9) 30%, #3d454d 80%);
  background-image: -moz-radial-gradient(40% 40%, circle cover, rgba(61, 69, 77, 0.9) 30%, #3d454d 80%);
  background-image: -webkit-radial-gradient(40% 40%, circle cover, rgba(61, 69, 77, 0.9) 30%, #3d454d 80%);
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

    2. Replace the declaration block for the html rule set with the following declaration block.

      html {
  height: 100%;
  background-color: #f7f7f7;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-image: url(../images/custombackground.png);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
}

  4. Save the main.css file.

    Result:

    The background image points to the <pf_install>/pingfederate/server/default/conf/template/images/custombackground.png file.