How to create full width background color on a page

[vandalais]

Hi Folks,

I'm using the Parallax Pro theme and I would like to add a full width background color to different sections of a page. I still want the content inside the 1140px container but I'm trying to get a background color to go from one edge of the screen to the other.

I can't find the tutorial I used to do this before. If I recall you have to move the content out of the container wrap or something like that.

I'm looking for a solution that mimics http://newrainmaker.com/ "who should join" section.

Any help is greatly appreciated.

Thank you so much,
Keith

---

Follow me on Twitter

http://redcubesocial.com

[Brad Dalton]

This should help http://www.genesisframework.com/markup.php

---

Tutorials for StudioPress Themes.

[vandalais]

This reply has been marked as private.

[vandalais]

Hi Brad,

Thanks for your quick response but I’m still lost. I still can seem to get the content to go full width.

---

Follow me on Twitter

[Tony @ AlphaBlossom]

Hi Keith,

I posted a CSS solution to this question on Google + https://plus.google.com/u/0/108577381414098903993/posts/E3QytbHwAjg

Toward the end of the thread...thought it might be of help to you.

Have a great weekend,
Tony

---

Tony Eppright | http://www.AlphaBlossom.com | Follow me on twitter @_alphablossom

[vandalais]

I think I have a suitable solution. I created a page template and named it Full Width Landing.

<?php
/**
 * This file adds the Full Width Landing template to the Parallax Pro Theme.
 *
 * @author StudioPress
 * @package Parallax
 * @subpackage Customizations
 */

/*
Template Name: Full Width Landing
*/

//* Add parallax-home body class
		add_filter( 'body_class', 'parallax_body_class' );
		function parallax_body_class( $classes ) {
		
   			$classes[] = 'parallax-home';
  			return $classes;
  			
		}

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

genesis();

I created the css class full_width_page and used this styling to center the <div> on the page.

.full_width_page {
  max-width: 1140px;
  margin: 0px auto;
  padding: 20px;
  }

Each <div> will have their own background color and styling.

---

Follow me on Twitter

[Tony @ AlphaBlossom]

Great, definitely a better way to go if you can make your page full width. I wasn't sure so the solution I posted to is useful if you can't make your entire page full width and you don't want to/aren't able to make all of the needed css adjustments.

Glad you found your solution!

---

Tony Eppright | http://www.AlphaBlossom.com | Follow me on twitter @_alphablossom

[Remco Heijnen]

Hi Vandalais,

I'm very curious how you did this. I am looking for a very same solution. I'm trying to implement yours but can you elaborate a bit more?
like:
- what is the html element? <div class="?">
- can I do this with the Centric-pro body class as well? I think, yes.

Thnx!

[Remco Heijnen]

hi, already found a solution that I wanted to share. Actually the most simple one I could think of. In centric-pro the site-inner is already without a width. Only the .wrap makes the content 1124px. Let's say I want a specific page that contains a few full width colored sections somewhere on the page. I only target this page with CSS.

In CSS:

.page-id-xx .wrap {
max-width: none;
}
.section-x {
background-color: something;
}
.section-content {
max-width: 1124px;
}

What do you think of this?

Thnx

[Author]

Posts