.. _reference-admin-gui-theme-customization-colors: Theme Element Color References for the Admin Portal ------------------------------------------------------------- .. _21.4-PB1|EKB-14237: .. note:: * Color selection on the **Branding** tab of a theme *always* affects the Admin Portal. To edit and manage theme files: .. raw:: latex Refer to Less files and Theme Customization in the Advanced Configuration Guide. .. raw:: html

Refer to Less files and Theme Customization

* Color selection is optional. Where no colors are selected, defaults apply. * If manual input of color Hex values is required, ensure the value is prefixed with ``#``. Admin Portal Default Colors ....................................... Default Color Reference Table: .. tabularcolumns:: |p{3cm}|p{4cm}|p{2cm}|p{6cm}| +---------------------------------+-----------------------------------+---------------------+-------------------------------------------------------------------------------------------------------------+ | Title | Field Name | Default Value (Hex) | Notes | +=================================+===================================+=====================+=============================================================================================================+ | Primary Color | primary_colour | #000046 | This is the background color for most menus and headers, as well as the text color for links and buttons. | +---------------------------------+-----------------------------------+---------------------+-------------------------------------------------------------------------------------------------------------+ | Primary Text Color | primary_text_colour | #ffffff | This is the text color for anything with the primary color background. | +---------------------------------+-----------------------------------+---------------------+-------------------------------------------------------------------------------------------------------------+ | Accent Color | accent_colour | #007fb0 | This color is used when attention needs to be drawn for important notifications or active buttons and text. | +---------------------------------+-----------------------------------+---------------------+-------------------------------------------------------------------------------------------------------------+ | Accent Text Color | accent_text_colour | #ffffff | This is the text color for anything with the accent color background. | +---------------------------------+-----------------------------------+---------------------+-------------------------------------------------------------------------------------------------------------+ | Topbar Color | topbar_colour | #000046 | The color used for the top bar of the site. Will use the primary color if no value is given. | +---------------------------------+-----------------------------------+---------------------+-------------------------------------------------------------------------------------------------------------+ | Topbar Text Color | topbar_text_colour | #ffffff | This is the text color for the top bar. Will use the primary text color if no value is given. | +---------------------------------+-----------------------------------+---------------------+-------------------------------------------------------------------------------------------------------------+ | Menu Color | menu_colour | #000046 | The color used for the menu on the left. Will use the primary color if no value is given. | +---------------------------------+-----------------------------------+---------------------+-------------------------------------------------------------------------------------------------------------+ | Menu Text Color | menu_text_colour | #ffffff | This is the text color for the menu. Will use the primary text color if no value is given. | +---------------------------------+-----------------------------------+---------------------+-------------------------------------------------------------------------------------------------------------+ | Panel Color | panel_colour | #f2f2f2 | The color used for all the panels in the app. | +---------------------------------+-----------------------------------+---------------------+-------------------------------------------------------------------------------------------------------------+ .. tabularcolumns:: |p{3cm}|p{4cm}|p{2cm}|p{6cm}| +---------------------------------+----------------------------------+---------------------+---------------------------------------------------------------------------------------+ | Title | Field Name | Default Value (Hex) | Notes | +=================================+==================================+=====================+=======================================================================================+ | Panel Text Color | panel_text_colour | #000000 | This is the text color for normal text in the app. | +---------------------------------+----------------------------------+---------------------+---------------------------------------------------------------------------------------+ | Input Color | input_colour | #ffffff | The background color for input fields. Will use the panel color if no value is given. | +---------------------------------+----------------------------------+---------------------+---------------------------------------------------------------------------------------+ | Input Text Color | input_text_colour | #414042 | The text color for input fields. Will use the panel text color if no value is given. | +---------------------------------+----------------------------------+---------------------+---------------------------------------------------------------------------------------+ | Background Color | background_color | #e6e7e8 | The color of the background behind panels. | +---------------------------------+----------------------------------+---------------------+---------------------------------------------------------------------------------------+ | Info Notification Color | info_notification_colour | #00ade5 | The color used for info notifications. | +---------------------------------+----------------------------------+---------------------+---------------------------------------------------------------------------------------+ | Info Notification Text Color | info_notification_text_colour | #ffffff | This is the text color for info notifications. | +---------------------------------+----------------------------------+---------------------+---------------------------------------------------------------------------------------+ | Success Notification Color | success_notification_colour | #68bd17 | The color used for success notifications. | +---------------------------------+----------------------------------+---------------------+---------------------------------------------------------------------------------------+ | Success Notification Text Color | success_notification_text_colour | #ffffff | This is the text color for success notifications. | +---------------------------------+----------------------------------+---------------------+---------------------------------------------------------------------------------------+ | Warning Notification Color | warn_notification_colour | #fbc403 | The color used for warning notifications. | +---------------------------------+----------------------------------+---------------------+---------------------------------------------------------------------------------------+ | Warning Notification Text Color | warn_notification_text_colour | #000000 | This is the text color for warning notifications. | +---------------------------------+----------------------------------+---------------------+---------------------------------------------------------------------------------------+ | Error Notification Color | error_notification_colour | #dc0c00 | The color used for error notifications. | +---------------------------------+----------------------------------+---------------------+---------------------------------------------------------------------------------------+ | Error Notification Text Color | error_notification_text_colour | #ffffff | This is the text color for error notifications. | +---------------------------------+----------------------------------+---------------------+---------------------------------------------------------------------------------------+ On the Admin Portal, consider the color selection on the **Branding** tab: |branding-theme| .. note:: * For details on images and logos, see: :ref:`create-theme-in-BAP`. * If a color value appears blank, default values apply. * Sub-menu and sub-sub-menu backgrounds are rendered as percentages of the Menu Color. Admin Portal ............. |new-admin-theme-0| |new-admin-theme-1| |new-admin-theme-2| .. |branding-theme-legacy| image:: /src/images/branding-theme-legacy.png .. |branding-theme| image:: /src/images/branding-theme.png .. |legacy-admin-theme-0| image:: /src/images/legacy-admin-theme-0.png .. |legacy-admin-theme-1| image:: /src/images/legacy-admin-theme-1.png .. |legacy-admin-theme-2| image:: /src/images/legacy-admin-theme-2.png .. |new-admin-theme-0| image:: /src/images/new-admin-theme-0.png .. |new-admin-theme-1| image:: /src/images/new-admin-theme-1.png .. |new-admin-theme-2| image:: /src/images/new-admin-theme-2.png