A guide on how to customize the IdP login button color, icon and text.
By default the IdP login button looks like the one shown below:
Modify the file index.php file located in the webclient directory. Change the attribute values of the CSS classs btn-idp and btn-idp:hover.
The color of the login button.
Attribute | Description | Example Value | Example Value Description |
---|---|---|---|
color | button text color | #fff | white |
background-color | button color | #008000 | green |
border-color | button border color | #008000 | green |
The color of the login button when you move the mouse over it.
Attribute | Description | Example Value | Example Value Description |
---|---|---|---|
color | button text color | #000 | black |
background-color | button color | #90EE90 | light green |
border-color | button border color | #008000 | green |
The icon should be 16x16 pixel. For an example, below is 16x16 pixel icon file reindeer-deer-icon.png:
Add the icon to the directory assets/images of the webclient.
Modify the file i2b2_ui_config.js located in the directory js-i2b2 of the webclient. Change the value of the attribute loginIdpIcon to the relative location of the icon file.
i2b2.UI.cfg = {
...
loginIdpIcon: "assets/images/reindeer-deer-icon.png", /* Location of the 16x16 icon */
...
}
Modify the file i2b2_ui_config.js located in the directory js-i2b2 of the webclient. Change the value of the attribute loginIdp to the name of your IdP.
i2b2.UI.cfg = {
...
loginIdp: "Reindeer University", /* Text for federated login button */
...
}