• PhenixID Server installed.
• Version 2.x
• PhenixID Signing/Seal Service configured
  

The instructions in this document will help you customize Signing/Seal Service in PhenixID Server.

We will make changes to the files:

<PhenixIDinstallationdirectory>/config/phenix-store.json

<PhenixIDinstallationdirectory>/mods/com.phenixidentity~auth-http~<VERSION>/templates/login.template

<PhenixIDinstallationdirectory>/bin/start-PhenixID.sh (Linux)

<PhenixIDinstallationdirectory>/bin/*.vmoptions (Windows)

<PhenixIDinstallationdirectory>/mods/com.phenixidentity~auth-http~<VERSION>/web/res/lang/en/strings.xml

<PhenixIDinstallationdirectory>/mods/com.phenixidentity~phenix-prism-signingclient~<VERSION>/web/index.html

<PhenixIDinstallationdirectory>/mods/com.phenixidentity~phenix-prism-fedsigning~<VERSION>/web/index.html

So please make sure that you have a recent copy/backup of these files.

Changes to the configuration file phenix-store.json should be made using the configuration portal.

NOTE: Changes made to the files above are located in modules for the current version of PhenixID Server. Meaning that the customizations made, needs to be manually transferred to the new module version when upgrade is made (except for the file phenix-store.json).

We can make changes to the parts of the web page numbered above. Follow the steps below for the respective parts of the page. Remember to have a backup of the files being changed.

1. Logotype and 2. Background (please be aware that the instructions will apply to all auth http pages)

To change the logotype and background please edit the file:

<PhenixIDinstallationdirectory>/mods/com.phenixidentity~auth-http <VERSION>/templates/login.template

and add the following line after the other css links:

<link rel="stylesheet" href="/authenticate/res/css/yournew.css">

Use the example below and paste it into a new file called yournew.css. Then place this file in:

<PhenixIDinstallationdirectory>/mods/com.phenixidentity~auth-http~<VERSION>/web/res/css

/* Change logo
   Important, change to correct height and width for image
*/
.top .logo {
    display: block;
    float: left;
    background: url('../images/yourlogosmall.png');
    background-repeat: no-repeat;
    display: inline-block;
    height: 27px;
    width: 58px;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
/* Alternative 1: Remove background image */
body {
    background: none;
    background-color: green;
}
/* Alternative 2: Change background image*/
body {
    background-color: #eee;
    background: url('../images/yourbackgroundimage.png') no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

So the images (in red) that is referenced in the example should be copied into:

<PhenixIDinstallationdirectory>/mods/com.phenixidentity~auth-http~<VERSION>/web/res/images 

3. Choice of Language

To remove the possibility to choose language on the login page find the following line (phenix-store.json):

"allowLanguageChange" : "true"

on the AUTHENTICATOR used for Signing/Seal Service and set it to false.

To force the language, set the following parameter in the startup file:

Linux (start-PhenixID.sh), JAVA_OPTS="${JAVA_OPTS} -Dcom.phenixidentity.globals.defaultLanguage=en"

Windows (.vmoptions), -Dcom.phenixidentity.globals.defaultLanguage=en

4. Text

To change the text, locate the language file:

<PhenixIDinstallationdirectory>/mods/com.phenixidentity~auth-http~<VERSION>/web/res/lang/en/strings.xml

and customize the text according to your requirements.

5. "I am a human"

To remove this security checkbox, please follow this document:

http://document.phenixid.net/m/63284/l/683058-how-to-remove-the-security-checkbox-i-am-a-human

1. Logotype

To change the logotype please edit the file:

<PhenixIDinstallationdirectory>/mods/com.phenixidentity~phenix-prism-signingclient~<VERSION>/web/index.html

and add the following line after the other css link:

<link rel="stylesheet" href="{{moduleContext}}/css/logo.css">

Use the example below and paste it into a new file called logo.css.
Then place this file in:

<PhenixIDinstallationdirectory>/mods/com.phenixidentity~phenix-prism-signingclient~<VERSION>/web/css/logo.css

/* Change logo when logged in
   Important, change to correct height and width for image
*/
header.top .logo {
    background: url('../images/yourlogo.png');
    background-repeat: no-repeat;
    display: inline-block;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    vertical-align: middle;
    margin-right: 10px;
    height: 27px;
    width: 58px;
}

The image (in red) that is referenced in the example should be copied into:

<PhenixIDinstallationdirectory>/mods/com.phenixidentity~phenix-prism-signingclient~<VERSION>/web/images

2. Name

To change the name displayed on the page, go to the Advanced tab in the configuration portal, click the pen next to Modules and search for com.phenixidentity~phenix-prism-signingclient.
Change the value "display_name" : "PhenixID Document Signing/Seal" to reflect your text, for example "display_name" : "CompanyName Signing".

To change the name displayed for the web page, go to the Advanced tab in the configuration portal, click the pen next to Modules and find for the com.phenixidentity~phenix-prism module associated with the signing client module. Easiest way would be to search for the id of the signing module. Change the value for "display_name" : "PhenixID Document Signing/Seal" to desired text.

3. Text and background colours

To change the colours, please edit the file:

<PhenixIDinstallationdirectory>/mods/com.phenixidentity~phenix-prism-signingclient~<VERSION>/web/css/logo.css

Add the following text and change accordingly:

header.top .user .icon {
  color: red;
}
header.top a {
  color: red;
}
.tabs a {
  color: red;
}
.tabs a:hover, .tabs a:active, .tabs a:focus, .tabs .active {
  color: crimson;
}
header.top {
  background: gray;
}
.tabs.above {
    background: gray;
    border-top-color: gray;
}

To remove the possibility to change language when logged in, add the following line:

"enable_language": "false"

to the module com.phenixidentity~phenix-prism used for Signing/Seal, like this example:

{
    "name": "com.phenixidentity~phenix-prism",
    "enabled": "true",
    "config": {
         "base_url": "/sealapp",
         "auth_redirect_url": "/sealapp/authenticate/sealapp",
         "module_refs": "sealappmod",
         "display_name": "PhenixID Document Seal",
         "enable_language": "false"
         },
     "id": "sealapp"
}

Logotype can be changed in the same way as explained above, for Signing/Seal.

Changes will now be made to the file:
<PhenixIDinstallationdirectory>/mods/com.phenixidentity~phenix-prism-fedsigning~<VERSION>/web/index.html

And the configuration should be saved in:
<PhenixIDinstallationdirectory>/mods/com.phenixidentity~phenix-prism-fedsigning~<VERSION>/web/css/logo.css

Css file should look similar to this:

/* Change logo when logged in
   Important, change to correct height and width for image
*/
header.top .logo {
    background: url('../images/yourlogo.png');
    background-repeat: no-repeat;
    display: inline-block;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    vertical-align: middle;
    margin-right: 10px;
    height: 27px;
    width: 58px;
}
header.top .user .icon {
  color: red;
}
header.top a {
  color: red;
}
.tabs a:hover, .tabs a:active, .tabs a:focus, .tabs .active {
  color: crimson;
}
header.top {
  background: gray;
}
.tabs.above {
    background: gray;
    border-top-color: gray;
}

The image (in red) that is referenced in the example should be copied into:

<PhenixIDinstallationdirectory>/mods/com.phenixidentity~phenix-prism-fedsigning~<VERSION>/web/images

Image folder needs to be created.