--- title: Customizing SSO user sign-on windows in PingFederate description: 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: solution-guides page_id: solution-guides:customer_use_cases:htg_customize_sso_user_sign_on_windows_pf canonical_url: https://docs.pingidentity.com/solution-guides/customer_use_cases/htg_customize_sso_user_sign_on_windows_pf.html revdate: April 13, 2025 page_aliases: ["customer_use_cases:htg_customize_sso_user_sign_on_windows_pf_default_template.adoc", "customer_use_cases:htg_customize_sso_user_sign_on_windows_pf_custom_css.adoc", "customer_use_cases:htg_customize_sso_user_sign_on_windows_pf_custom_background.adoc"] section_ids: component: Component configuration-instructions: Configuration instructions formatting-the-default-sign-on-window-template: Formatting the default sign-on window template steps: Steps using-css-to-customize-sso-user-sign-on-windows-in-pingfederate: Using CSS to customize SSO user sign-on windows in PingFederate about-this-task: About this task steps-2: Steps example: Example: setting-up-a-custom-background-for-the-sso-user-sign-on-window-in-pingfederate: Setting up a custom background for the SSO user sign-on window in PingFederate about-this-task-2: About this task steps-3: Steps example-2: Example: result: Result: --- # 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](https://docs.pingidentity.com/pingfederate/latest/administrators_reference_guide/pf_idp_user_facing_pages.html) 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 `/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. 2. 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 `/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: ```css 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 `/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 `/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: ```css 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. ```css 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 `/pingfederate/server/default/conf/template/images/custombackground.png` file.