Guides can now be further customized and styled to represent your organization’s branding through custom color themes at the Navigation and Content levels. Updates will apply to both the Employee and Customer Learning Clouds.
We’ve also given all of the navigation and content objects a modern facelift!
Setting Themes on a Guide
Disclaimer: We recommend always Previewing the Guide before publishing theming updates, to ensure the appropriate experience.
Guides now provide the ability to edit the color theme at a guide-level, for both the Navigation (sidebar) and Content body, as well as at the individual content block object level, allowing for a fully customizable theming experience.
The guide-level theming options can be accessed by opening the Guide Editor and clicking on the ‘Theme’ option in the top menu.
We’ll provide some examples at the bottom of this article!
Guide Primary Color Setting
Each Guide will have a dedicated ‘Guide Primary’ theme color. By default, this color is auto-populated from your WorkRamp Enterprise Primary Theme Color (configured within your Enterprise theming settings). This can be changed to set a custom primary color for the entire guide, using hex codes or the color picker (clicking on the colored block).
This selection will influence the Modern theme at the Navigation level, as well as the Primary Light and Primary themes at the Content level.
Navigation Theme Setting
This configuration will update the left-hand Navigation menu on the guide. The current available options are:
Classic - legacy theming with black text and a light gray background
Modern - updates the top-left nav block with your Guide Primary color and changes the text color (white or black, depending on the saturation of your selected Guide Primary color - for accessibility purposes)
Neutral Dark - black background with white text (similar to a ‘Dark Mode’)
Content Theme Settings
This configuration will update the Task Title Header background and text, and the body of the Guide content, including the background and text. (Each guide object can have its own unique theme as well, as we’ll show in a moment). The current available options are:
Classic - legacy theming with White background and standard black/dark text
Neutral Light - light gray background and standard black/dark text
Primary Light - background will be a lighter shade of your selected Guide Primary color, with standard black/dark text
Primary - background will mirror the selected Guide Primary color, with text color being black or white (depending on saturation of Guide Primary color - for accessibility purposes)
Neutral Dark - black background with white text (similar to a ‘Dark Mode’)
Changing the Theme at the Content Object Level
In addition to the full guide-level theme settings, you also have the ability to adjust the theme colors for each individual content object within the guide. There will be a Theme Color setting, and the available themes will mirror what is available in the Guide-level Content Theme.
Pro Tip: Use this function to make Call Out Cards, Required Questions and more stand out from the rest of the content!
To edit the theme of an individual guide object, from the Guide editor, click on the color palette icon in the toolbar.
This will expand the theme settings, and will allow you to select the Theme for that object, and, if desired, a different color and associated theme (this color can be completely separate from the Guide theme settings!)
By default, content objects will reflect the same Primary color and Theme as the Guide-level settings.
Custom Theme Examples
Below are some examples of Guides with different combinations of theme settings: