Hello Guys,
I am curious to know how I can transform my rtPanel theme's layout from 960 pixel grid to 1024 px grid layout using sass, so that theme will be consistent throughout and responsive too ?
Any help would be really appreciated.
Hello Ankit,
If you are ready to adjust with width, then you need to change the value of "$ninesixty-grid-width" in style.scss to "1020px " or "1080px".
Compass will generate grids automatically.
Let me know if this helps.
Thanks I had the same question. Since I was developing a 1020px site and having some problems with the grid. If I'm using a child theme though I would guess that the style.scss file would need to be in the child folder? or should it stay in the parent folder?
Hello UptownGirl27,
I hope you are using latest child theme, if not please get it from here: https://github.com/rtCamp/rtpanel-child-theme
If you are familiar with Sass/Compass, then to update grids you just need to change the values of following variables given in style.scss :
$ninesixty-gutter-width: 20px;
$ninesixty-grid-width: 960px;
$ninesixty-columns: 12;
If you are using normal css, here you can customize grids as per requirement http://grids.heroku.com/ or replace following code in style.css
/* Grids */
.rtp-container-12 { margin-left: auto; margin-right: auto; width: 1020px; }
/* Grid >> Global */
.rtp-grid-1, .rtp-grid-2, .rtp-grid-3, .rtp-grid-4, .rtp-grid-5, .rtp-grid-6, .rtp-grid-7, .rtp-grid-8, .rtp-grid-9, .rtp-grid-10, .rtp-grid-11, .rtp-grid-12 { display: inline; float: left; margin-left: 10px; margin-right: 10px; }
.rtp-push-1, .rtp-push-2, .rtp-push-3, .rtp-push-4, .rtp-push-5, .rtp-push-6, .rtp-push-7, .rtp-push-8, .rtp-push-9, .rtp-push-10, .rtp-push-11, .rtp-pull-1, .rtp-pull-2, .rtp-pull-3, .rtp-pull-4, .rtp-pull-5, .rtp-pull-6, .rtp-pull-7, .rtp-pull-8, .rtp-pull-9, .rtp-pull-10, .rtp-pull-11 { position: relative; }
/* Grid >> Children (Alpha ~ First, Omega ~ Last) */
.rtp-alpha { margin-left: 0; }
.rtp-omega { margin-right: 0; }
/* Grids */
.rtp-grid-1 { width: 65px; }
.rtp-grid-2 { width: 150px; }
.rtp-grid-3 { width: 235px; }
.rtp-grid-4 { width: 320px; }
.rtp-grid-5 { width: 405px; }
.rtp-grid-6 { width: 490px; }
.rtp-grid-7 { width: 575px; }
.rtp-grid-8 { width: 660px; }
.rtp-grid-9 { width: 745px; }
.rtp-grid-10 { width: 830px; }
.rtp-grid-11 { width: 915px; }
.rtp-grid-12 { width: 1000px; }
/* Extra Space */
.rtp-prefix-1 { padding-left: 85px; }
.rtp-suffix-1 { padding-right: 85px; }
.rtp-prefix-2 { padding-left: 170px; }
.rtp-suffix-2 { padding-right: 170px; }
.rtp-prefix-3 { padding-left: 255px; }
.rtp-suffix-3 { padding-right: 255px; }
.rtp-prefix-4 { padding-left: 340px; }
.rtp-suffix-4 { padding-right: 340px; }
.rtp-prefix-5 { padding-left: 425px; }
.rtp-suffix-5 { padding-right: 425px; }
.rtp-prefix-6 { padding-left: 510px; }
.rtp-suffix-6 { padding-right: 510px; }
.rtp-prefix-7 { padding-left: 595px; }
.rtp-suffix-7 { padding-right: 595px; }
.rtp-prefix-8 { padding-left: 680px; }
.rtp-suffix-8 { padding-right: 680px; }
.rtp-prefix-9 { padding-left: 765px; }
.rtp-suffix-9 { padding-right: 765px; }
.rtp-prefix-10 { padding-left: 850px; }
.rtp-suffix-10 { padding-right: 850px; }
.rtp-prefix-11 { padding-left: 935px; }
.rtp-suffix-11 { padding-right: 935px; }
/* Push and Pull Space */
.rtp-push-1 { left: 85px; }
.rtp-pull-1 { left: -85px; }
.rtp-push-2 { left: 170px; }
.rtp-pull-2 { left: -170px; }
.rtp-push-3 { left: 255px; }
.rtp-pull-3 { left: -255px; }
.rtp-push-4 { left: 340px; }
.rtp-pull-4 { left: -340px; }
.rtp-push-5 { left: 425px; }
.rtp-pull-5 { left: -425px; }
.rtp-push-6 { left: 510px; }
.rtp-pull-6 { left: -510px; }
.rtp-push-7 { left: 595px; }
.rtp-pull-7 { left: -595px; }
.rtp-push-8 { left: 680px; }
.rtp-pull-8 { left: -680px; }
.rtp-push-9 { left: 765px; }
.rtp-pull-9 { left: -765px; }
.rtp-push-10 { left: 850px; }
.rtp-pull-10 { left: -850px; }
.rtp-push-11 { left: 935px; }
.rtp-pull-11 { left: -935px; }
You do not need to change in parent theme at all. Let me know if this helps.
Unfortunately, I’m not familiar with Sass/Compass. I was editing the scss file initially but it sounds like I need to do something else in order for it to work. Thanks for the other link.
You are welcome :-)