.. _self-service_theme_customization:


Customize the Self-service Theme
----------------------------------

.. _12.5(1)|VOSS-346:
.. _18.1-Patch-Bundle-3|VOSS-346:
.. _19.2.1|VOSS-573|EKB-3064:

This section provides steps to customize and add a Self-Service theme from within the legacy Admin Portal.


Customize an Existing Self-service Theme 
..........................................

To customize an existing Self-service theme:

1. Log in to the legacy Admin Portal. 
#. Choose the hierarchy level at which the theme will be applied. 

   .. note:: 
      
      Themes can only be customized by a Provider Administrator (or higher).

#. Go to (default menus) **Role Management > Themes** to open the **Themes** list view.

#. Click the Self-service theme you wish to download.
#. Click **Action > Download**. The file is exported in a .zip archive. 

   .. note:: 
      
      The file is exported with the name of the theme. The archive
      contains a folder and a ``.css`` file with the theme name in it,
      for example ``voss_selfservice.zip``  contains ``voss_selfservice/voss_selfservice.css``.

#. Modify the ``.css`` file, for example ``voss_selfservice.css``.
   Use your browser to inspect the elements of
   the theme on the GUI that you wish to customize.

#. When editing is complete, ensure the directory folder name is the same as your
   theme name. Compress the folder and save the file with the theme name and a
   ``.zip`` file extension. 

   .. note:: 
      
      An error message will display on the user interface if the file does not have
      a valid file extension.
   
#. Upload the edited file: 

   a. Go to **Role Management > Themes** and click on the theme to open it's editing screen. 
   #. If this file theme contains an update, browse to locate the file. 

      .. note:: 

         If a theme update does not require an updated CSS in a zip file but only
         updates the text of the theme, then no file upload is required. See also :ref:`add_a_theme`.
   
   #. Optionally, select **Backup Enabled** to create a backup of the 
      current theme on the server.
   #. From the **Interface** drop-down, choose **Self Service**.
   #. Click **Save**. The file is imported.  

      
   
Add a Self-service Theme
..........................

The preferred method to add a new Self-service theme is to downloading an existing
theme to maintain directory structure and file naming conventions.

To add a new Self-service theme to the system:

1. Log in to the legacy Admin Portal. 
#. Choose the hierarchy level at which the theme will be created.
#. Go to **Role Management > Themes** to open the **Themes** list view.
#. Click **Add** to open the **Themes** page. 

   .. note:: 
      
      Themes can only be customized by a Provider Administrator (or higher).

#. Enter the **Theme Name** (same as the file name created above).
#. Enter an appropriate **Site Title** if required. The site title entered here
   is the title displayed in the browser tab.
#. Browse to locate the theme zip file you wish to import. Wait until the system displays 
   the file in the **Import File** field.
#. If the theme must also apply to the login page, select **Use this Theme to style Login page**. 
#. To set login banner text and notices on the login page, refer to :ref:`set_the_login_page_theme`.
   
   .. note:: 
      
      The **Use this Theme to style Login page** check box does not have to be enabled
      
      for banner text to show.
#. From the **Interface** drop-down, select **Self Service**.
#. Click **Save**.


Customize the Self-service Banner Style
..........................................

To customize the Self-service banner style, find the element ``.banner-text``
in the CSS file and customize it, for example:

::

   .banner-text {
       background-color: #515150;
       color: #FFFFFF;
   }


Customize Self-service Theme for Minimal Mode
...............................................

This section describes the options for customizing the Self-service theme to support minimal mode.


.. important::

   If your theme uses a dark colors, the minimal theme may need
   to be modified to provide a contrasting text and background
   display.


.. rubric:: Examples of minimal mode image snippets and theme settings

.. image:: /src/images/minimal-theme-white-dark.png

::

.minimal-mode-container {color: white;}
.minimal-mode-container .overlay {background-color: #2e2e2e!important;}

* resized logo (``<number>`` variable)
* resized tagline (``<number>`` variable)

.. image:: /src/images/minimal-theme-icon-tagline.png


::

.logo-holder-header {padding: <number>px <number>px;}
.ss-tagline {height: <number>px; width: <number>px;}

* contrasting drop-down menu items and text

.. image:: /src/images/minimal-theme-menu-list.png

::

.minimal-mode-menu ul {background: #3e3e3e;}
.minimal-mode-menu ul li {border-bottom: 1px solid #2e2e2e;}
.minimal-mode-menu ul li > a {color: white;}