Skip to content

Instantly share code, notes, and snippets.

@srikat
Last active August 29, 2015 13:55
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save srikat/8764405 to your computer and use it in GitHub Desktop.
Save srikat/8764405 to your computer and use it in GitHub Desktop.
Adding double border around the container in Focus Pro. http://sridharkatakam.com/add-double-border-around-container-focus-pro/
//* Add div.wrap1 and div.wrap2 inside .site-container
add_action( 'genesis_before_header', 'sk_add_wraps_opening_divs', 9 );
function sk_add_wraps_opening_divs() {
echo '<div class="wrap1"><div class="wrap2">';
}
add_action( 'genesis_after_footer', 'sk_add_wraps_closing_divs' );
function sk_add_wraps_closing_divs() {
echo '</div></div>';
}
/* Adding double border around the container in Focus Pro
----------------------------------------------------------- */
body {
background: #eee url("images/bg.png");
}
.site-container {
background-color: #fff;
margin-top: 3rem;
margin-bottom: 3rem;
}
.wrap1 {
border: 2px solid #DFDDDB;
padding: 3px;
}
.wrap2 {
border: 1px dashed #DFDDDB;
padding: 1rem;
}
.site-header .widget-area {
width: 658px;
}
.sidebar-primary {
width: 270px;
}
.footer-widgets-1, .footer-widgets-2, .footer-widgets-3 {
width: 300px;
}
@media only screen and (max-width: 1160px) {
.site-header .widget-area {
width: 538px;
}
.footer-widgets-1,
.footer-widgets-2,
.footer-widgets-3,
.sidebar-primary {
width: 230px;
}
}
@media only screen and (max-width: 1023px) {
.footer-widgets-1,
.footer-widgets-2,
.footer-widgets-3,
.sidebar-primary,
.site-header .widget-area {
width: 100%;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment