BB and Twenty Twelve - 100% Width Page Template

Beaver Builder
1

Need help with Twenty Twelve page template for full width rows. This is a boxed theme.

I’m not sure which need . and which need #
My guess:
.fl-builder .site-content .content #entry-content

Based on

BB Docs/Full Width Rows - http://forum.wpbeaverbuilder.com/page-builder-developer-documentation/

.fl-builder #content { 
    width: auto; 
}

Reference: For Twenty Twelve, the content wrapper includes more than #content.

Wrapper Start

	// IF Twenty Twelve
	case 'twentytwelve' :
		echo '<div id="primary" class="site-content"><div id="content" role="main" class="entry-content">';
		break;

Wrapper End
	// IF Twenty Twelve
	case 'twentytwelve' :
	?>
			</div>
		</div>
		<?php get_sidebar(); ?>
	</div>
	<?php
		break;
2

Hi Kelly,

My understanding is that because Twenty Twelve only comes in a “Boxed” layout without a built-in option to make it a full width “Fluid” layout (i.e. edge to edge in your browser), making changes to the css won’t be enough to override the page template. I could be wrong, but I think you will need to modify the built-in page templates or make a new custom one to get the result you’re looking for.

I’m hoping one of the Beaver Builder support team has an easier way for you, though:)

3

Hey Kelly,

Colin is right in that Twenty Twelve is strictly a boxed layout theme. You would need to do some theme modification in order to make it full width which would probably be more work than it is worth. I would recommend using a theme that is full width out of the box. It appears you have the Pro version of our product which comes with the Beaver Builder theme. The BB theme can be full width if desired with ease. Let me know if I can assist further and thanks again!

Best,
Billy

4

With the help of several tutorials, I now have Twenty Twelve Wide.

The final bit I need help with - Twenty Twelve full-width template has padding left/right 20px.
http://dth.staging.wpengine.com/?page_id=56

What are the selectors and CSS to remove this left/right padding from Beaver Builder pages using Twenty Twelve’s full width template?

Thanks!

5

Very cool, glad that worked for you and thanks for letting us know! I am assuming you have zeroed out the left/right padding already on your rows/modules. Have you accessed the global settings for Beaver Builder to turn off the global 20px padding by chance? That can be accessed via the Tools button > Global Settings while in editing mode. If that doesn’t work for you, would you mind sending along temp credentials so I can take a look for you?

Best,
Billy

6

[Content Hidden]

7

[Content Hidden]

8

Hi Kelly,

Unfortunately, the login credentials you send along aren’t working for me. Can you please check and resend?

Best,
Billy

9

[Content Hidden]

10

All set, Kelly! There was some rogue padding that I took care of in the 2012C2 stylesheet. For reference, I just removed the left/right padding from:

body .site {
margin-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
}

Let me know if you need anything further and thanks again!

Best,
Billy

11

Great!

But is there a way I can limit this to the Beaver Builder full-width template?

Removing the left/right padding is pulling the header and menu nearly off-canvas.

I’m rubbish with CSS selectors. Is it:

body .beaver-builder-full-with-template
{
margin-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
}
12

Hi Kelly,

This is a bit beyond what we support in here, but the selector you will want to apply the 0 left/right padding rules would be ‘.fl-builder’ before your other selectors.

Best,
Billy

13

Circling back to the original goal - a 100% width page template.

I think this may help. Where

[t]e page template name is page-inner

Twenty Twelve CSS Selector for that page template:
page-template-page-inner-php

Source:

14

Getting closer!

I have to incorporate Billy’s CSS

body .beaver-builder-full-with-template
{
margin-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
}

with:

http://en.forums.wordpress.com/topic/full-width-content-area

.fl-builder plusTwenty Twelve selectors for the 100% width page template

.page-template-showcase-php #content-wrap, .page-template-showcase-php .hfeed-more .hentry {
    width: 100%;
}
.page-template-showcase-php .featured-wrapper img {
    height: 100%;
    width: 100%;
    max-width: 940px;
}
.page-template-showcase-php #content {
    margin-right: 0;
}
.page-template-showcase-php .featured-image img {
    width: 100% !important;
    height: auto !important;
}
.page-template-showcase-php a.read-more, .page-template-showcase-php a.read-more:visited {
    top: 0;
}
.page-template-showcase-php .section-title h1 {
    width: 97.4%;
}