Configure element styles

In the Application Builder, styling is handled in two distinct areas depending on what you want to change. You can control the container (width, borders, padding) via the Style tab, or override specific theme settings (colors, fonts) via the General tab.

This guide covers how to customize the layout, spacing, and visual appearance of individual elements.

Overview

The Application Builder offers a wide range of customization options to personalize the look and feel of a page. You can control everything, from color schemes, to typography, and spacing.

  • Global Theme: Set the default look for all elements in Application Settings.
  • Style Tab: Controls the “box” around your element. Use this to change width, background color, borders, and padding.
  • Theme Overrides (General Tab): Controls the specific features inside the element. Use this to make a specific button red instead of the default blue.

Style element

The Style Tab (Layout & Container)

To access layout controls, select an element and click the Style tab in the properties panel. These settings affect the “container” or the box that holds your element.

Width

Control how much horizontal space the element occupies on the page.

Option Description
Full Width Stretches the element to fill 100% of the available container space.
Normal The standard width, optimized for readability.
Medium A contained width, slightly narrower than normal.
Small The narrowest option, useful for centering small interactions.

Width

Padding (Spacing)

Padding creates a buffer zone between the element’s content and its border. Increasing padding adds “breathing room” inside the element.

  • Vertical (Top/Bottom): Controls the height of the whitespace above and below the content.
  • Horizontal (Left/Right): Controls the width of the whitespace on the sides.

Borders

You can add borders to create visual separation between elements.

  1. Sides: Choose which sides to frame (Top, Bottom, Left, Right, or All).
  2. Width: Set the thickness of the line.
  3. Color: Select a color from your palette or enter a custom hex code.

Background Color

Setting a background color fills the entire container of the element. This is often used combined with Padding to create “Cards” or highlighted sections.

Background color

Theme Overrides (General Tab)

While the Style tab controls the box, the General tab allows you to override specific design tokens (like font size or button color) that are usually inherited from your Global Theme.

How to override a theme:

  1. Select the element.
  2. Ensure you are on the General tab.
  3. Look for the Settings/Style icon (often a small gear or slider icon) next to specific fields.
  4. Clicking this opens a modal where you can select a specific color or typography style that differs from your default theme.

Theme override

Advanced: Custom CSS Classes

If the built-in style options are not enough, you can apply custom CSS.

  1. In the Style tab, scroll to the CSS Class field.
  2. Enter a class name (e.g., my-custom-button).
  3. Go to Application Settings > Custom Code to define the rules for that class.

Frequently asked questions (FAQ)

Why are there two places to edit styles?

  • The Style Tab handles the layout (the box model: margins, padding, width).
  • The General Tab handles the component details (specific theme overrides like font family or primary color).

How do I revert a change?

If you have applied a Theme Override (in the General tab), simply deselect the custom option to revert to the Global Theme default.

Does padding affect the background color?

Yes. If you set a background color, it will fill the area included in the padding. If you want space outside the background color, you would typically need a margin (which is handled by the element’s placement in the layout).

If I change the Global Theme, will my customized elements change?

It depends. If you have kept an element set to “Default,” it will update to match the new Global Theme. If you have manually customized an element (e.g., manually set a button to Red), it will ignore the Global Theme update and stay Red.

Can I revert an element to the default style?

Yes. In the style editor for the element, clear your specific selections (or select “Default” where applicable). The element will revert to using the Global Theme settings.

Do all elements have the same style options?

No. Complex elements like Tables or Forms may have different styling options compared to simple elements like Text or Buttons.

Related content

Still need help? If you’re looking for something else, please feel free to make recommendations or ask us questions; we’re ready to assist you.