Nice theme, but how can I change the sidebar widths?
erickcacao - September 15, 2009 - 16:01
| Project: | Nitobe |
| Version: | 6.x-4.1 |
| Component: | Code |
| Category: | support request |
| Priority: | normal |
| Assigned: | Unassigned |
| Status: | closed |
Jump to:
Description
Nice theme, but how can I modify the size of the side bars?
AS you can see in my site www.cdmschool.com i have made some changes but I caanot find the values to reduce a little bit the side bars. I hope don't ruin your theme Shannon!

#1
I like the modifications you made for your site!
Changing the sidebar widths is not going to be easy. If you want to adjust the size to one of the grid widths defined by the underlying grid framework (960.gs), you will need to make modifications to the template files. If you want a width that isn't on the grid, you will also need to write some custom CSS.
I notice that you made modifications to the theme itself. I highly recommend that you create a subtheme instead. If you don't, you will have to merge your changes back whenever you upgrade Nitobe. There's a brief overview of subtheming on drupal.org here: Subtheming Quick and Dirty.
#2
Thank you!
I will try to follow your recommendations and I already read the topic about subtheme, actually it was a start for the changes in your theme but english isn't my first language, so the code, the concepts are complex and with the extra of translation or comprehension, ufff but I promise you to read slowly and do it in the right way!
Thanks a lot!
#3
#4
Hello, I have the same question! To add my two cents: Here's how to shrink both sidebars one grid increment, and expand the content width to fill this extra space.
In nitobe's template.php find:
$vars['nitobe_classes']['content'] = nitobe_ns('grid-16', $has_left, 3, $has_right, 3);
$vars['nitobe_classes']['left'] = 'grid-3';
$vars['nitobe_classes']['right'] = 'grid-3';
$vars['nitobe_content_width'] = $vars['nitobe_classes']['content'];
on lines 624 to 627, and edit so that it has the numbers shown above. Then, find
'both' => array(
'content' => 'push-3',
'left' => 'pull-10',
on lines 647 to 649 and change as shown above.
For other layouts (only left sidebar for example) you will have to change the $push_pull array of line 641 according to the pattern described on line 84 of the readme.txt of the 960 theme.
Shannon, may I ask what you think of the above edits? I'm quite new at this. Should there be other edits made somewhere else as well? (or is there a more elegant way to accomplish this?)
Thank you so much for a great theme. I love the random header picture.
#5
Just for fun I changed the other numbers in the $push-pull array in order to have sidebars with "grid-3" width in any layout. Replace function nitobe_set_layout(&$vars) in template.php with the following:
function nitobe_set_layout(&$vars) {
// --------------------------------------------------------------------------
// -- Add the layout variables.
$placement = theme_get_setting('nitobe_content_placement');
$placement = empty($placement) ? 'center' : $placement;
$layout = $vars['layout'];
$vars['nitobe_placement'] = $placement;
// --------------------------------------------------------------------------
// -- Determine the classes for the content and sidebars.
$has_left = (($layout == 'left') || ($layout == 'both'));
$has_right = (($layout == 'right') || ($layout == 'both'));
$vars['nitobe_classes']['content'] = nitobe_ns('grid-16', $has_left, 3, $has_right, 3);
$vars['nitobe_classes']['left'] = 'grid-3';
$vars['nitobe_classes']['right'] = 'grid-3';
$vars['nitobe_content_width'] = $vars['nitobe_classes']['content'];
// --------------------------------------------------------------------------
// -- This array provides the push/pull classes for the various layout
// -- possibilities. The CSS class values should be appended to the
// -- appropriate regions classes. The array is accessed as such:
// --
// -- $push_pull[$placement][$layout][$region]
// -- $placement is one of left, right, or center and indicates where the
// -- sidebars are placed relative to the content.
// -- $layout is one of left, right, or both and indicates which sidebars
// -- are present.
// -- $region is one of content, left, right and indicates which region
// -- push/pull classes are wanted for.
$push_pull = array(
'center' => array(
'left' => array(
'content' => 'push-3',
'left' => 'pull-13',
),
'both' => array(
'content' => 'push-3',
'left' => 'pull-10',
),
),
'left' => array(
'left' => array(
'content' => 'push-3',
'left' => 'pull-13',
),
'right' => array(
'content' => 'push-4',
'right' => 'pull-12',
),
'both' => array(
'content' => 'push-6',
'left' => 'pull-10',
'right' => 'pull-10',
),
),
);
// --------------------------------------------------------------------------
// -- Add the push/pull classes.
foreach (array('content', 'left', 'right') as $region) {
$to_add = isset($push_pull[$placement][$layout][$region]) ?
' ' . $push_pull[$placement][$layout][$region] : '';
$vars['nitobe_classes'][$region] .= $to_add;
}
}
#6
Use the above with caution. The edits I made to template.php to change the sidebar width resulted in the ubercart shopping cart making the entire left sidebar disappear when the shopping cart title was clicked (only when the cart actually contained an item). Changing back to the original template.php (and the original width) fixes this problem.