.. _banner_customization:

Theme Banner Customization
--------------------------

.. _12.5(1)|VOSS-346:
.. _18.1-Patch-Bundle-3|VOSS-346:


For Less files in general and how to update, compile and upload your theme, see:

* :ref:`download__edit_and_update_a_theme`
* :ref:`less_files_and_theme_customization`

To customize the look and feel of the banner text managed from the theme (see :ref:`set_the_login_page_theme`),
inspect the styles in ``skin.css`` that apply to the theme Site Title and Banner Text.
Both are marked up in HTML as ``<h1>``:

* Site Title: ``.login_page h1``
* Banner Text: ``h1.banner``

|h1-class-banner|

If a style is defined for the Site Title and there is no style override for the Banner Text,
then the Site Title style applies to the Banner Text. More generally, styles for ``h1`` apply.

For example, unless the ``h1.banner``
customization includes values for ``font-size`` and ``color``, the 
values of the variables in ``variables.less``: ``@loginBannerFontSize`` and ``@loginBannerFontColor``
will apply to the banner text.


In ``skin.less``, Banner Text style customization can for example include the following attributes, 


::

   h1.banner {
       color: 
       font-family:
       font-size: 
       font-weight: 
       line-height: 
       margin:
       margin-left: [use negative value to show text outside login form box] - see below]
       text-align: 
       text-shadow:
       width:
   }


For ``margin-left``, if you wish to center the banner, the negative margin and total width will have
to be calculated. The ``margin-left`` value should be the negative of: 

``(banner width - login form width)/2``

For example, if the username/password fields are ``400px`` wide (determine this with the browser developer tools),
and the banner width is set to ``800px``, then the ``margin-left`` of the banner should be: 

``(800px-400px)/2 = -200px``

Therefore, the ``skin.less`` file will contain:

::

  h1.banner{
    width: 800px;
    margin-left: -200px;
   ...
  }


.. |h1-class-banner| image:: /src/images/h1-class-banner.png