Customize HTTP authentication pages 4.x and later

Summary

This document will guide you through the steps to customize pages used during HTTP authentication. This document will be a generic document which will cover most authenticators. Note that some authenticator specific settings might not be covered.

Styling

Place your styling in the customer.css file which is located in <PAS-INSTALLATION-FOLDER>\overlay\auth-http\files\stylesheets.

Place a custom image file in <PAS-INSTALLATION-FOLDER>\overlay\auth-http\files\images, and configure the following css rule to use the logo.

/* Logo upper left corner */
header .logo {
  background: url("/overlay/images/custom-logo.svg");
  background-size: cover;
  margin: 15px auto 25px 0;
  height: 80px;
  width: 253px;
}
Click to copy

Color, right side of card (B)

Use the following css rule to set the color of the right side of the card.

/* Right side info card */
.info {
  background: #eeeeee;
  /* Text color */
  color: #393939;
}
Click to copy

Color of Button (C)

Use the following css rule to set the color of the button.

/* Button color */
.btn-primary {
   background: #19f207;
   color: #FFFFFF;
}
Click to copy

Background (D)

Use the following css rule to set a custom color and / or background image.

/* Body background and color, no image */
body {
  background-color: #f9f9f9;
}
@media (min-width: 600px) {
  body {
    background: none;
	background-color: #f9f9f9;
  }
}
Click to copy 
/* Body background and color, custom image*/
body {
  background-color: #f9f9f9;
}
@media (min-width: 600px) {
  body {
    background: url("/overlay/images/my-background.png") no-repeat center center fixed;
	background-color: #f9f9f9;
  }
}
Click to copy

Top bar (E)

Use the following css rule to set a custom color for the top bar

/* Header color */
header.top {
  background-color: #007BC8;
}
Click to copy

Selector

Use the following css rule to set a custom color for the selector components

/* Selector */
div.selector-container .content img {
  background-color: #007BC8;
}

div.selector-container .content .pull-left {
  background: #007BC8;
}
div.selector-container .content .pull-left:not([ref*="res/images/icons/"]) {
  background: #007BC8;
}

div.selector-container a:hover {
    border-radius: 4px;
    background: #007BC8;
}
Click to copy

Vertical bar, active input fied

Use the following css rule to set a custom color of the vertical bar on the active input field

/* vertical bar on the active text-field */
fieldset input:focus,
fieldset input:active {
  -webkit-box-shadow: inset 2px 0px 0px 0px #007BC8;
  box-shadow: inset 2px 0px 0px 0px #007BC8; }
Click to copy

Texts and translations (F)

All default texts are handled with the translation files as described in this document. 

All changes in texts / translations will require a restart of the service.

Find the string for which you would like a custom translation by searching in the default translation file located in mods/com.phenixidentity-auth-http~<version>. Copy the entire line and put it in overlay/auth-http/lang/xx/overlaystrings.xml, then customize the text.

Example:

<string name="login.messages.information.body">THIS IS A CUSTOM TEXT - To sign in, please type your username and password in the sign in form and click 'Sign in'.</string>
Click to copy

Configuration

Remove Change language menu (G)

Edit the authenticator in "advanced mode" in order to remove this menu. Add the following parameter to the authenticator:

"allowLanguageChange": "false"

Example:

{
    "alias": "uidpwdsaml",
    "name": "PostUidAndPasswordSAML",
    "configuration": {
        "idpID": "idp",
        "pipeID":"tokenPipe",
        "allowLanguageChange": "false"
}
Click to copy

Replace default image (H)

The PhenixID image will be shown for the authenticator if no other image is defined. Place your image in <PAS-INSTALLATION-FOLDER>\overlay\auth-http\files\images.

Edit the authenticator in "advanced mode" in order to configure image. Add the following parameter to the authenticator:

"icon": "/overlay/images/my-image.png"

Example

{
    "alias": "uidpwdsaml",
    "name": "PostUidAndPasswordSAML",
    "configuration": {
        "idpID": "idp",
        "pipeID":"tokenPipe",
        "icon": "/overlay/images/my-image.png"
}
Click to copy

Favicon

The PhenixID favicon will be shown for the authenticator if no other favicon is defined. Place your image in <PAS-INSTALLATION-FOLDER>\overlay\auth-http\files\images.

Edit the authenticator in "advanced mode" in order to configure favicon. Add the following parameter to the authenticator:

"favicon": "/overlay/images/my-favicon.ico"

Note: The favicon must NOT be called favicon.ico!

Example

{
    "alias": "uidpwdsaml",
    "name": "PostUidAndPasswordSAML",
    "configuration": {
        "idpID": "idp",
        "pipeID":"tokenPipe",
        "favicon": "/overlay/images/my-favicon.ico"
}
Click to copy