Sidebars-Change Width or Style
Sidebars - changing Width or Style
This is a very quick tutorial ~ more a pointer than a tutorial about how to change the sidebars on your Drupal site.
To find out the CSS identifiers, you can select the area you are interested in checking (where possible, select just a bit before and after the area of interest to make sure you get all the underlying HTML tags).
The Relevant CSS Class Identifiers
The identifier you can use would be sidebar-right and sidebar-left. For example, the relevant HTML coding for the right sidebar would look something like:
<div id="sidebar-right"><div id="sidebar-right-inner" class="region region-right">
<div id="block-book-0" class="block block-book region-odd even region-count-1 count-2 with-block-editing"><div class="block-inner">
<div id="block-book-0" class="block block-book region-odd even region-count-1 count-2 with-block-editing"><div class="block-inner">
"sidebar-right-inner" can also be used but you need to think about and use your judgment as to what you want to do.
Layout vs Style Formatting
You might just want to check my Drupal specifications to make sure we are on the same page and that this Drupal tutorial is relevant to you.
If you changing the width of your sidebars, that would be a layout issue and the relevant .css file would be layout.css (in each site's subZen folder)
If you are changing the formatting/styling, e.g. font-size, that would be in your site's specific subZenTheme.css file (in each site's subZen folder)
So depending on what you want to do, look for the indicated css identifier, make the changes you want in the css file(s) and upload.
Addendum
More Details about Changing Width of Sidebar
I am adding more details here as changing the sidebar width is a tat 'tricky'. I am going to be using the right sidebar as an example, but the logic will hold true for the left sidebar as well.
As mentioned above, changing the width of a sidebar is a layout issue and so the relevant css file will be: /sites/yourChildDrupal.com/themes/zen/yourSubZenTheme/layout.css
This is on the assumption that you have 'child' Drupal sites.
Otherwise the file will be in:
/sites/all/themes/zen/yourSubZenTheme/layout.css or
/sites/default/themes/zen/yourSubZenTheme/layout.css
... depending on where you have installed your (sub)Zen theming folders.
Otherwise the file will be in:
/sites/all/themes/zen/yourSubZenTheme/layout.css or
/sites/default/themes/zen/yourSubZenTheme/layout.css
... depending on where you have installed your (sub)Zen theming folders.
Ok, in your layout.css file, there are 3 class selectors/identifiers that you need to modify to change the width.
- .sidebar-right #content-inner
- .two-sidebars #content-inner
- #sidebar-right (a bit further down than the other two)
The default width of each sidebar is 200px. Let's say I want it to be 250px. The following table shows the changes I had to make to achieve that.
| Default | Modified |
|---|---|
| .sidebar-right #content-inner { padding-left: 0; padding-right: 200px; /* The width + right margin of #sidebar-right. */ } |
.sidebar-right #content-inner { padding-left: 0; padding-right: 250px; /* The width + right margin of #sidebar-right. */ } |
| .two-sidebars #content-inner { padding-left: 200px; /* The width + left margin of #sidebar-left. */ padding-right: 200px; /* The width + right margin of #sidebar-right. */ } |
.two-sidebars #content-inner { padding-left: 200px; /* The width + left margin of #sidebar-left. */ padding-right: 250px; /* The width + right margin of #sidebar-right. */ } |
| #sidebar-right { float: right; width: 200px; margin-left: -200px; /* Negative value of #sidebar-right's width + right margin. */ margin-right: 0; padding: 0; /* DO NOT CHANGE. Add padding or margin to #sidebar-right-inner. */ } |
#sidebar-right { float: right; width: 250px; margin-left: -250px; /* Negative value of #sidebar-right's width + right margin. */ margin-right: 0; padding: 0; /* DO NOT CHANGE. Add padding or margin to #sidebar-right-inner. */ } |
I have high lighted the changes I made to achieve my new width of 250px for my Drupal right sidebar.
Explore more..
Main Store: Swarovski + Supplies
Store at ARTFIRE- Store at ETSY
ClearlyChosen Swarovski & Product Library
JEM: Craft and Jewelry Making Library
shCredo: Health Therapies Library
Segue2: Random General Topics- ClearlyChosen Twitter
- NetWebbing Twitter
- shCredo Twitter
- Segue2 Twitter
- my Flickr
my Squidoo
Library & Tutorial
Twitter
Other
Healthful Soulful Things
Custom Search
Comments
Nice .. but how to change the over all width of a given theme for example ::BOOK STORE.
Please help asap.
Thanks,
Meeta
Hi,
I think they may have changed the layout.css since this method was written ?
Here is how I changed the a content (2/3) / right nav (1/3) layout.
---
.sidebar-right #content
{
/*width: 760px;*/
width: 640px;
margin-left: 0;
margin-right: -760px; /* Negative value of #content's width + left margin. */
}
---
---
/** sidebar-right **/
#sidebar-right
{
float: left;
/*width: 200px;*/
width: 320px;
/*margin-left: 760px; /* Width of content + sidebar-left. */
margin-left: 640px; /* Width of content + sidebar-left. */
margin-right: -960px; /* Negative value of #sidebar-right's width + left margin. */
padding: 0; /* DO NOT CHANGE. Add padding or margin to #sidebar-right-inner. */
}
---
Chris
Post new comment