[Resolved] Background Color for Sections?

[Barbara Lougheed]

I’m using the sections feature as a home page to display my four books as four different sections. I made each section a different pastel color, but it would be nicer if each section could be physically separated from each other, like they are in the blog with the background color between all boxes. Is there a way to do this? If not, it would be a nice feature to add in the future. Thanks Tom, for giving us such a versatile template!

[Tom]

Interesting idea – a margin option instead of just padding.

For now, you could do something like this:

1. Add a custom class to each section you want to add spacing after, for example: section-spacing

2. Add this CSS:

.section-spacing {
      margin-bottom: 40px;
}

Let me know if that works or not 🙂

[Barbara Lougheed]

I am not familiar with CSS, so it’s probably not wise for me to try to change anything. Just consider this a request for a future update. 🙂 A different color between the sections would make it obvious that it’s another section. Of course, I cold pick bold colors for each section to do the same thing, but since I’ve got pictures in each section, it seems like a bold color would overwhelm the pictures.

[Tom]

CSS is pretty tame – not a lot can go wrong when playing with it 🙂

To add a solid color between sections, you can do something like this:

1. Add a custom class to the section – for example, section-border

#generate-section-1.section-border {
      border-bottom: 20px solid #DDDDDD;
}

#generate-section-3.section-border {
      border-bottom: 20px solid #000000;
}

You can change the number to specify whichever section you want in order, and adjust the pixels and color as you need.

Adding CSS: http://generatepress.com/knowledgebase/adding-css/

If you need any more guidance just let me know – happy to help 🙂

[Barbara Lougheed]

I activated CSS thru Jetpack, then just copy and pasted the code you wrote above into the “CSS Stylesheet Editor,” hit “preview,” but saw nothing. Am I missing something?

[Tom]

Did you add the section-border classes to your sections?

[Barbara Lougheed]

O-M-G! It worked! *I* made a CSS change (with YOUR help, obviously, lol)!

So here’s an example of GP sections, with borders separating the sections: http://www.barbaralougheed.com/

Thanks so much for your help Tom!

[Tom]

Awesome! Now you know CSS 😉

Happy I could help 🙂

[Author]

Posts