Styling Override | Advanced Guides Docs

Content Blocks can have padding and margin override fields that any CMS User can adjust to get the perfect spacing between Content Blocks.

Prerequisites

You will need to have a "header::styles" Blade stack in thehead of your site template for the override CSS to be injected into.

    1<head>
2    @stack('header::styles')
3</head>

This can be done automatically for you by using the Header helper component.

You will also need to make sure that your Content Block is wrapped within a section tag as well as have it's unique Content Block Key set as that section's ID. You may optionally have your Content Block in a different HTML tag like div, but you'll need to modify the Style Override component.

Usage

Within your Content Block's Blade view, add the following snippet to the top of that file:

    1<x-autoload::style-override :key="$key" :content="$vars" />
2 
3<section data-component-id="{{ $key }}">
4    <!-- Content Block content here -->
5</section>

    1<x-autoload::style-override :key="$key" :content="$vars" type="div"/>
2 
3<div data-component-id="{{ $key }}">
4    <!-- Content Block content here -->
5</div>

Examples

Overriding the padding or margin of a Content Block is done by writing valid CSS values inside the "Padding Override" input field.

Valid CSS for these values are denoted by either two or four numbers separated by a space with a unit applied to each.

Valid Example: 2rem 0 2rem 0
Invalid Example: 2 0 2 0

The spaces are defined as TOP, RIGHT, BOTTOM, LEFT. Or if you only input two values, it will be TOP AND BOTTOM, RIGHT AND LEFT.

Four Value Example: 2rem (Top) 0 (Right) 2rem (Bottom) 0 (Left)
Two Value Example: 2rem (Top and Bottom) 0 (Right and Left)