[Resolved] Background Color for Sections?

Home Forums Support Background Color for Sections?

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #120075
    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!

    #120117
    Tom
    Lead Developer
    Lead Developer

    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 🙂

    #123814
    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.

    #123915
    Tom
    Lead Developer
    Lead Developer

    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 🙂

    #123936
    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?

    #123956
    Tom
    Lead Developer
    Lead Developer

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

    #124115
    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!

    #124116
    Tom
    Lead Developer
    Lead Developer

    Awesome! Now you know CSS 😉

    Happy I could help 🙂

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.