Transforming rtPanel theme layout from 960 to 1024


#1

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.


#2

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.


#3

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?


#4

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.


#5

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.


#6

You are welcome :-)


#7