Support » Theme: GeneratePress » Different colorparts in background

  • inula

    (@janetb)


    Hi,

    I would like to make different colorparts in the background of my homepage like here: https://vng.nl/ (please scroll down: blue, pink, grey, aque, green etc.)

    I always find my way around with css.
    But this is a hard one or maybe impossible without changing the header-, page- and footer.php?

    Maybe set the grid-container to 100% and then make my own inside-containers?
    Or has anyone a better option?

    Greetzzz,
    Janet

    • This topic was modified 8 months ago by inula.
Viewing 7 replies - 1 through 7 (of 7 total)
  • Leo

    (@leohsiang)

    Hi there,

    Yeah each section would need to be in its own <div> and unique classes so you can apply background colors to it.

    If you are using Gutenberg editor, you can also give each block a unique class so you can target the CSS to them.

    Let me know if this helps 🙂

    inula

    (@janetb)

    Hi Leo,

    Thanks for your reply.
    Just in their own divs doesn’t make the background screenwide 🙂

    I’m looking for a simple solution for that.

    Theme Author Tom

    (@edge22)

    You would need to use a section block to achieve something like that. A block that allows you to go full width, yet keeps an inner container.

    We’re working on our own Section block for GP specifically, but there are many block plugins out there currently with this kind of feature.

    Let me know if you need more info 🙂

    inula

    (@janetb)

    Ah, thanks Tom.
    Now I know what I have to look for.

    Here’s my solution.
    CSS

    section{
      width: 100vw;
      position: relative;
      left: 50%;
      right: 50%;
      margin-left: -50vw;
      margin-right: -50vw;
    }
    .rood{background-color:#B5121B; color:#ffffff;}

    The section in the page:

    <section class="rood">
    <div class="grid-container">
    Tekst here
    </div>
    </section>
    inula

    (@janetb)

    Hmmmm, with a grid-container of 1200px, I got a little overflow which I could not hide…

    So I now use this CSS:

    section  {
      margin-left: calc(-100vw / 2 + 1216px / 2);
      margin-right: calc(-100vw / 2 + 1216px / 2);
    }
    inula

    (@janetb)

    Best solution is this:

    body{overflow-x: hidden;}
    section {
     width: 100vw;
     position: relative;
     margin-left: -50vw;
     left: 50%;
    }
    Theme Author Tom

    (@edge22)

    You can achieve full width sections using our Page Builder Container option: https://docs.generatepress.com/article/page-builder-container/

    Then you don’t need any CSS to force it outside the default container.

    Let me know if that helps or not 🙂

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Different colorparts in background’ is closed to new replies.