Blocklayouts

Documentation
Patterns
Plugins
Getting Started
Custom Blocks
Extensions

Additional CSS

Add custom styling to any block with visual controls and a CSS editor.

What It Does

The Additional CSS extension gives you two ways to style blocks:

  1. Visual Controls – Easy sliders and dropdowns for common styling
  2. Custom CSS Editor – Write your own CSS code

All Visual Controls styles are applied as inline CSS directly to the block, so they override theme styles.

Visual Controls

The visual controls provide an easy way to style blocks without writing code. Simply adjust the sliders and dropdowns to change common CSS properties.

Position

  • Default – Normal positioning
  • Static – Default positioning behavior
  • Relative – Position relative to normal flow
  • Absolute – Position relative to parent
  • Fixed – Stay in place when scrolling
  • Sticky – Stick to viewport when scrolling

When you choose Absolute or Fixed positioning, you get controls for:

  • Top, Right, Bottom, Left – Position the element

Z-Index

  • Control which elements appear on top
  • Range: -999 to 999
  • Higher numbers appear in front

Transform

  • Translate X – Move left/right (px, %, em, rem, vw)
  • Translate Y – Move up/down (px, %, em, rem, vh)
  • Rotate – Turn the element (angle picker)

Effects

  • Background Blur – Add blur effect (px only)
  • Opacity – Make transparent (0.1 to 1.0)
  • Overflow Hidden – Hide content that goes outside the block

Custom CSS Editor

The custom CSS editor uses CodeMirror with:

  • Line numbers
  • CSS syntax highlighting
  • Auto-complete (Ctrl+Space)
  • Auto-close brackets

Understanding the Selector

When you first open the Custom CSS editor, you’ll see this template:

selector {

}

What is selector?

  • selector is a placeholder that gets replaced with a unique class name
  • When you save your CSS, it becomes something like blocklayouts-abc123
  • This ensures your styles only affect this specific block
  • Each block gets its own unique selector

How the Selector Works:

  1. You write CSS using selector as the class name
  2. The system automatically generates a unique class (e.g., blocklayouts-xyz789)
  3. Your CSS gets applied as inline styles to that specific block
  4. No other blocks are affected by your custom CSS

How to Use Custom CSS

  1. Click “Custom CSS” in the panel
  2. A CSS editor opens with the selector template
  3. Write your CSS using selector as the class name:
selector {
  background: red;
  border-radius: 10px;
  padding: 20px;
}
  1. Use selector with pseudo-classes for interactive effects:
selector:hover {
  background: blue;
  transform: scale(1.05);
}

selector:focus {
  outline: 2px solid green;
}

Responsive CSS with Breakpoints

You can easily add responsive styles using our special breakpoint syntax:

/* Base styles */
selector {
  font-size: 18px;
  margin: 30px;
  display: flex;
}

/* Tablet styles */
@tablet {
  selector {
    font-size: 16px;
    margin: 20px;
  }
}

/* Mobile styles */
@mobile {
  selector {
    font-size: 14px;
    margin: 10px;
    display: block;
  }
}

/* Desktop-specific styles */
@desktop {
  selector {
    font-size: 20px;
    margin: 40px;
  }
}

Note: Base styles apply to all devices unless overridden by breakpoint styles

Breakpoint Definitions:

  • @mobile – Screens smaller than 768px
  • @tablet – Screens between 768px and 1024px
  • @desktop – Screens larger than 1024px
  • Base styles apply to all screen sizes unless overridden

Responsive Example:

/* Default: Side-by-side layout */
selector {
  display: flex;
  gap: 30px;
}

/* Tablet: Stacked with less gap */
@tablet {
  selector {
    flex-direction: column;
    gap: 20px;
  }
}

/* Mobile: Compact stacked */
@mobile {
  selector {
    flex-direction: column;
    gap: 10px;
    padding: 15px;
  }
}

Advanced Selector Usage

Multiple Pseudo-classes:

selector:hover {
  background: blue;
}

selector:active {
  transform: scale(0.95);
}

selector:focus-within {
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.3);
}

Complex Selectors:

/* Target child elements */
selector h2 {
  color: red;
}

selector .button {
  background: green;
}

/* Target when block contains specific content */
selector:has(img) {
  border: 2px solid blue;
}

Important Notes

  • The selector is automatically generated when you add custom CSS
  • It becomes a unique class like blocklayouts-abc123
  • You can add any CSS pseudo-classes like :hover, :focus, :active, etc.
  • Responsive breakpoints work with the @mobile, @tablet, @desktop syntax
  • Base styles apply to all devices unless overridden by breakpoint styles

Tips

  • Start with visual controls for simple changes
  • Use custom CSS for complex styling
  • Test your changes on different screen sizes
  • The selector in custom CSS targets only this specific block
  • Inline styles have high priority, so they override theme styles

Troubleshooting

Styles not showing?

  • Make sure the block is selected
  • Check for CSS syntax errors
  • Try refreshing the page

Custom CSS not working?

  • Make sure you’re using selector in your CSS
  • Check the browser console for errors
  • Verify your CSS syntax is correct

Position not working?

  • For Absolute/Fixed positioning, make sure you set Top/Left values
  • Check that parent elements don’t have conflicting styles

On this page: