6. Customization

LinOTP web components are based on templates and CSS. You may change the look and feel of the WebUI but we recommend not to change the default templates and style sheets, as an update may destroy your changes. Therefor custom templates and style sheets can be defined.

6.1. Templates

The place where the custom templates are read from can be defined in /etc/linotp2/linotp.ini in the section [app:main]:

custom_templates = /etc/linotp2/custom-templates/

All templates will be searched in this directory. If the template does not exist here, the default template is used - usually from:

/usr/share/pyshared/linotp/templates/

To modify the look and feel, copy the template from the default location to this custom location and keep the structure of the sub directories.

cp -rL /usr/share/pyshared/linotp/templates/* /etc/linotp2/custom-templates/

After changing the custom templates the Pylons cache needs too be emptied and it is necessary to restart the web server:

rm -rf /etc/linotp2/data/*
service apache2 restart

6.2. Style Sheets

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 directory:

/usr/share/pyshared/linotp/public/

The default stylesheets are:

/usr/share/pyshared/linotp/public/manage/style.css
/usr/share/pyshared/linotp/public/selfservice/style.css
/usr/share/pyshared/linotp/public/openid/style.css

The following files can be create to overrule the default style sheets. Creating these new files (just copy the original .css files), will avoid the changes from being overwritten in case of a system update:

cp /usr/share/pyshared/linotp/public/manage/style.css \
/usr/share/pyshared/linotp/public/manage/custom-style.css

cp /usr/share/pyshared/linotp/public/selfservice/style.css \
/usr/share/pyshared/linotp/public/selfservice/custom-style.css

cp /usr/share/pyshared/linotp/public/openid/style.css \
/usr/share/pyshared/linotp/public/openid/custom-style.css

Some additional soft links must be set:

ln -s /usr/share/pyshared/linotp/public/manage/custom-style.css \
/usr/lib/pymodules/python2.7/linotp/public/manage/

ln -s /usr/share/pyshared/linotp/public/selfservice/custom-style.css \
/usr/lib/pymodules/python2.7/linotp/public/selfservice/

ln -s /usr/share/pyshared/linotp/public/openid/custom-style.css \
/usr/lib/pymodules/python2.7/linotp/public/openid/

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

rm -rf /etc/linotp2/data/*
service apache2 restart

6.3. Changing the Logo

It is easy to change the logos on the /manage and on the /selfservice 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:

/usr/lib/pymodules/python2.7/linotp/public/manage/custom-style.css
/usr/lib/pymodules/python2.7/linotp/public/selfservice/custom-style.css

There is the id definition #logo (/selfservice) or #header #logo (/manage) which points to the corresponding image file at /usr/share/pyshared/linotp/public/images/.

Transfer the new logo file to the correct position and set required link:

cp /root/<IMAGE.PNG> /usr/share/pyshared/linotp/public/images/

ln -s /usr/share/pyshared/linotp/public/images/<IMAGE.PNG> \
/usr/lib/pymodules/python2.7/linotp/public/images

Example /manage:

nano /usr/share/pyshared/linotp/public/manage/custom-style.css

 #header #logo {
   background-image: url(/images/linotp_logo_103x35.png);

Example /selfservice:

nano /usr/share/pyshared/linotp/public/selfservice/custom-style.css

 #logo{
    background-image:  url(/images/linotp_logo_103x35.png);
    background-repeat: no-repeat;
    background-position:center;
    display: block;
    height: 50px;
    width: 110px;
 }