Using "Additional CSS Class(es)" to customize spacing and add borders and box shadows

wordpress cms-1 web-version-1 add-borders borders spacing website-help webservices css

Additional CSS Classes are a way to add pre-defined styling to blocks on the site. There are options to control things like margins (the spacing around the outside of a block), padding (the spacing around the inside of a block), borders, box shadows, etc.

How-to Add Additional CSS Classes

Select the block that you want to add CSS classes
In the block settings right sidebar, expand the "Advanced" panel
Enter one or more of the CSS classes outlined below within the "Additional CSS Class(es)" box (separate each class name with a space)

Additional CSS classes

Additional CSS Class(es) Options

Margins

Class Name	Added Functionality
no-margin	Removes all margins
no-margin-top	Removes top margin
no-margin-right	Removes right margin
no-margin-bottom	Removes bottom margin
no-margin-left	Removes left margin

Padding

Class Name	Added Functionality
no-padding	Removes all padding
no-padding-top	Removes top padding
no-padding-right	Removes right padding
no-padding-bottom	Removes bottom padding
no-padding-left	Removes left padding

Borders

Class Name	Added Functionality
border	Adds a 2px border on all sides
border-top	Adds a 2px border to the top
border-right	Adds a 2px border to the right side
border-bottom	Adds a 2px border to the bottom
border-left	Adds a 2px border to the left side
border-2x	Adds a 4px border on all sides
border-2x-top	Adds a 4px border to the top
border-2x-right	Adds a 4px border to the right side
border-2x-bottom	Adds a 4px border to the bottom
border-2x-left	Adds a 4px border to the left side
border-rounded	Adds an 8px border radius to round the corners

Border Colors

See main colors on the brand color palette page.

Class Name	Added Functionality
border-green	Adds a Charlotte green: #005035 border color
border-green-dark	Adds a dark green: #00351c border color
border-gold	Adds a Niner gold: #a49665 border color
border-gold-light	Adds a lightened Niner gold: #c0b795 border color
border-metallic-gold	Adds a metallic gold: #958039 border color
border-black	Adds an ore black: #101820 border color
border-jasper	Adds a jasper: #f1e6b2 border color
border-pine-green	Adds a pine green: #899064 border color
border-clay-red	Adds a clay red: #802f2d border color
border-sky-blue	Adds a sky blue: #007377 border color
border-stone-gray	Adds a stone gray: #717c7d border color
border-warm-gray	Adds a warm gray: #696158 border color
border-light-gray	Adds a lightened gray: #e6e8e9 border color

Miscellaneous

Class Name	Added Functionality
width-full	Sets block to take up 100% of available space
clearfix	Resets text wrapping around images when they are set to align left or right. Add this class to the block above the block you need to reset

0 reviews

Print Article

Updating...