Creating Boxed Layout in Genesis Sample Theme

Howday, I just check the SP forum and someone wanting the boxed layout design in Genesis Sample Theme. I just edited few CSS and added some new CSS in style.css file and make the Boxed layout. Hope that this article will help the other person also. Here is my step:

I added this new CSS

.site-container {
  background: #fff;
  box-shadow: 0 0 3px #c8c8c8;
  -webkit-box-shadow: 0 0 3px #c8c8c8;
  -moz-box-shadow: 0 0 3px #c8c8c8;
  -o-box-shadow: 0 0 3px #c8c8c8;
  margin: 40px auto;
  max-width: 1200px;
}

I modified following CSS

Go to Line no 1053 and replace the current CSS by

.nav-primary {
  background-color: #333;
  padding: 0 40px;
}

Go to line no 882 and replace the current CSS by

.site-header .wrap {
  padding: 40px;
}

Go to line no 1085 and replace the current CSS by

.entry {
    margin-bottom: 40px;
    padding: 0 40px 50px;
}

Go to line no 1148 and replace the current CSS by

.pagination {
    clear: both;
    margin: 40px;
}

Go to line no 1274 and replace the current CSS by

.footer-widgets {
  background-color: #333;
  clear: both;
  padding: 40px 40px 0;
}

I added this CSS in media queries section

@media only screen and (max-width: 767px){
  body {
    padding: 0 3%;
  }
}

box-layout-sample-theme

Share This Article

Subscribe Membership Plan ($9.99/mo)

  • Get full access to all premium tutorials
  • Get Support for the posted content
  • Request for specific how-to tutorials
  • Cancel the subscription at anytime

Reader Interactions

Leave A Reply

Your email address will not be published. Required fields are marked *