1. What Are Theme Styles in Breakdance?

  • Controls the global look & feel: fonts, colors, buttons, spacing, etc.

  • Prevents you from having to style every element manually on every page.

2. How to Access Theme Styles

  • Click “Breakdance” in the left sidebar → Theme Styles

  • OR while editing a page → top left “Breakdance” menu → Theme Styles

3. Key Style Areas to Set First

  • Typography: Headings, body text, links

  • Colors: Brand palette (primary, secondary, background, text)

  • Buttons: Default button style (size, color, radius, hover)

  • Form Fields: If using contact forms, set a consistent style here

  • Containers/Spacing: Adjust default padding/margins

4. Using CSS Variables

  • Custom values like var(--primary-color) keep styling clean and reusable

  • Where to find and how to apply them in Breakdance

5. Best Practices

  • Create one Global Theme Style and stick with it across your site

  • Don’t override styles in every element unless absolutely needed

  • Name your theme styles clearly if creating more than one

 

More detailed version:

What Are Theme Styles?

Theme Styles in Breakdance let you define the global visual language of your site—things like:

  • Your brand fonts and colors

  • Default button styles

  • Heading sizes and body text

  • Form field styling

  • Overall spacing and layout rules

Instead of customizing each section one by one, you apply styles once here, and they’re used site-wide unless overridden.

💡 Think of Theme Styles like your site’s outfit: you pick it once and wear it everywhere.

How to Access Theme Styles

You can access Theme Styles from two places:

Option 1: From the WordPress Dashboard

  • Go to the left-hand admin menu → Breakdance → Theme Styles

Option 2: While Editing a Page

  • Click the Breakdance icon in the top left of the editor

  • Choose “Theme Styles” from the dropdown

This opens the Theme Styles panel, where you can either edit the default or create a new style set.

Key Sections to Customize First

1. Typography

Set your heading (H1–H6) and body font settings globally:

  • Font family (e.g., Montserrat, Lora)

  • Size, weight, line height, letter spacing

  • Responsive font sizes

💡 Pro tip: Set heading styles using a scale (like H1 = 48px, H2 = 36px, H3 = 28px…) for visual hierarchy.

2. Colors

Define your brand color palette here:

  • Primary

  • Secondary

  • Accent

  • Background

  • Text

  • Link colors

These become global variables you can use anywhere (e.g., var(--primary-color)).

3. Buttons

Set the default style for all buttons on your site:

  • Border radius

  • Background & text color

  • Hover effects

  • Font settings

This keeps your CTAs looking sharp and consistent.

4. Spacing & Layout

Control default:

  • Section and container padding

  • Column gaps

  • Breakpoints for mobile/tablet/desktop

This helps maintain visual consistency across devices.

5. Form Fields

If you use Breakdance’s form builder or embed external forms, you can style inputs here:

  • Label font and spacing

  • Field border radius and colors

  • Button inside the form

Using CSS Variables (Optional but Awesome)

Breakdance lets you create and use CSS variables for things like colors and spacing. For example:

cssCopyEditvar(--primary-color)

You can apply this in any element’s color picker, spacing, or custom CSS field. This helps with consistency and easy updates.

Best Practices

  • Stick to one Theme Style unless you need multiple (e.g., a different style for a landing page)

  • Name it clearly (like “Main Site Style”) so you know what it is later

  • Avoid overwriting styles in individual elements unless it’s intentional

  • Preview on all devices after adjusting global settings—some values cascade in unexpected ways