[Resolved] Boxed layout

Home Forums Support [Resolved] Boxed layout

Home Forums Support Boxed layout

Viewing 15 posts - 1 through 15 (of 17 total)
  • Author
    Posts
  • #117620
    Scott

    I would like to have a boxed layout like this.

    Cant this be done with GP?

    Thanks.

    #117647
    Tom
    Lead Developer
    Lead Developer

    Absolutely! This can be done inside “Customize > Layout”.

    1. Customize > Layout > Header Layout: Contained
    2. Customize > Layout > Navigation Layout: Contained
    3. Customize > Layout > Content Layout: One Container

    Let me know if you need more info πŸ™‚

    #133087
    Scott

    Further to the above, how would I add padding around the header, navigation and content container?

    Thanks!

    #133121
    Tom
    Lead Developer
    Lead Developer

    Our Spacing add-on allows you to add spacing around the header and content super easily.

    Or are you wanting padding around the entire website container?

    #133136
    Scott

    Thanks Tom.

    I have added spacing to the content and header now. How can I add (white) spacing to the left and right of the navigation?

    #133139
    Tom
    Lead Developer
    Lead Developer

    That’s a little tricky because the navigation doesn’t have a container by default.

    Do you have GP Hooks?

    #133154
    Scott

    Yes I have GP hooks

    #133157
    Tom
    Lead Developer
    Lead Developer

    Cool.

    1. Go to “GP Hooks > Before Header” and add this:

    <div class="site-wrapper grid-container grid-parent">

    2. Go to “GP Hooks > wp_footer” and add this:

    </div><!-- .site-wrapper -->

    3. Add this CSS:

    .site-wrapper {
          padding: 20px;
    }

    Adjust the px as needed – you can also remove the spacing you added to the header and content πŸ™‚

    #133185
    Scott

    Unfortunately that didn’t work for me. The navigation still has no padding to the right and left of it and I still needed to enter spacing for content and header.

    #133215
    Tom
    Lead Developer
    Lead Developer

    Any chance I can get a link to your site?

    #133318
    Tom
    Lead Developer
    Lead Developer

    Ah, we forgot to add a color!

    Try this for your CSS:

    .site-wrapper {
          padding: 20px;
          background-color: #FFF;
    }
    #133356
    Scott

    Ha thanks. Working great now!

    #133369
    Tom
    Lead Developer
    Lead Developer

    Awesome! πŸ™‚

    #299922
    Gabriele

    Hi Tom,
    first I’m very pleased with GP, kudos to you!

    I’m trying to achieve the same things but in my case the primary navigation is a full width banner above the header and the secondary navigation below the header.
    I would like to leave the primary navigation (and the header itself maybe) full width and add a padding for the secondary navigation, body content and footer, so the wrapper must comprehend only these elements I suppose.
    I’m trying to achieve something like this http://www.effektiv.fr but + the primary navigation full width above the header.
    I tried to put

    in GP Hooks “after header content” or “after header” but doesn’t work.
    Please could you help me with that?
    Also I would like to change the behavior for small devices and smartphones (like the site I linked before), how can I do? Is it better to write the css with media queries only for big screens or instead change it for exclude the padding for small devices?
    And last how can I put a top margin above the footer so that it looks a separate container (please refer to the same site) if I use one-contrainer option in GP?

    Thanks and have a nice day.

    #299981
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    Any chance you can start a new topic and link me to what you’ve created so far?

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