Style sheets

All default css files are located in: mods/com.phenixidentity-auth-http~<version>/web/res/stylesheets/templates. These are not to be changed since they get overwritten during an update of the server.

The recommended way to change/override css is to find the corresponding css file in: overlay/auth-http/files/stylesheets folder and add the customization there. This will override the default css.

The overlay css can be configured on all authenticators by adding the parameter: overlayCSS and the file path to your css file. The default value is '/overlay/stylesheets/customer.css'.

All changes in css files will require a restart of the service


NOTE for PAS 5.0 and later: 
- Starting from PAS 5.0 version and up, the recommended way to change/override is through using "modsoverlay" folder instead of "overlay" folder. See here for more info
- Instructions above, and below, apply but by using same paths in the modsoverlay folder.

How to use

Best practice is to copy the css element from the original css to the corresponding css in the overlay/auth-http/files/stylesheets folder and start from there.

Example when referring to a custom css file 

	{
		"id": "a63f7df0-ecd5-4137-85c4-e57c2c172a1f",
		"alias": "uidsms",
		"name": "PostUidPasswordAndOTPSAML",
		"displayName": "One Time Password",
		"configuration": {
			"userValidationPipeID": "618f058f-3584-49c1-9ea6-adeef0c7ff6f",
			"otpValidationPipeID": "4595cc84-239f-4866-b2f6-b9336c389e64",
			"idpID": "ea892600-3608-4c3d-93ad-eed7fe9a63d7",
			"loginTemplate": "ot_login",
			"translationKey": "login.messages.information.ot.body",
			"otp": "otp",
			"overlayCSS": "/overlay/stylesheets/login.css"
		}
    }
Click to copy

Regarding images and other references in css

Customized images (and other files) can be referenced in the css with the base path: /overlay/

/overlay/ points to the overlay/auth-http/files folder. You can add subfolders to your liking.

Registration authenticator

The registration authenticator has a special way to handle references.

In environments where the registration authenticator is being used, custom files has to be referenced as always with templateVariables. Read more in the documentation for Registration.

Example:

"templateVariables": {
	"overlayCSS": "/overlay/stylesheets/customer.css"
}
Click to copy

Logout

The PAS logout uri (/your-prefix/authenticate/logout/) can also be customized. /logout/ is always availible in a PAS server and have no specific "authenticator configuration".

In order to override the default settings it will have to be configured in the "com.phenixidentity~auth-http" module, which is to be found in boot.json.

Example:

"overlayCSS" : "/overlay/stylesheets/mycustom.css",
"favicon" : "/authenticate/res/myfavicon.ico",
Click to copy

Default value:

"overlayCSS" : "/overlay/stylesheets/customer.css",
"favicon" : "/authenticate/res/favicon.ico",
Click to copy