Get Bricks

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.

Access the Theme Styles by clicking the Settings (gear) icon in the builder toolbar. Then go to Theme Styles.

To create your own Theme Style, click the Create (plus) icon and provide a name.

Apply any styling changes you want in the control groups below (like setting your fonts under “Typography”, etc.).

Conditions

Open the Conditions control group to 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.

These are the available control groups:

  • CONDITIONS
  • GENERAL
  • COLORS
  • CONTENT
  • LINKS
  • TYPOGRAPHY
  • ELEMENT – SECTION
  • ELEMENT – CONTAINER
  • ELEMENT – BLOCK
  • ELEMENT – DIV
  • ELEMENT – ACCORDION
  • ELEMENT – ALERT
  • ELEMENT – BUTTON
  • ELEMENT – CAROUSEL
  • ELEMENT – CODE
  • ELEMENT – COUNTER
  • ELEMENT – DIVIDER
  • ELEMENT – FORM
  • ELEMENT – HEADING
  • ELEMENT – ICON BOX
  • ELEMENT – IMAGE
  • ELEMENT – IMAGE GALLERY
  • ELEMENT – LIST
  • ELEMENT – NAV MENU
  • ELEMENT – POST CONTENT
  • ELEMENT – META DATA
  • ELEMENT – POST NAVIGATION
  • ELEMENT – RELATED POSTS
  • ELEMENT – TAXONOMY
  • ELEMENT – POST TITLE
  • ELEMENT – PRICING TABLES
  • ELEMENT – PROGRESS BAR
  • ELEMENT – SEARCH
  • ELEMENT – SIDEBAR
  • ELEMENT – SLIDER
  • ELEMENT – ICON LIST
  • ELEMENT – SVG
  • ELEMENT – TABS
  • ELEMENT – TEAM MEMBERS
  • ELEMENT – TESTIMONIALS
  • ELEMENT – TEXT
  • ELEMENT – VIDEO
  • ELEMENT – WORDPRESS
  • WOOCOMMERCE – BUTTON

Exclude condition

Since Bricks 1.3.6 you’ll be able to set exclude conditions for any theme style. To exclude a specific condition you need to toggle the exclude control. Excluding a certain condition will let Bricks know that if the condition applies in a certain scenario, then that theme style won’t be used.

Use this theme style everywhere except for the Privacy Policy 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.