Make 4 Panels Within the Main Content Area?

[tdean]

Can I make 4 panels (with white background and margin) within the main content area? I’ve included a pic of what I mean. Its got to be some block grid layout or something. If I just try to add a content area to that main builder layout its all just in a big container with the white background.

Example:
http://i46.tinypic.com/2u431wj.jpg

Thanks,

TW

Topic

[tdean]

NOTE FOR ABOVE: Yeah, what I’m talking about is like a post grid with 2 columns and 2 rows but with custom content in it. I just tried adding a post grid to the builder layout and got the containers I’m looking for. I just need to be able to add custom content. Its on the home page so its a builder layout.

Thanks,

[Jason Bobich]

Hello,

Unless I’m overlooking something, there’s no feature in the theme that would allow you to do this directly, I don’t think. You could only do this via customization. If you’re custom with basic HTML, there is a class “boxed-layout” you can use that will automatically make a DIV have the white background and rounded corners.

The problem is that both the “Columns” element and the “Content” element of the theme are both styled in this format. This is where you’d have to make your own customizations to the theme for what you want.

For example, you could style the “Columns” element to have no padding and a transparent background. —

For CSS changes, it’s a good idea to use a tool like firebug or Google Chrome’s built-in developer tools to locate them and then put the edits either in your child theme or in the “Custom CSS” option on your theme options page.

.element-columns .element-inner { background-color: transparent; padding: 0; }

Also, here’s a helpful tutorial on how to use Firebug – http://vimeo.com/20917974. The only thing I’d suggest not doing is actually making edits to the theme’s CSS files, as it shows at the end of that video. However, the video serves as a good introduction to Firebug and how it can be used to find what CSS is effecting certain areas of your site without ever digging around in any files.

Then you can setup a Columns element with two columns, two boxes in each —

<div class="boxed-layout">Box 1</div>
<div class="boxed-layout">Box 2</div>

[tdean]

Thank you. I use firebug everyday, it rules. That’s how I’ve gotten this far. So I did this and you’re right I now have two columns on no background with no padding. But with the code above for the boxed layout…the white boxes aren’t showing? Box 1 and Box 2 needs to be in their own white box. Same with 3 and 4…

See pic:
http://i45.tinypic.com/10h4vhu.jpg

[Jason Bobich]

Sorry, should be this:

<div class="boxed-layout">
	<div class="boxed-inner">
		Box 1
	</div>
</div>

<div class="boxed-layout">
	<div class="boxed-inner">
		Box 2
	</div>
</div>

[Jason Bobich]

You could also pretty easily just style your own element.

Your custom CSS —

.whatever {
	background-color: #fff;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	padding: 10px;
}

Your columns element —

<div class="whatever">Box 1</div>
<div class="whatever">Box 2</div>

[tdean]

Or I just found out you can add this to your child theme:

.element-columns .element-inner { background-color: transparent; padding: 0; } 

.boxed-layout, .article-wrap, #respond {
    margin: 0 0 20px;
	background-color: #FFFFFF;
    border-radius: 10px 10px 10px 10px;
    padding: 20px;
}

Thank you so much! You guys are the best!

[Jason Bobich]

Yeah, sure however you want to do it. 😉 … lots of possibilities.

[Author]

Replies