.. _self-service_theme_customization: Self-service Theme Customization on the Legacy Admin Portal ----------------------------------------------------------- .. _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. To customize an existing Self-service theme: 1. Choose the hierarchy level at which the theme will be applied. Note that themes can only be customized by a Provider Administrator (or higher). #. Choose **Role Management > Themes** to open the **Themes** list view. #. Click the Self-service theme that you want to download. #. Click **Action > Download** on the button bar to download the theme. The exported file is a .zip archive 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, make sure 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. An error message will display on the user interface if the file does not have a valid file extension. #. Return to **Role Management > Themes**: a. For an update, select the theme name and click **Browse** next to **Import File**, and then open the same theme name. Optionally select the **Backup Enabled** check box to create a backup of the current theme on the server. Ensure the **Interface** is set to "Self Service". Click **Save** to complete the import process. 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. For information about the other fields on this form, refer to :ref:`add_a_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. Choose the hierarchy level at which the theme will be created. #. Choose **Role Management > Themes** to open the **Themes** list view. #. Click **Add** on the button bar to open the **Themes** input form. Note that 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. #. Click the **Browse** button to import the created theme zip file. Wait until the system displays the file chosen in the **Import File** field. #. If the theme must also apply to the login page, select the **Use this Theme to style Login page** check box. #. To set login banner text and notices on the login page, refer to :ref:`set_the_login_page_theme`. The **Use this Theme to style Login page** check box does not have to be enabled for banner text to show. #. Ensure the **Interface** is set to "Self Service". #. Click **Save** on the button bar when complete. 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; } Minimal Theme Customization ........................... In order to customize the Self-service theme to support the minimal mode, the elements below are available. .. important:: If your theme uses a dark colors, the minimal theme may need to be modified to provide a contrasting text and background display. The examples below are 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;}