Custom Colors and CSS Tweaks For Gutenberg Blocks

Custom Colors and CSS Tweaks

Point & Click Then Learn Basic Code

FAQs, Testimonials Paragraphs & other elements can be tweaked with point and click settings. But if you have basic CSS skills you can do so much more. Such as the border round this paragraph. See The Code.

Scroll Down To See Code

Please Note!

This page shows you how to do this in theory. To see a real world example click here.

For instance these accordion blocks look slightly different to each other

To add this border needs code

You’ll need basic CSS to do this.

To change this background color needs code

You’ll need basic CSS to do this.

This border bottom needs code

You’ll need basic CSS to do this.

But the good point is that the code is basic and blocks are easy to target. If you’ve ever tried to find the selector for an element using the Chrome or Firefox inspector tools you’ll find blocks much easier to style.

Tweaking Testimonials

You can change the testimonial background color with point and click settings. But to add a border or change the border radius needs CSS.

The most important point…

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla laoreet eget urna in lobortis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec purus purus, ullamcorper sit amet quam a, finibus ultricies sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Name Here

Add Title

The most important point…

Name Here

Add Title

The most important point…

Name Here

Add Title

The most important point…

Name Here

Add Title

Padding out the CTA block

The call to action block was too narrow for my page design. So I added padding top and bottom using CSS. Now my CTA is much more noticeable.

I Added Padding Here

I wanted to add padding to make this call to action block deeper. I needed basic CSS to do that.

Button

The code I used

To make this paragraph border

FAQs, Testimonials Paragraphs & other elements can be tweaked with point and click settings. But if you have basic CSS skills you can do so much more. Such as the border round this paragraph.

I used this code

.my-paragraph-border {
padding: 10px;
-webkit-box-shadow: 2px 2px 2px 2px rgba(94,94,94,1);
-moz-box-shadow: 2px 2px 2px 2px rgba(94,94,94,1);
box-shadow: 2px 2px 2px 2px rgba(94,94,94,1);
}

I added an Additional CSS Class via the paragraph block Advanced settings dialogue box

Styling the accordion blocks

I used three lots of code for the three accordion styles.

Thin border all the way round

To add this border needs code

You’ll need basic CSS to do this.

.accordion-border.ab-block-accordion .ab-accordion-title {
background: #ffffff;
padding: 10px 15px;
border-left: 1px solid #dddddd;
border-bottom: 1px solid #dddddd;
border-right: 1px solid #dddddd;
border-top: 1px solid #eeeeee;
}

I added this Additional CSS Class via the block settings.

Accordion Accordion Title background color

To change this background color needs code

You’ll need basic CSS to do this.

This is the code I used to add the background color.

.accordion-bg-blue.ab-block-accordion .ab-accordion-title {
background-color: #94a698;
}

I added this Additional CSS Class via the block settings.

Accordion Bottom Border

This border bottom needs code

You’ll need basic CSS to do this.

This is the code I used to add the border bottom color to the accordion block.

.accordion-border-bottom.ab-block-accordion .ab-accordion-title {
background-color: #ffffff;
border-bottom: 3px solid #799082;
}

I added this Additional CSS Class via the block settings.

Styling The Testimonials

You can use point and click settings to change the background color of the testimonials. But to change the border or border radius you will need code.

This is a standard testimonials block. I didn’t make any changes

The most important point…

Name Here

Add Title

A good testimonial…

Find the most important point in the testimonial, from the client’s prospective.

Put the important point in bold on the first line.

If the client will allow you…

Include their name, photo and business name.

I used point and click settings to change the color of this testimonials block

The most important point…

Name Here

Add Title

One pixel border around testimonial block

The most important point…

Name Here

Add Title

This is the code I used to add the border around this testimonial.

.testimonial-border.wp-block-atomic-blocks-ab-testimonial {
 border-radius: 0;
border: 1px solid #cccccc;
}

I wanted to target just one testimonial block, so I added an Additional CSS Class of…

testimonial-border

Under the AB Testimonial block’s Advanced tab.

Customizing the border radius

The most important point…

Name Here

Add Title

I wanted to style this single testimonial so I added an Additional CSS Class under this testimonial’s Advanced tab.

testimonial-one-rounded-corner

I changed the background color using the block’s settings in the sidebar.

.testimonial-one-rounded-corner.wp-block-atomic-blocks-ab-testimonial{
-webkit-border-top-right-radius: 100px;
-moz-border-radius-topright: 100px;
border-top-right-radius: 100px;
}

Adding padding above and below the Call To Action block text

I Added Padding Here

I wanted to add padding to make this call to action block deeper. I needed basic CSS to do that.

Button

This is the code I used…

.extra-cta-padding.wp-block-atomic-blocks-ab-cta.ab-block-cta {
padding-top:25%;
padding-bottom:20%;
}

I added an Additional CSS Class of…

extra-cta-padding

via the Advanced tab in the block settings (in the sidebar).

Adding CSS to just one page

The easiest way to do this is by using the Simple CSS plugin.

Simple CSS Plugin

This is a work in progress. Some of the selectors I’m using at the moment are listed below…

I expect these selectors to change slightly as I get to know the block editor in more detail 😉

PS: Text in the code block doesn’t seem to wrap. Just select it all and copy/paste in to your text editor.

/** Accordion Title */

/** All accordion titles */
.wp-block-atomic-blocks-ab-accordion .ab-accordion-title { ... }
/** One specific accordion title (uses: Additional CSS Class) */
.my-unique-additional-css-class .ab-accordion-title { ...}

/** --------------------------------------- */

/** Testimonial border: 
If you just want to customise one border, use an Additional CSS Class.
If you want to have several testimonials with different color borders, 
string the full set of selectors together. And put your unique additional 
CSS class at the beginning.
*/
.my-unique-additional-css-class {...}
.my-unique-additional-css-class.wp-block-atomic-blocks-ab-testimonial.ab-block-testimonial { ... }

/** The Call To Action block */
.wp-block-atomic-blocks-ab-cta.ab-block-cta {
padding-top: 25%;
padding-bottom: 25%;
}
.my-unique-additional-css-class.wp-block-atomic-blocks-ab-cta.ab-block-cta {
padding-top: 10%;
padding-bottom: 10%;
}
/** The Cover Image block */
/** Padding */
.my-unique-additional-css-class.wp-block-cover {
padding-top: 25%;
padding-bottom: 25%;
}
/** Font size */
.entry-content .wp-block-cover .wp-block-cover-text {
    font-size: 256px;
} 
/** I can not find a way to change font size for just one instance of the cover image? */
/** Quote: NOT pullquote */
.entry-content .wp-block-quote.is-style-large {
background-color: red;
padding:50px;
border: 10px solid black;
}
.entry-content .wp-block-quote.is-style-large::before {
    font-size: 40px;
color: #ffffff;
}
.entry-content .wp-block-quote cite {
    color: #ffffff;
}
.entry-content .wp-block-quote.is-style-large p {
    font-size: 32px;
color: #ffffff;
}
/** QUOTE ENDS */
/** ------------------------------------------- */
// Targets AB Notice block
.wp-block-atomic-blocks-ab-notice {
border-radius: 0;
}
.ab-block-notice .ab-notice-text {
    border-radius: 0;
}
/** -------------------------------------------- */

// AB Post Grid
.ab-block-post-grid .ab-block-post-grid-text p {
font-size: 32px;
}
.ab-block-post-grid header .ab-block-post-grid-title a {
font-size: 40px;
}
/** ---------------------------------------------- */