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

Policy for imprint and footer

Policy for imprint and footer design the footer of the login view. Here imprint contains a URL and footer a text string

../../_images/imprint.png
../../_images/footer.png
../../_images/ss-login.png

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.