Theme Styles

Adjust the default styling of your site layout, elements, colors, links, typography, etc. throughout your site via Theme Styles. For a consistent and easy to maintain design system for your entire site.

To access Theme Styles click the Settings (gear) icon in the builder toolbar and go to Theme Styles.

The theme style dropdown contains a few existing theme styles (Bricks Styles). Select any Theme Style to preview its styles on the canvas.

It is recommended to create your own Theme Style by clicking the Create (plus) icon, instead of editing default theme styles directly.

Perform all your styling changes in the control groups below.

Conditions

When you finished setting up your theme style open the Conditions control group. This is how you tell Bricks where on your site this theme style should be used.

To apply a theme style to your entire website open the Conditions control group, click Add Condition, and select Entire Website.

You can set as many theme style conditions as you want.

Let’s say you want to apply a Theme Style to two specific landing pages and your home page. You simply add a condition, click on Individual, and select your two landing pages. Then you add another condition and select Front page.

Import & Export

To export a theme style click the Export (download) icon next to the selected theme style. This will download a .JSON file to your computer.

To import your .JSON theme style(s) click the Import (upload) icon next to the selected theme style. If one of the name(s) of your imported styles already exists, the import will fail. This is to ensure you don’t have any theme styles with identical names.

Style Hierarchy

Bricks automatically applies the most specific styles to your site. Theme Styles are preceded by page settings (as they are more specific). And page settings are preceded by elements settings on an individual page. This allows you to easily mix and match styles to your exact requirements.

×