Last active
January 15, 2016 20:27
-
-
Save mjsdiaz/7538426 to your computer and use it in GitHub Desktop.
Genesis Layout Full Height Sidebar with Header above Content and Footer Below Content
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?php | |
//* Do NOT include the opening php tag | |
// Add the code below to the functions.php of the Genesis Sample 2.0.1 theme | |
// Force sidebar-content-sidebar layout setting | |
add_filter( 'genesis_site_layout', '__genesis_return_sidebar_content_sidebar' ); | |
// Unregister layout settings | |
genesis_unregister_layout( 'sidebar-content' ); | |
genesis_unregister_layout( 'content-sidebar' ); | |
genesis_unregister_layout( 'content-sidebar-sidebar' ); | |
genesis_unregister_layout( 'sidebar-sidebar-content' ); | |
genesis_unregister_layout( 'full-width-content' ); | |
// Unregister and remove markup for sidebar-primary | |
unregister_sidebar( 'sidebar' ); | |
remove_action( 'genesis_after_content', 'genesis_get_sidebar' ); | |
// Add support for structural wraps | |
add_theme_support( 'genesis-structural-wraps', array( | |
'nav', | |
'subnav', | |
'site-inner' | |
) ); | |
//Remove the header from normal location | |
remove_action( 'genesis_header', 'genesis_header_markup_open', 5 ); | |
remove_action( 'genesis_header', 'genesis_do_header' ); | |
remove_action( 'genesis_header', 'genesis_header_markup_close', 15 ); | |
// Move header into into content-sidebar-wrap | |
add_action( 'genesis_before_content', 'genesis_header_markup_open', 5 ); | |
add_action( 'genesis_before_content', 'genesis_do_header' ); | |
add_action( 'genesis_before_content', 'genesis_header_markup_close', 15 ); | |
//Remove the footer from normal location | |
remove_action( 'genesis_footer', 'genesis_footer_markup_open', 5 ); | |
remove_action( 'genesis_footer', 'genesis_do_footer' ); | |
remove_action( 'genesis_footer', 'genesis_footer_markup_close', 15 ); | |
// Move footer into content-sidebar-wrap | |
add_action( 'genesis_after_content', 'genesis_footer_markup_open', 5 ); | |
add_action( 'genesis_after_content', 'genesis_do_footer' ); | |
add_action( 'genesis_after_content', 'genesis_footer_markup_close', 15 ); | |
// Move footer widget into content-sidebar-wrap above new footer | |
remove_action( 'genesis_before_footer', 'genesis_footer_widget_areas' ); | |
add_action( 'genesis_after_content', 'genesis_footer_widget_areas', 4 ); | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* Replace each section of Genesis Sample 2.0.1 with the code for each section */ | |
/* Site Containers | |
--------------------------------------------- */ | |
/* This is the entire section */ | |
.wrap { | |
background-color: #777; /* full height sidebar background color */ | |
margin: 0 auto 0 0; /* flush left layout */ | |
width: 100%; | |
max-width: 960px; | |
} | |
/* Column Widths and Positions | |
--------------------------------------------- */ | |
/* This is the entire section */ | |
/* Wrapping div for .content and .sidebar-primary */ | |
.content-sidebar-wrap { | |
background-color: #fff; | |
float: right; | |
width: 740px; | |
} | |
/* Content */ | |
.content { | |
background-color: #fff; | |
width: 100%; | |
} | |
/* Primary Sidebar */ | |
.sidebar-primary { | |
width: 0; | |
} | |
/* Secondary Sidebar */ | |
.sidebar-alt, | |
.sidebar { | |
background-color: #777; | |
float: left; | |
margin: 0; | |
padding: 0; | |
text-align: center; | |
width: 220px; | |
} | |
/* | |
Site Header | |
------------------------------------------------------------------------------------- */ | |
/* This is the entire section */ | |
.site-header { | |
margin: 0; | |
overflow: hidden; | |
padding: 40px 0; | |
padding: 4rem 0; | |
width: 100%; | |
} | |
/* Title Area | |
--------------------------------------------- */ | |
/* Change only this section */ | |
.title-area { | |
float: left; | |
font-family: Lato, sans-serif; | |
font-weight: 700; | |
padding: 16px 40px; | |
padding: 1.6rem 4rem; | |
width: 320px; | |
} | |
/* Widget Area | |
--------------------------------------------- */ | |
/* Change only this section */ | |
.site-header .widget-area { | |
float: right; | |
text-align: right; | |
width: 320px; | |
} | |
/* | |
Footer Widgets | |
---------------------------------------------------------------------------------------- */ | |
/* Change only these sections */ | |
.footer-widgets-1, | |
.footer-widgets-3 { | |
width: 193px; | |
} | |
.footer-widgets-2 { | |
width: 193px; | |
} | |
.footer-widgets-1 { | |
margin: 0 40px; | |
margin: 0 4rem; | |
} | |
.footer-widgets-3 { | |
margin: 0 40px 0 0; | |
margin: 0 4rem 0 0; | |
} | |
/* Other styles you can edit */ | |
.sidebar .widget { | |
background-color: #777; | |
color: #fff; | |
} | |
.sidebar .widget .widget-title { | |
color: #fff; | |
} | |
.sidebar .widget a { | |
color: #fff; | |
} | |
@media only screen and (max-width: 1139px) { | |
/* Remove this entire section */ | |
} | |
/* Change @media only screen and (max-width: 1023px) { to */ | |
@media only screen and (max-width: 960px) { | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Hi, This is awesome, do you have a copy of the full CSS file as the CSS here is not too straightforward to replace the genesis sample theme CSS selectors as the selectors in the sample theme CSS files have more selectors on the lines than shown in the file. Maybe the sample theme has been updated. For example in the sample theme CSS file the .wrap selectors is actually two selectors ".site-inner, .wrap {..." Cheers,
Luke