4 Columns Change color on 1 H Tag <p> tag Changes all of them

So I change color swath for a single H3 in a 4 Column setup along with paragraphs, and it changes all of them. I am needing 4 different colors for the H tags and Paragraphs. I have tried a special class and ID for the H tags and such… However, I am cannot make it work…

Anything would be helpful.

``Hi @elstevo711,

If you want to have 4 columns with unique styling, one method is to assign a custom class for each of the columns, and then classes for any elements within those that need to be unique.

eg.

Custom class called

.column1

Add that to the column.

Now in the class manager make classes that you want to apply to any element within that column.

eg. .column1 h3

(Make sure you keep the spacing). The style will automatically apply to any H3 elements in the column.

Fantastic… Thanks for the help… Trying it now…

If you have trouble, this is my technique. Some people may apply a custom class directly, but I find this much easier and keeps the classes tidy and easy to understand when you come back to them later.

So changing the paragraph would just be

.column1 p

3 Likes

That’s fantastic mate! Also, inspiring… I have been trying to wrap my head around things since this afternoon… To no avail I might add… Thanks for the outlining vid… That helps a lot… Cheers!

1 Like

@PeteSharp an off topic - how you get those red arrows in drop-down options in blocs class properties? And how you have in a new project the color swatches already filled with your colors?
The first answer is just a curiosity, the second one I’m looking for that and never found a solution.

The first one is in the MacOS settings, but you need Catalina I think, or maybe it was Mojave?.

System Prefs - General - Accent colours.

The swatch colours I just drag there from memory, lol it’s been a while, I’m not on my Mac, I’ll get back to you. There is a bug, though, it will give me the wrong colour first click for some reason.

1 Like