Skip to main content
Cartegraph Campus

Cartegraph Engage: Guide Theme

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.

ManageTheme.png

The Visual Design Studio will load and the Theme options will then appear.

You can leave the Theme name as Default or rename it.

Theme.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.

Toggle Advanced Options in the styles panel on the right to show additional properties such as supplemental styles.

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 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
  • Watermark image*

*You 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 drop-down 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*

*You must have Advanced Options toggled on.

Button Styles

Click on a button element (Primary, Secondary, or 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. The drop-down 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*
  • Padding

Hover Styles

  • Background color
  • Border color
  • Font weight
  • Font color

*You 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 drop-down menu.

  • Selecting Custom displays all styling settings and overrides the theme to further customize the look and feel of your guide.

ContainerTheme1.png

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 drop-down menu to apply the typography theme style from the theme selected in the guide container.

  • Selecting Custom displays all styling settings and overrides the theme to further customize the look and feel of your guide.

TextTheme1.png

Applying a Theme Style to a Button Block

Select Primary, Secondary, or Tertiary Button in the Button Style drop-down menu to apply button themes from the theme selected in the guide container.

  • Selecting Custom displays all styling settings and overrides the theme to further customize the look and feel of your guide.

ButtonTheme1.png

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 reapply or resave the guide with the new theme.

What is inherit?

The Inherit option will allow you to have Cartegraph Engage 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.