[Resolved] Boxed layout

[Scott]

I would like to have a boxed layout like this.

Cant this be done with GP?

Thanks.

[Tom]

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 🙂

[Scott]

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

Thanks!

[Tom]

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?

[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?

[Tom]

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

Do you have GP Hooks?

[Scott]

Yes I have GP hooks

[Tom]

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 🙂

[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.

[Tom]

Any chance I can get a link to your site?

[Tom]

Ah, we forgot to add a color!

Try this for your CSS:

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

[Scott]

Ha thanks. Working great now!

[Tom]

Awesome! 🙂

[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.

[Tom]

Hi there,

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

[Author]

Posts