Skip to Content

Styles in Jitterbit App Builder

Styles are a way to apply specific styling to page, panel, and control elements. 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

stylepageexample.png

  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

panelstyleexample.png

  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

stylescontrolexample.png

  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