GeneratePress and GenerateBlocks CSS

GeneratePress (GP) is a lightweight, highly customizable WordPress theme. GenerateBlocks (GB) is its companion block library. Together, they are built with CSS custom properties at their core—making them ideal for CSS-literate web designers.

1. GeneratePress Global Variables

GP exposes CSS variables you can override in Additional CSS or a child theme:

:root {
  --contrast:          #222222;   /* Main text/heading color */
  --contrast-2:        #575757;   /* Secondary text */
  --contrast-3:        #b2b2b2;   /* Placeholder/muted */
  --accent:            #1e73be;   /* Link / primary accent */
  --base:              #f0f0f0;   /* Background base */
  --base-2:            #f7f8f8;   /* Secondary background */
  --base-3:            #eeeeee;   /* Tertiary background */
}

Override these to apply your design tokens:

/* Customizer → Additional CSS */
:root {
  --accent:   #f5a623;   /* Your primary color */
  --contrast: #0f0f0f;   /* Dark text */
}

2. GeneratePress Key CSS Classes

Class	Element
.site-header	The page header wrapper
.main-navigation	Navigation menu
.nav-bar-items	Container for menu links
.site-content	Main content area
.page-hero-section	Hero area (if using GP sections)
.site-footer	Footer wrapper
.entry-title	Post/page title
.generate-columns-container	Row container

3. GenerateBlocks Global Styles

GenerateBlocks uses a :root global style system. Under GenerateBlocks → Global Styles, you can set:

• Colors: Referenced as var(--gb-color-1) in blocks.
• Font sizes: Referenced as var(--gb-font-size-1).
• Spacing: A global spacing scale.

Overriding a GenerateBlock Container:

/* Target a specific gb-container element */
.gb-container.my-hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  background: var(--color-bg);
}

4. How to Apply Your HTML/CSS Design

Step 1: Build the HTML structure in the block editor using GB Container, Headline, and Button blocks.

Step 2: In each block's settings, add a unique CSS class (e.g., hero-section).

Step 3: Add your CSS in Customizer → Additional CSS (for global) or the block's "Advanced CSS" field (for local):

.hero-section {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), var(--hero-image, url(''));
  background-size: cover;
  background-position: center;
}

5. Pro Tips for GP + GB

• Use !important sparingly — only to override GP's inline Customizer styles.
• Always use a Child Theme — keeps your CSS safe when GP updates.
• Inspect with DevTools — hover over any GP element in DevTools to see its exact class names.
• Global Colors — Define your palette in GP Customizer → Colors, then reference var(--accent) everywhere.