Here’s how to rearrange sidebars on any Drupal v7.x website using the Zen theme 7.x.
After installing the Zen theme you will need to put some content onto a block and arrange it in admin/structure/block to appear on either sidebar left or right. In this example below I placed the Navigation Menu on the left sidebar region and the Search Box and Main Menu blocks in the Right sidebar region. By default the main content will appear in the middle:
Let’s say you want to rearrange the layout so that from the left the main content will appear first, followed by the left sidebar and then the right sidebar. Here’s how to do it:
In the following examples we are editing a fixed layout, so you will edit the ‘themes/yourcustomtheme/css/layouts/fixed.css’ (Note: If you are using a responsive layout you will open the ‘themes/yourcustomtheme/css/layouts/responsive.css’).
In this image below, my theme name is ‘momex’, and I am using Notepad++ as my text editor.
Go to line 124, under the lines ‘Span 3 columns, starting in 2nd column from left’:
There are 3 elements:
- .two-sidebars #content selector shows attributes for the main content area.
- .two-sidebars .region-sidebar-first selector has attributes for the first sidebar and
- .two-sidebars .region-sidebar-second has attributes for the second sidebar.
Since we want the main content to appear on the left of the layout first, we switch the contents of item 1. (‘.two-sidebars #content”) and item 2. (‘.two-sidebars .region-sidebar-first’), like this. Don’t touch item 3 just yet.
The result is like this:
It looks awful yes, but at least we have the main content appearing on the leftmost column first, the ‘left sidebar’ appearing on the 2nd column and the third column where we want it to be.
We can now focus on the width of the left sidebar and the main content.
First we change item 1 (.two-sidebars) width from 176px to 568px, and item 2 (.two-sidebars .region-sidebar-first) from 568px to 176px:
Now there’s a huge gap between the first and second sidebar. This is because of the margin-widths of both the first and second sidebars.
So for item 2 (.two-sidebars .region-sidebar-first) we change margin-left from 0 to 196px and margin-right from -196px to -392px.
And for item 3. (.two-sidebars .region-sidebar-first) we change margin-left from 784 to 392px and retain margin-right at -930px.
Voila.
Here’s the final css for the FIXED layout code:
/* Span 3 columns, starting in 1st column from left. */
.two-sidebars #content {
float: left;
width: 568px;
margin-left: 0px;
margin-right: -196px;
}
/* Span 1 column, starting in 1st column from left. */
.two-sidebars .region-sidebar-first {
float: left;
width: 176px;
margin-left: 196px;
margin-right: -392px;
background-color:#e0e0eb;
}
/* Span 1 column, starting in 5th column from left. */
.two-sidebars .region-sidebar-second {
float: left;
width: 176px;
margin-left: 392px;
margin-right: -980px;
background-color:#cbd1d1;
}
And as a BONUS, here is final css for a RESPONSIVE layout with same results, starting on line 249 in the /themes/yourcustomtheme/css/layouts/responsive.css
/* Span 3 columns, starting in 1st column from left. */
.two-sidebars #content {
float: left;
width: 60%;
margin-left: 0%;
margin-right: -20%;
}
/* Span 1 column, starting in 1st column from left. */
.two-sidebars .region-sidebar-first {
float: left;
width: 20%;
margin-left: 20%;
margin-right: -40%;
background-color:#e0e0eb;
}
/* Span 1 column, starting in 5th column from left. */
.two-sidebars .region-sidebar-second {
float: left;
width: 20%;
margin-left: 40%;
margin-right: -100%;
background-color:#cbd1d1;
}
Notes:
- The standard width of the fixed layout is 960px, and this value is key to figuring out the margin-widths.
- Issuing unique background-colors to your sidebar css helps greatly in distinguishing one from the other.
- Doing same for a responsive theme is similar if not easier because it uses percentages rather than pixels.
