.. _customization:

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 you can define custom templates and style sheets.

Templates
~~~~~~~~~

In the file linotp.ini you can define a variable::

   custom_templates = /etc/linotp2/custom-templates/

in the section ``[app:main]``. All templates will be searched in this directory. If the template does
not exist in this custom directory, the default template is used – usually from::

   /usr/share/pyshared/linotp/templates.

So if you want 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.
When you changed the custom templates you need to empty the Pylons cache::

   rm /etc/linotp2/data/* -fr
   /etc/init.d/apache2 restart

Style Sheets
~~~~~~~~~~~~

The style sheets are located at ``/usr/lib/pymodules/python2.6/linotp/public/``.
The default styles sheets are located at::

   linotp/public/manage/style.css
   linotp/public/selfservice/style.css
   linotp/public/openid/style.css

You can create the following files to overwrite the default style sheets. Creating these new files,
will avoid the changes from being overwritten in case of a system update::

   linotp/public/manage/custom-style.css
   linotp/public/selfservice/custom-style.css
   linotp/public/openid/custom-style.css

Changing the Logo
~~~~~~~~~~~~~~~~~
On the ``/manage`` and on the ``/selfservice`` portal you can change the logos easily.
The LinOTP logo is defined as a background image of the div ``#logo``. Take a look at the style
sheets ``/usr/lib/pymodules/python2.6/linotp/public/manage/style.css`` and
``/usr/lib/pymodules/python2.6/linotp/public/selfservice/style.css``. There is the id
definition ``#logo`` which points the the corresponding image file at
``/usr/lib/pymodules/python2.6/linotp/public/images/``. Change the style.css to your custom-
style.css and drop in a new image.