Styles

Vinyl 3.3 introduces Styles as a way to apply specific styling to page, panel, and control elements. Earlier versions of Vinyl required working with Themes to accomplish this. Styles are an elevated method of providing a Developer control over the CSS styling of an app look and feel.

How to apply a style to a page

1. Navigate to the page to style
2. Go to the Action Drawer > Live Designer
3. Go to More > Styles
4. Locate the desired style from the Styles panel and click the + Add button. For example: Hide Close (X) Button on Popup
5. Exit out of the Style screens, return to the application view and confirm the update

How to apply a style to a panel

1. Navigate to the page containing the panel to style
2. Go to the Action Drawer > Live Designer
3. Select the panel from the page view. For example: Product
4. Go to More > Styles
5. Narrow down the Style Category by selecting the appropriate option. For example: Background & Border
6. Locate the desired style from the Styles panel and click the + Add button. For example: Container Border Radius 4px
7. Exit out of the Style screens, return to the application view and confirm the update

How to apply a style to a control

1. Navigate to the page containing the control to style
2. Go to the Action Drawer > Live Designer
3. Select the control from the page view. For example: Code Container
4. Go to More > Styles
5. Click the + Style button
6. Narrow down the Style Category by selecting the appropriate option. For example: Font
7. Locate the desired style from the Styles panel and click the + Add button. For example: Color Red Crimson
8. Exit out of the Style screens, return to the application view and confirm the update