3.5. Customization#

The LinOTP web components are based on stylesheets (CSS) and uses templates. You can change the appearance of the WebUI. We recommend that you do not change the default stylesheets when doing so, as an update could destroy your changes. You can define your own stylesheets for this purpose. These must contain only the changed sections, which should be overwritten in the standard stylesheet.

3.5.1. Custom LinOTP3 Selfservice#

Examples /selfservice:

The example shows:

how to customize the colors of the header and the buttons for the dark and light theme

use your own image for the logo for dark and light theme

add an imprint url and a footer via policy

If the changes are made as described here, they are retained when the software is updated.

Change color

nano /etc/linotp-selfservice/customization/custom-styles.css

 ...
 /* Use '.theme-dark' class for dark theme changes and '.theme-light' for light theme changes. */

 /* changing the background and font color of the toolbar for light theme */
 .theme-light mat-toolbar.mat-primary {
   background: #008B8B!important;
   color: white!important;
 }

 /* changing the background and font color of the toolbar for dark theme */
 .theme-dark mat-toolbar.mat-primary {
   background: #008B8B!important;
   color: white!important;
 }

 /* changing the background and font color of the raised and flat buttons for light theme */
 .theme-light .mat-mdc-raised-button.mat-primary,
 .theme-light .mat-mdc-unelevated-button.mat-primary {
   background: #008B8B!important;
   color: white!important;
 }

 /* changing the background and font color of the raised and flat buttons for dark theme */
 .theme-dark .mat-mdc-raised-button.mat-primary,
 .theme-dark .mat-mdc-unelevated-button.mat-primary {
   background: #008B8B!important;
   color: white!important;
 }
 ...

Change logo

The logo will be processed if it is named logo.png for light theme and logo-dark.png for dark theme. The files should be located under the specified path:

/etc/linotp-selfservice/customization/logo.png
/etc/linotp-selfservice/customization/logo-dark.png

Policies for footer text, imprint and privacy policy

It is possible to customize the footer through policies. The footer text can be set using the footer_text policy. Additionally, there is the option to include a link to an imprint page (https://…) or a resource such as a PDF file uploaded to the custom assets (/selfservice/en/assets/…). The imprint link can be specified via the imprint_url policy. Similarly, the privacy_policy_url policy can be used to define a link to a privacy policy page or resource.

3.5.2. Style Sheets - LinOTP3#

The style sheets can be used among other things to change the logo as described in the next chapter and are located in the following directorys:

Style sheet for manage and selfservice-legacy corresponding to LinOTP2
Style sheet for selfservice from LinOTP3

# style sheet for manage and selfservice-legacy
/usr/lib/python3/dist-packages/linotp/public
# style sheet for selfservice
/usr/share/linotp-selfservice/dist/en/assets
/usr/share/linotp-selfservice/dist/de/assets

The default stylesheets are:

/usr/lib/python3/dist-packages/linotp/public/manage/style.css
/usr/lib/python3/dist-packages/linotp/public/selfservice/style.css
# for assets currently only color matching is supported
/usr/share/linotp-selfservice/dist/en/assets/custom-styles.css
/usr/share/linotp-selfservice/dist/de/assets/custom-styles.css

The following files can be create to overrule the default style sheets. They are applied on top of the default style sheets. It is recommended to include only required changes in the custom files:

/etc/linotp/custom-style/selfservice-style.css
/etc/linotp/custom-style/manage-style.css
/etc/linotp-selfservice/customization/custom-styles.css

After changing the style sheets the Pylons cache needs too be emptied and it is not necessary to restart the web server.

3.5.3. Changing the Logo#

It is easy to change the logos on the /manage and on the /selfservice-legacy portal.

The LinOTP logo is defined as a background image of the div #logo (/selfservice) or #header #logo (/manage).

Note

Please setup the custom style sheets as described in the previous chapter before following the next steps.

These stylesheets need to be modified:

/etc/linotp/custom-style/selfservice-style.css
/etc/linotp/custom-style/manage-style.css

There is the id definition #logo (/selfservice) or #header #logo (/manage) which points to the corresponding image file at /usr/lib/python3/dist-packages/linotp/public/images/.

Transfer the new logo file to the correct position:

mkdir /etc/linotp/custom-style/images
cp /root/<IMAGE.PNG> /etc/linotp/custom-style/images/

Tip

The /etc/linotp/custom-style/ directory can be referenced with /custom in the CSS files.

Example /manage:

nano /etc/linotp/custom-style/manage-style.css

 #header #logo {
   background-image: url(/static/custom/images/logo.png);
   background-size: contain;
 }

Example /selfservice-legacy:

nano /etc/linotp/custom-style/selfservice-style.css

 #logo{
   background-image: url(/static/custom/images/logo.png);
   background-size: contain;
 }

The background-size: contain parameter fits the image in the correct size.

Customization

Contents

3.5. Customization#

3.5.1. Custom LinOTP3 Selfservice#

3.5.2. Style Sheets - LinOTP3#

3.5.3. Changing the Logo#