0

Zen is a great theme and comes by 3 columns gris as default and even when i read the documentation i don't know how to change the grid system to 2 columns 30%- 70% for ex.. Can you help me please.

0
$zen-column-count: 10;

.container {
 @include zen-grid-container;
} 
.column1 {
 @include zen-grid-item(3, 1);
}
.column2 {
 @include zen-grid-item(7, 4);
}

You include 10 columns, and use 3 for 30% and 7 for 70%. Reason being that columns are of equal width and if you want to implement two unequal columns you have to use multiples of a common denominator.

  • ok wait,i will test it and give you a feedback – mohammed amine bourkadi Jul 25 '14 at 22:38
  • But add this css to what? – mohammed amine bourkadi Jul 25 '14 at 22:57
  • <div class="container"> <div class="column1"> some content </div> <div class="column2"> some content </div> </div> – J. Reynolds Jul 26 '14 at 18:29
  • i don't understand,do i have to add this css to my template.php or style.css or what? – mohammed amine bourkadi Jul 26 '14 at 19:05
  • 1
    Technically this is SCSS and you edit scss files. It has to be pre-processed by SASS. You have to install Ruby, some requirements, SASS and Compass gems. You install Zen theme, create Zen subtheme. You use bundler to install gem dependencies (Zen Grids etc). When that is all done, you issue your compass watch command. Compass will then watch your scss folder that is in the zen sub theme for changes. You then edit the scss files and it generates css. Search for the Complete Guide To Omega 4 on youtube as it explains a lot of the installation. And search for how to install compass and SASS. – J. Reynolds Jul 28 '14 at 4:49

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.