Archived topic
Separate containers
5 replies · Started by Nicola on March 13, 2015
Hi Tom
I noticed in one of the customise settings that it allows me to separate containers in a blog post instead of one big container. Can you explain how I do this please and a link to what it will look like as although I have selected this option its still just one container and I wondered if I am doing something wrong!
Many thanks
Nicola -
I think you might be referring to something like this: http://elt.international/reviews/
This is a category page and the posts are in separate containers. This one is set in the customizer with separate containers chosen in layout and masonry enabled in blog.
If you click on just one single post, that post will still be in one container since there's only one post.
The "Separate Containers" option will separate areas like widgets, content area, header and footer. It will also separate individual blog posts on the blog page, but as Deb said above, your single post content will be inside one container.
If you think something is broken, can you link to your site so I can take a look?
Thanks!
Oh ok I think I understand what it is for now. I am trying to achieve a layout similar to this page: http://www.weddingfairs.com/fairs/holiday-inn-leeds-brighouse-hotel-wedding-fayre-15th-march-2015/
I want to be able to split the page into different sections like this one. Is this possible to do using generate press?
I am relatively inexperienced with wordpress so appreciate your help. I have found generatepress very easy so far.
Many thanks
Hmm, you would have to:
1. Change the sidebar layout of the page to have no sidebars
2. Use CSS to target that specific page (there's a page-id-xx class in the <body> element) to remove the background color from the content area:
.page-id-xx .inside-article {
background-color: transparent;
}"xx" above must be changed to the ID of the page.
Then you would need to use the built in grid system to create the columns inside the "Text" tab of your content:
<div class="grid-33 grid-parent">
<div class="inside-grid">
content in here
</div>
</div>
<div class="grid-33 grid-parent">
<div class="inside-grid">
content in here
</div>
</div>
<div class="grid-33 grid-parent">
<div class="inside-grid">
content in here
</div>
</div>Then add your background color and margin/padding to the inner container:
.inside-grid {
background-color: #FFF;
margin: 15px;
padding: 20px;
}Not overly simple, but the above should get you started :)
I was looking at this. I'm intrigued by the sectioning as Tom describes it. That sounds like a useful technique.
It seems like a beginner could get a similar look by just setting up separate containers with a content/sidebar layout and then putting the lower "section" into separate widgets in the footer, keeping the footer background the same color as the body background. Most of that could be done with customizer, I think.
