All Collections
Design Center
Design Center Advanced User Guide
Design Center Advanced User Guide

Advanced Guide Documenting Style Customization

Tony Brueske avatar
Written by Tony Brueske
Updated over a week ago

Table of Contents

  1. Style Tool Bar

  2. Style Element

  3. Style Element Properties

  4. Select Element Tool

  5. Device Selector

  6. Show Hide Styles

  7. Move Top / Bottom

  8. Search

  9. Manual Add Style

Style Tool Bar

This area houses all tools included to edit the Master Style. Use this toolbar to interact and edit the Master Deck on the right side of the screen.

Style Element

Each style element is an item in the master deck to which changes can be applied to. Depending on the Element selected different properties will be available to edit.

Single Click to select a Style Element (multiple can be selected)
Double Click to enter a Style Element
Click and Drag on the Left 3-bar icon to organize (CSS cascading will be followed)
Hide Style Element Temporarily via the Eye
Edit a Style Element Title and Selector via the Ellipses

Style Element Properties

Entering a style element will show the default properties available to edit. For example, the Main Menu Logo Style Element will have a Background image to modify.


Change and edit these properties to create a customized Master Deck.

Show / Hide Style Elements

This tool allows you to hide or show all Style Elements. Hiding all will show the default Styling of the Master Deck.

Move Top / Move Bottom

These Buttons will move selected Style Elements to the top or bottom of the list.

Select Element Tool

Use the Select Element tool to select the filter and add Style Elements.

Filter through existing Styles
Add New Style Element by Selecting

Selection tip: Hit the Esc key to exit select mode quickly

Device Selector

This drop-down will change the display type of the Master Deck. While in a different device type other than Desktop, Property changes will only be specified for the device selected. For example, if mobile is selected changing the font size of the Paragraph Text will only change it for mobile device view sizes.


Search

Use this search bar to search for Style Elements or for CSS Selectors.


Add Style

This method will require knowledge of CSS. Use this option to add a Style Element more specific than the Style Selector will allow for.

Did this answer your question?