Customizing SSO user sign-on windows in PingFederate
You can customize the default single sign-on (SSO) end user sign-on window for PingFederate. For more information about customizable user-facing pages, see IdP user-facing pages in the PingFederate documentation.
Configuration instructions
Read the following sections for instructions specific to the configuration you are performing.
Formatting the default sign-on window template
Steps
-
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. -
Format the default sign-on window template.
-
Open the
html.form.login.template.html
.
This document contains the default sign-on window.
-
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.
-
-
Save the
html.form.login.template.html
file. -
If you changed the name of the
html.form.login.template.html
file, you must update it in the PingFederate administrative console.-
In the PingFederate administrative console, go to Authentication → Integration → IdP Adapters.
-
Click the adapter that you want to modify.
-
In the IdP Adapter tab, scroll to the bottom and click Show Advanced Fields.
-
In the Login Template field, enter the updated
html
login template. -
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
-
Open the
<pf_install>/pingfederate/server/default/conf/template/css/main.css
file. -
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.-
To locate the
html
rule set, open the file and search forhtml {
.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; }
-
Edit the CSS as desired.
-
-
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
-
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. -
Open the
<pf_install>/pingfederate/server/default/conf/template/assets/css/main.css
file. -
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.-
To locate the
html
rule set, open the file and search forhtml {
.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; }
-
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; }
-
-
Save the
main.css
file.Result:
The background image points to the
<pf_install>/pingfederate/server/default/conf/template/images/custombackground.png
file.