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:
cssvar(--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