Contents
- Overview
- Editing a Theme
- Guide Container Styles
- Typography Styles
- Buttons Styles
- Default Styles
- Hover Styles
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.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
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.