Prior to customizing a site's theme, a user's security role must have screen security rights to <System Theme Builder> and/or <Company Theme Builder> in order to access the associated screens.
Themes can be created at a system and company level. Type "theme builder" in the global search box and click on the appropriate screen name.
Click
to create a new theme.
To edit an existing theme, click on
.
Note that only one system theme can be active at a time, along with one system portal theme. If no active custom themes exist then the Equus Platform GROW Default Theme is used.
To create a new theme, enter a theme Name, select a Theme Type, and select a theme to copy from by selecting a value from the Copy Theme drop-down list.
The new theme will copy all colors and logos from the selected copy theme.
Click
to customize the theme.
|
Once created, customize the theme by selecting the desired theme settings. By default, when a theme is newly created, the new theme is set to inactive.
Inactive: when unchecked sets the theme to the active theme.
Name: A descriptive name to uniquely identify each theme.
Portal Only: If selected the theme will only appear for external portal users of companies with no company theme. Note: This does not apply to the Mobile Employee Experience or Landing Experience. Click here for details on how to configure the theme.
Primary Logo: The primary logo appears on the top left of all pages and on the sign-in page. It is recommended logos are no larger than 40px tall and up to 350px wide when possible. To upload a file select browse and find the desired file.
Secondary Logo (Company Themes Only): The secondary logo is an optional logo available for company themes only, allowing for both a system and company specific logo. If a secondary logo is added it will appear to the right of the primary logo on companies portal pages. It is recommended logos are no larger than 40px tall and up to 350px wide when possible. To upload a file select browse and find the desired file.
Favicon: The icon that appears next to the page name in browser tabs. Favicons should always be 32x32px. To upload a file select browse and find the desired file.
Background image: The image that appears on top of the left-side navigation menu. To upload a file select browse and find the desired file. If there is no image uploaded, the Base Color set under the Navigation Bar section of the theme builder screen will be applied,
Color Attributes
Color attributes are used in these sections on the Theme Details screen.
Colors can be set using the selector that appears by clicking a attributes color block. The use of RGB and Hex color codes is also supported. If an incorrect value is selected for a color it will default to red.
General
Font Face: Sets the font face for all text and links
Fonts can be setting by inputting the font name or the following font families can be set:
@sansFontFamily: "Helvetica Neue", Helvetica, Arial, sans-serif;
@serifFontFamily: Georgia, "Times New Roman", Times, serif;
@monoFontFamily: Monaco, Menlo, Consolas, "Courier New", monospace;
Label Text Color: Sets the color of content text labels
Link Color: Sets the color of all links, including links in the top-right corner of the Equus Platform screens
Value Text Color: Sets the color of content text values (not links)
Example: Font Face, Link Color, and Value Text Color
Example: Label Text Color
Navigation Bars
Base Color: Sets the background color of the left-side navigation menu. This color will be applied if a left-side menu background image is not uploaded under the General section
Header Text Color: Sets the color of the headers in the left-side navigation menu
Left Menu Hover: Sets the color of an item in the left-side navigation menu when hovered over with a cursor
Link Color: Sets the color of the left-side navigation menu items
Example: Base Color, Header Text Color, Left Menu Hover, and Link Color
Headers
Color: Sets the color for all page headers and subheaders.
Icon Color: Sets the color for all page header and subheader icons
Example: Header
Tables & Containers
Accent (for striping): Sets color to alternate with white for each record inside of a table
Header Base Color: Sets the main background color for all header bars of tables
Header Text Color: Sets the text color for all header bars of tables
Line Color: Sets the color for all borders and lines within tables including the side navigation bar
Example: Table
Buttons
Primary Base Color: Sets the main background color for the primary button of each page
Standard Base Color: Sets the main background color for all standard site buttons
Standard Border: Sets the border color for all standard site buttons
Example: Primary and Standard Buttons
Notifications & Alerts
Error Background: Sets the color for error notification/alert boxes
Error Text: Sets the color for text inside of error notification/alert boxes
Info Background: Sets the color for info notification/alert boxes
InfoText: Sets the color for text inside of info notification/alert boxes
Warning Background: Sets the color for warning notification/alert boxes
Warning Text: Sets the color for text inside of warning notification/alert boxes
Examples: Error, Info, and Warning Notifications
Once complete, uncheck the Inactive checkbox and click
for the theme to take effect. If there is already an active theme, make sure that the active theme is made inactive first.
