Change Color of Block column

[alessandra]

Hi there,
I have a little question.

I’m setting up a Columns block in the home page, setting it to two columns. I would like to change the background colour of one of this (the first columns on the left specifically). Please, would you tell me the css code for this change?

P.S. I’m working on a construction site

Thanks a lot

[David]

Hi there,

select the Column you wish to style, in the Settings Sidebar > Advanced, give the column an Additional CSS class e.g bg-red then:

.bg-red {
    background-color: red;
    padding: 5px !important;
} 

The padding is optional but by default the columns don’t have any.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[alessandra]

thank you so much for your help

[David]

You’re welcome

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Linda]

Hi David,

Now working on site design. Read Alessandra’s post since I’m trying to do something similar, only behind 2 columns. I tried the CSS you provided, changing “red” to “green” and put it in the 2 places you suggested … but nothing happened.

I’m experimenting with our light green as a band of color behind the initial 2 columns (heading text and image placeholder).

We use the SiteOrigin CSS plugin, if that’s important. I tried your CSS in Customizer location and in WordPress “Custom CSS” location, but neither seemed to work.

Any ideas? I’ll keep trying until you have time to reply (it’s Saturday after all) and post back any progress.

Thanks for any guidance,

Linda

PS – is there a way to specify the green hex color?

[Linda]

P.S.2 – Or is this where a hero image comes in? I’ve never used a hero image before, but the examples doc shows one that’s close to what I’m trying for (the tree image, text on right). Ours would have text and image (video) on reversed. If a hero would work, how do you find it? I’ve searched all over your site and forum and can’t figure out where you find it to use it. Everything assumes (and rightly so for most) the reader knows how to access it.

Linda

[David]

Hi Linda,

seen the new topic, one of us will respond there asap.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Linda]

And on a Saturday!! That’s great.

This design step is giving me more exciting challenges! (that’s my more positive way of saying “driving me crazy” and “making me feel stupid”).

Linda

[Author]

Posts