This is searchable archive of our old support forums, which operated from 2012 - 2016. To find out how to get support for your current theme, please visit our support page.

Make 4 Panels Within the Main Content Area?

  • Creator
    Topic
  • #7347
    tdean
    Participant

    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

Viewing 7 replies - 1 through 7 (of 7 total)
  • Author
    Replies
  • #7349
    tdean
    Participant

    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,

    #7350
    Jason Bobich
    Keymaster

    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>
    #7351
    tdean
    Participant

    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

    #7353
    Jason Bobich
    Keymaster

    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>
    #7354
    Jason Bobich
    Keymaster

    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>
    #7355
    tdean
    Participant

    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!

    #7356
    Jason Bobich
    Keymaster

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

Viewing 7 replies - 1 through 7 (of 7 total)
  • The forum ‘Barely Corporate Responsive WordPress Theme’ is closed to new topics and replies.