Full Site Width Content Container No widget

[samw]

Hi

Does anyone know how to create a full site width content container that you can add to any section of a page without a widget. It seems ridiculously hard in Genesis - all I would like to do is add full site width coloured sections to my page without widgets. Same principle as a content box but it extends site width

I have tried everything I can find online and have created a page template that forces site width but this has a few issues:

1. It pushes the breadcrumbs to the bottom of the page.
2. When you add a coloured box this still sits within a page container
3. Can't use this template for static home

Page template code
<?php
/*
Template Name: Blank
*/

//custom hooks

remove_action( 'genesis_loop', 'genesis_do_loop' );
add_action ( 'genesis_after_header', 'genesis_do_loop' );
add_filter ('genesis_pre_get_option_site_layout', '__genesis_return_full_width_content' );

//Ask genesis to do the rest

genesis();

CSS Code blank .site-inner {
display: none;
}

Site is local dev so no link

Many Thanks to anyone who can help

---

SEO & Online Marketing Consultant

Metta3 | G+ | LinkedIn

[Brad Dalton]

You could use get_template_part() which will enables you to use the same container anywhere.

You would need to write the code into a file and then you could hook it in using a genesis hook or add the tag directly to a template file.

---

Tutorials for StudioPress Themes.

[samw]

Hi

Thanks for the reply. I don't really understand what get_template_part() does - and how that would enable me to add a screen wide text box to any page in Genesis. Can you explain further?

I am trying to do this http://www.studiopress.community/topic/full-width-fluid-div-rows-in-page/#post-106752

But only on specific pages - not the whole site

I can already add a div via a box to any page but its constrained by the site inner (1140)

Many Thanks

---

SEO & Online Marketing Consultant

Metta3 | G+ | LinkedIn

[Brad Dalton]

It enables you to add a template to any section of your page or post. You can add it using any Genesis or WordPress hook so its efficient.

You create the template once with css classes etc and then simply hook it in anywhere.

Clearly you need to get the template to do what you want with the CSS that displays full width and then you can use it.

For your custom template file

.site-inner {
	max-width: none;
}

Load a template part into a template (other than header, sidebar, footer). Makes it easy for a theme to reuse sections of code and an easy way for child themes to replace sections of their parent theme.

http://codex.wordpress.org/Function_Reference/get_template_part

If your template file is named full-width.php, then you can hook it in using a hook like genesis_entry_content in a custom function or add the tag directly to any other file:

get_template_part('full-width');

---

Tutorials for StudioPress Themes.

[samw]

Hi

Thanks again for the reply. Sorry, you have completely lost me now - I'm not a coder - I sort of get what you are saying and had a look on wordpress already. I got the other page template codes online.

How would I create a custom page template using this? Do I need to create two files? What about the CSS?

it enables you to add a template to any section of your page or post

. - how do I use this on my pages?

Is there not a way to just add divs to page content when required to do this?

Thanks

---

SEO & Online Marketing Consultant

Metta3 | G+ | LinkedIn

[Brad Dalton]

What theme are you using? Please link to your site. You need custom code to customize your theme.

Yes, another option is to use custom fields as the best way to go for adding unique content in any position on any post.

You can use the native WordPress meta box and add a custom function with CSS class for the full width layout or a plugin but it only adds the interface.

---

Tutorials for StudioPress Themes.

[samw]

Hi

Thanks again for replying

While I'm not a developer, I'm usually able to modify theme files to get the desired results 🙂

It seems very difficult to add coloured full site width sections to a genesis page and I see a number of people have asked the same question on the forums. Theme is Enterprise Pro but on local dev so no link im afraid.

Based on your get template suggestion above, I tried the following:-

1. Custom Template (Test)
<?php
/**
* This file adds the Test template to the Enterprise Pro Theme.
*
* @author StudioPress
* @package Enterprise Pro
* @subpackage Customizations
*/

/*
Template Name: Test
*/

//* Add custom body class to the head
add_filter( 'body_class', 'enterprise_add_body_class' );

function enterprise_add_body_class( $classes ) {
$classes[] = 'test';
return $classes;

}

//* Force full width content layout
add_filter( 'genesis_site_layout', '__genesis_return_full_width_content' );

//* Run the Genesis loop
genesis();

2. I then added the new custom css class "test" for the site inner width
.test.site-inner {
max-width: none;
}

In theory I thought this would call the custom css class for the site inner - but it doesnt

Moving on to get template, perhaps you could clarify this part

You create the template once with css classes etc and then simply hook it in anywhere.

Clearly you need to get the template to do what you want with the CSS that displays full width and then you can use it.

For your custom template file
.site-inner {
max-width: none;
}

Do you mean create a custom page template and add this?
.site-inner {
max-width: none;

Or create a single .php named full-width file that just contains this code?

I understand the logic you are suggestion with the get template function - I'm just not sure what needs to go in the custom template file that get's called - it only needs to change site-inner width - what do you suggest adding to the file to change this - I can create the usual page templates but how do you set the site-inner

Many Thanks

---

SEO & Online Marketing Consultant

Metta3 | G+ | LinkedIn

[Brad Dalton]

Here's an example of executing the code in the file named subscribers.php in the content area of a specific page named subscribers:

add_action ( 'genesis_entry_content', 'popular_posts_before_content' );
function popular_posts_before_content() {
if ( is_page('subscribers') ) {
    get_template_part( 'subscribers' ); 
}}

My suggestion would be to try a method like this, making sure your CSS works and displays the container full width.

What this example does is display a list of subscribers based on the code in the subscribers.php file but yours would create a container and echo a div for a class in your style sheet which displays the container full width.

You could include a custom field in the file so you can then populate the container with content using the custom fields meta box on every Edit screen.

You could also use a custom field on its own with CSS classes which may work.

---

Tutorials for StudioPress Themes.

[samw]

Hi

Thanks - any chance you could share the actual code required to do this!

---

SEO & Online Marketing Consultant

Metta3 | G+ | LinkedIn

[Brad Dalton]

I haven't written the code to do that otherwise i would.

---

Tutorials for StudioPress Themes.

[Brad Dalton]

I haven't written the code to do that otherwise i would.

---

Tutorials for StudioPress Themes.

[samw]

No Worries

I have now solved the problem after a lot of hunting around using CSS - there's a couple of ways to achieve this. No idea of the implications for mobile responsiveness or site load, so if anyone wishes to comment feel free:

Here's how to add full browser width bars to any part of your theme/page etc using CSS & Divs - just style accordingly

Method A - use the section class in CSS - as seen here http://codepen.io/receter/pen/uBJaK
I haven't worked out how to get my text to format as I would like yet - centred in section but here's my css
.section {
margin: 0 auto;
width: 25rem;
background: white; (background middle if you extend text)
padding: 20px;
}
.section h2 {
color: white;
position: relative;
background: white; (this changes the middle of box colour behind text)
}
.section h2:before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: -9999px;
right: 0;
border-left: 9999px solid red; (this changes box colour on left)
box-shadow: 9999px 0 0 red; (this changes box colour on right)
}

Method B - Same principle different approach http://www.sitepoint.com/css-extend-full-width-bars/

My css here

.extendfull, .extendleft
{
padding-left: 3000px;
margin-left: -3000px;
}

.extendfull, .extendright
{ background:#000;
padding-right: 3000px;
margin-right: -3000px;
}
.extendfull body {
overflow-x: hidden;
}

Voila - coloured full width divs to use anywhere you fancy

---

SEO & Online Marketing Consultant

Metta3 | G+ | LinkedIn

[Brad Dalton]

Good stuff Sam and thanks for both working this out yourself and sharing the solution.

---

Tutorials for StudioPress Themes.

[Author]

Posts