A full width theme normally consist of the header, nav, content and footer areas that have backgrounds that span the across the entire window while the inner area with the actual content of each section stays centered on the page. This help creates a visual separation between each section and to some just ascetically pleasing.
To create this effect you usually have your main container to each section as well as a wrap inside to keep its contents centered. The main container is set to 100% width and the inner wrap to the width you’d like your site to be fixed at then centered with a #margin: 0 auto;.
The steps below will go over exactly how to create a full width genesis child theme using the sample child theme as a base.
Genesis Structural Wraps
Step: 1
The Genesis Theme Framework by genesis comes with a wrap class inside it’s header, nav, and footer. The content area with sidebar is also wrapped by a div with the id of content-sidebar-wrap. For you basic content sidebar theme these are all the structual wraps you would need, however if you are to use the content sidebar sidebar or sidebar content content or even content sidebar sidebar layouts you will find one the sidebars to be left out from a wrap with no way to keep it beside your content. In Genesis version 1.6 a new function was created to aid in fixing this issue.
Adding or removing wraps for that matter is as simple as an add theme support function by the name of genesis-structual-wraps. For the full width theme we will be adding a wrap div to the inner div. To do this simply copy the code below and add it to your child theme’s function.php.
add_theme_support( 'genesis-structural-wraps', array( 'header', 'nav', 'subnav', 'inner', 'footer-widgets', 'footer' ) );
this theme support function contains all the id’s of the divs you wish to add an extra div wrapping it’s content in an array. Genesis currently supports adding the wrap div to:
- header
- nav
- subnav
- inner
- footer-widgets
- footer
inner isn’t originally in the array and adding the add_theme_support() code above will add it.
NOTE: To remove wraps for div simply remove the name from the array.
The style changes
Step 2:
By default the sample child theme for genesis is boxed in a 960px #wrap that constrains all the elements inside to that width centering them on the page. Find #wrap in your sample child theme style.css around line 162.
Change:
#wrap {
background-color: #fff;
margin: 0 auto 10px;
width: 960px;
}
to:
#wrap {
background-color: #fff;
}
This will remove the contraint and allow our elements inside to span as far as we please.
Step 3:
Add styles for the wrap divs that is inside each our main div structures. This style will set each area to 960px width with the margin:0 auto; centering them on the page.
.wrap {
margin: 0 auto;
width: 960px;
}
NOTE: Can be more specific to each area by adding the id of each setion before .wrap for example:
#nav .wrap { width: 900px; }
Will set the nav to be shorter than the other areas.
Step 4:
Find each main structural div and remove its width. The width we set for .wrap will handle this. Search for #header, #nav, #subnav, #inner, #footer-widgets & #footer and remove the width set for each.
Step 5:
Create your master piece.
Free Genesis Child Theme Download:
About Christopher
Quick question. I am placing the navigation in the header and when I go to remove the primary nav using this hook:
// Remove the Primary Navigation
remove_action( ‘genesis_after_header’, ‘genesis_do_nav’ );
all the content is being shoved to the right. This also happens when trying to remove it on the back end.
any ideas?
Hm, I wasn’t able to reproduce this locally. Is there a live link somewhere I could check out? It’s most likely a CSS issue and a float that isn’t being cleared properly.
false alarm – I just tried it and got it to work! thanks!
actually, on the blog page
http://kaizendev.pairserver.com/jcd-test-server/?page_id=7
Ah, yup, put a clear: both; on #inner and wahlah
.
I’ve another question. how would one go about creating full-width sections similar to the way one might do it here: http://ntunemedia.com/#home_section ?
It seems there should be a way with this one, but haven’t figured it out yet. it seems the #inner div is the only one we have to manipulate when creating a custom page. or is there way to create multiple full-width divs?
thanks!
ps. can you add the “subscribe to this blog” plugin so we can get an email/rss notification when a reply is here?
Check out the visual hook guide ( http://genesistutorials.com/visual-hook-guide )and check the radio button “Markup” beside the page title. This will show you the main div structure in conjunction with the hooks.
Depending on above or below the main content I would use one the hooks below to input your full width areas.
genesis_after_header
genesis_before_footer
And thanks for the suggestion with the plugin! installing that now.
Hi Christopher,
First of all, I really enjoy the visual hook guide you’ve posted.
Personally I prefer the use of CSS to create a full width Genesis child them, but I’ve used the function to simply remove them all (except from the main #wrap which isn’t AFAIK within this function)
Do you perhaps know if a similar function is available for the Genesis widget-wraps as well?
Best regards,
Cor
This could be accomplished through filtering
genesis_register_sidebarwithgenesis_register_sidebar_defaults. By default the value for'before_widget'is:You can filter this function and remove
. If you want I could whip some code up for you to copy and paste into your child themes function.php let me know. If you figure it out though make sure to drop back by and share how you went about it!
Hi Christopher, and thanks!
Since more needed to be changed, I’ve decided to redo the Genesis sidebars instead, instead of adding a filter (meaning removing them, and adding a new one).
If allowed, here’s a link to the (current) final result: http://klanten.24design.net/html5/
I have a project which requires a 520 px wide fixed theme. Can this be accomplished with the genesis framework?
Regards,
John Van Schaik
Definitely possible. Most would be just stylesheet changes but I may remove the sidebars at that width or just set the site to full width content. then again it really depends on what you will be doing with it. 520px sounds like embedding it into a Facebook tab; If so have done that several times and is 100% possible with the genesis framework. Good luck!
I have another question. I’m fairly new to this and I don’t know what I’m doing. I followed the steps above and was successful in doing it with the nav bar and footer, I just can’t get the header image to take up the entire header section, and not just the center.
If it is an image you may need a larger image to take up the space you want it to, or have it repeat. Check out if it is repeating or large enough first and play with that. If can’t get it working leave a link to the site and I’ll check it out.
Yeah I tried that. I can’t seem to make the top header go all the way across the screen. There must be something else in the css that’s not allowing it to. I dunno, I just knew about css two weeks ago. XD
My site is http://www.sagoyism.com
RIght now I just set the header as text and description because images make it look weird.
Hi Christopher,
Thanks for the article, I am having some trouble after removing the width tag.
The content header and background is not centering. Any ideas on how I can fix this?
Take a look; http://HomeBizCouple.com
Thanks for any insights you can give!
Rob
Hello, I am trying to set up a full width nav bar with content centered on this development site:
http://www.timsquires.com/flight
The closest I can get is having the nav bar going full width, but the content sits way off to the left. I think your tutorial is pointing me in the right direction, but I can’t figure out what I’m doing wrong – would be grateful for your help. Many thanks, Tim
Hi Tim,
On line 54 of your css file you will find:
#nav .wrap { width: 900px; }simply change it to:
#nav .wrap { width: 900px; margin: 0 auto; }The margin: 0 auto; basically is taking the width of 900px and adding the same margin on the left and right to center it.
Site is looking great by the way.
Thank you so much! I’ve really been stuck with that and I’m grateful for your help. Thanks also for your compliments regarding the site – also much appreciated. Many thanks, Tim
Thanks so much. this was just what I needed. I love people smarter than me to figure these things out.