View Categories

Changing Colors & Fonts

shayhayashi
Updated on October 20, 2024

1 min read

Whether you’re customizing a single element or updating global styles, this guide will walk you through how to make changes to colors and fonts across your theme.

1. Changing Colors or Fonts for a Specific Item #

To customize one specific element:

  1. Select the item in the Bricks visual editor.
  2. Go to the Style panel in the left sidebar.
  3. Change Typography Color:
    • In the Typography section, select the color field to pick or assign a new color.
  4. Change Background Color:
    • In the Background section, click on the background color field and choose a new color.

2. Changing Global Colors and Fonts #

Your theme uses global classes to maintain consistency throughout the site. These classes control font types (e.g., headings vs. body text) and reusable color palettes.

Global Font Classes: #

  • Font Sizes: font-xs, font-sm, font-md, font-lg, font-xxl (for different text sizes).
  • Font Type: font-body (for body text) and font-accent (for headings or special text).
  • Font Weight: font-light and font-dark to switch between lighter or darker text.

Global Background Classes: #

  • bg-light: Light background color.
  • bg-accent-1 through bg-accent-4: Different shades of accent colors.

3. How to Edit Global Classes #

If you need to change a global color or font class, follow these steps:

Editing Global Colors #

  1. Select the element that uses the color class.
  2. Click on the color class pill in the left sidebar (e.g., bg-accent-1).
  3. Click the Unlock button to edit the class.
  4. In the Background section > List dropdown, click the pencil icon next to the color.
  5. Change the hex code to the new color and click Save.

Editing Global Fonts #

  1. Select the element using the font class (e.g., font-body or font-accent).
  2. Click on the class pill and unlock it to make changes.
  3. In the Typography dropdown, change only the font family (avoid editing other properties).
  4. To adjust font size, edit the specific size class (e.g., font-sm or font-lg).
    • Adjust font size, line height, and letter spacing to fit your design.

4. Creating New Classes #

To create a new reusable class:

  1. Type the desired class name into the left sidebar search bar.
  2. Press Enter to create the class.
  3. Customize the class by assigning styles to it in the left sidebar (e.g., typography, colors).

⚠️ Note on Child Elements:
A child element is any element nested inside another. When you apply a class to a parent element (like a section), all of its child elements (like text or buttons within that section) inherit the styling—unless you override it for specific children.