1. Betterworks
  2. Betterworks
  3. Guides

Themes

Contents

Overview

The Betterworks Guide Theme helps you manage your Guide Styling by setting the formatting and style of the layouts and building blocks your Betterworks Guides Admins can use. Themes can be applied when editing containers and Building Blocks in a Guide in the Visual Design Studio.

The default theme, specifically tailored for the Betterworks platform and color scheme, cannot be removed. It is optimized for Betterworks' design aesthetics. While customization is possible, we advise against deviating too far from this theme to maintain consistency and usability.

Watch our video below for an overview on how to create and amend your theme.

 

Editing A Theme

Click on Manage Theme in the Guides section. Then select Edit. The Visual Design Studio will open in a new tab where you can customize the Theme.
Betterworks Guides Admins can edit the Theme. Changing the styles in the Theme will not affect existing Guides using that Theme; only new Guides will reflect the changes.
 
Note: If an existing Guide needs to be updated to use a new or edited Theme, the Guide creator should open the Guide in the Visual Design Studio, apply the Theme, review the Guide content for any issues with the new styling and then save the Guide to apply the changes.
mceclip0.png
 
In the Visual Design Studio you will see two main panels. In the left panel, you will see the individual Theme Elements: Guide Container, Typography, and Buttons. Click into an element to edit styles in the right panel. When you make a change to the style, a preview displays in the left panel.
Note: Toggle Advanced Options in the styles panel on the right to show additional properties.
 

Guide Container Settings

Click on the Guide Container to see the Guide Container Styles panel on the right side of the page. Use the Guide Container Styles panel to set up the following properties.

  • Background Color
  • Border Width
  • Border Color
  • Border Radius
  • Caret Size and Dimensions
  • Drop Shadow Color
  • Drop Shadow Angle*
  • Drop Shadow Distance*
  • Drop Shadow Blur*
  • Drop Shadow Size*
  • Close Button Color
  • Close Button Hover Color
  • Close Button Weight
  • *Close Button Size
  • Close Button Position*
  • Backdrop Color
  • Z-Index Value
  • Supplemental CSS Styles*

*Must have Advanced Options toggled on

Typography Styles

Click on a Typography element (Title, Sub Title, Paragraph, Link) to show the Typography Styles panel on the right side of the page. Use the Typography Styles panel to set up the following properties.

  • Font Family Name - The dropdown list shows default browser fonts. You can still type in the name of your application's font, and Betterworks Guides will inherit your fonts in the Guide.
  • Font Weight
  • Font Size
  • Font Color
  • Font Decoration (Underline)
  • Text Transform*
  • Line Height*
  • Letter Spacing*

*Must have Advanced Options toggled on

Button Styles

Click on a Button element (Primary, Secondary, Tertiary) to show the Button Styles panel on the right side of the page. Each button has different default and hover styles you can define. Use the Button Styles panel to set up the following properties.
 

Default Styles

  • Background Color
  • Border Width
  • Border Color
  • Border Radius
  • Font Family Name - Note: the dropdown lists default browser fonts. You can still type in the name of your application's font, and Betterworks Guides will inherit your fonts into the Guide.
  • Font Weight
  • Font Size
  • Font Color
  • Font Decoration (Underline)
  • Text Transform*
  • Line Height*
  • Letter Spacing*
  • Padding

Hover Styles 

  • Background Color
  • Border Color
  • Font Weight
  • Font Color
*Must have Advanced Options toggled on

 

Z-Index

This specifies the stack order of the badge or whether it appears in front of or behind another element on the page. By default, the Z-Index is set to a very high number (19000) so it will appear above any other element. Increase or decrease this number according to your specifications.

Note: If you need the Z-Index to be different for a specific guide, you can customize it in the Visual Design Studio. This allows you to modify the Z-Index on a per-guide basis without affecting other guides.