Overview
Theme helps you manage your Guide styling by setting the formatting and style of the Guide Container and Building Blocks your Guide creators can use. A Theme gives Guide creators the default styling they need to easily create visually consistent Guide content. The Theme can be applied when editing Containers and Building Blocks in a Guide in the Visual Design Studio.
Manage Theme
On the Guides Dashboard page, click the Manage Theme button in the top right corner.
The Visual Design Studio will load and the Theme options will then appear.
You can leave the Theme name as "Default" or rename it.
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 in the left panel to edit styles in the right panel.
When you make a change to the style, a preview displays in the left panel.
Tip: Toggle Advanced Options in the styles panel on the right to show additional properties.
Guide Container Styles
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 setup the following properties:
- Background Color
- Border Width
- Border Color
- Border Radius
- Padding
- Caret width and height
- 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
- Default Z-Index Value
- Watermark Image
*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 setup the following properties:
- Font Family Name - The dropdown list shows default browser fonts. Inherit will take on the primary font family of the application. You can also type in the name of a different font family, however that font will only appear if the font is in the application.
- Font Weight
- Font Size
- Font Color
- Font Decoration (Underline)
- Text Transform*
- Line Height*
- Letter Spacing*
- Default & Hover Link Weight
- Default & Hover Link Color (Inherit Checkbox)
- Default & Hover Link Text Decoration
*Must have Advanced Options toggled on
Buttons 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 setup the following properties.
Default Styles
- Background Color
- Border Width
- Border Color
- Border Radius
- Font Family Name - The dropdown list shows default browser fonts. Inherit will take on the primary font family of the application. You can also type in the name of a different font family, however that font will only appear if the font is in the application.
- Font Weight
- Font Size
- Font Color
- Text Transform*
- Letter Spacing*
- Padding
Hover Styles
- Background Color
- Border Color
- Font Weight
- Font Color
*Must have Advanced Options toggled on
When you have finished editing your Theme, be sure to click Save at the top right corner before exiting.
Applying Themes In The Designer
Now that you have a Theme and multiple typography and button styles, you and your users can apply the Theme and styles to your Guides in the Visual Design Studio.
Applying A Theme To A Guide
In a Guide Step, click on the border of the Guide Container to open Container Settings.
Select your Theme in the Theme dropdown menu.
- Selecting Custom will display all styling settings and overrides the Theme to further customize the look and feel of your Guide.
Applying a new Theme to a Guide will override the Theme settings of a Building Block.
Applying A Theme Style To A Text Block
Select Title, Sub Title, or Paragraph style in the Theme Style dropdown to apply the typography Theme style from the Theme selected in the Guide Container.
- Selecting Custom will display all styling settings and overrides the Theme to further customize the look and feel of your Guide.
Applying A Theme Style To A Button Block
Select Primary, Secondary, or Tertiary Button in the Button Style dropdown to apply button themes from the Theme selected in the Guide Container.
- Selecting Custom will display all styling settings and overrides the Theme to further customize the look and feel of your Guide.
Frequently Asked Questions
Can I Update My Theme Across All Of My Guides At Once?
Not at this time.
If I Make A Change To My Theme, Will It Update All Guides That Have That Theme Applied?
No, you have to go into the Guide and re-apply or re-save the Guide with the new Theme.
What Is Inherit?
The "Inherit" option will allow you to have Reseller Adopt pull in the styling options that are already coded by the developers within the application you're placing guides.
Why Can’t I See The Font Family Name That I Use In My App?
If you have a font family that you use within your application already, choose "Inherit" to use it. If you're trying to use a secondary font family that's included in your style, you can type in the font name.