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
|
1 2 3 4 5 6 7 8 9 |
.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
|
1 2 3 4 |
.nav-primary { background-color: #333; padding: 0 40px; } |
Go to line no 882 and replace the current CSS by
|
1 2 3 |
.site-header .wrap { padding: 40px; } |
Go to line no 1085 and replace the current CSS by
|
1 2 3 4 |
.entry { margin-bottom: 40px; padding: 0 40px 50px; } |
Go to line no 1148 and replace the current CSS by
|
1 2 3 4 |
.pagination { clear: both; margin: 40px; } |
Go to line no 1274 and replace the current CSS by
|
1 2 3 4 5 |
.footer-widgets { background-color: #333; clear: both; padding: 40px 40px 0; } |
I added this CSS in media queries section
|
1 2 3 4 5 |
@media only screen and (max-width: 767px){ body { padding: 0 3%; } } |
Leave a Reply