Narrowing the sidebar width in version 5.0’s garland?

I haven't tried this but as you have done with bluemarine, look in Garland's style.css file and adjust the sidebar width. Garland has fluid width specifications that you can adjust in several places in its stylesheet as shown below:

/* So we move the #center container over the sidebars to compensate */
body.sidebar-left #center {
  margin-left: -210px;
}
body.sidebar-right #center {
  margin-right: -210px;
}
body.sidebars #center {
  margin: 0 -210px;
}

/* And add blanks left and right for the sidebars to fill */
body.sidebar-left #squeeze {
  margin-left: 210px;
}
body.sidebar-right #squeeze {
  margin-right: 210px;
}
body.sidebars #squeeze {
  margin: 0 210px;
}

/* We ensure the sidebars are still clickable using z-index */
#wrapper #container .sidebar {
  margin: 60px 0 5em;
  width: 210px;
  float: left;
  z-index: 2;
  position: relative;
}

I've spent 16 hours trying to change Garland sidebar width and no luck.
Please help, me and 30,000 people that come every week to argue about "will it fly or not" really need a better Garland layout.

P.S. Also we need to set up a secure registration / login that would be secure againt robots, brut force, etc. Any suggestions before I waste another 16 hours of my life?

In fact it's a very nice theme with a lot of flexibility but requiring slightly above average css knowledge and remembering instructions.

The theme is using margins to control the layout depending on which sidebars are present on any given page. F.ex. if there are no sidebars the content uses 100% of the width and if the left sidebar is used the content is pushed 210px to the right to accomodate for the left sidebar etc.

In the style.css for Garland you'll find the following code where you can change the width of the sidebar but don't change the z-index or your links will become unclickable.

#wrapper #container .sidebar {
  margin: 60px 0 5em;
  width: 210px;
  float: left;
  z-index: 2;
  position: relative;
}

Further you'll find the following css-declarations in the stylesheet that will need changing of the margin to match the width you set above.

/* So we move the #center container over the sidebars to compensate */
body.sidebar-left #center {
  margin-left: -210px;
}
body.sidebar-right #center {
  margin-right: -210px;
}
body.sidebars #center {
  margin: 0 -210px;
}

/* And add blanks left and right for the sidebars to fill */
body.sidebar-left #squeeze {
  margin-left: 210px;
}
body.sidebar-right #squeeze {
  margin-right: 210px;
}
body.sidebars #squeeze {
  margin: 0 210px;
}

body.sidebar-left  #footer {
  margin-left: -210px;
}

body.sidebar-right #footer {
  margin-right: -210px;
}

body.sidebars #footer {
  margin: 0 -210px;
}

Lastly remembering instructions which I ironically don't remember where I read them but if you've changed the default color of the Garland theme it will create a new css-file which it places in the [your-path-to-drupal]/files/color folder. So you need to go to administer->site building->themes->Garland and then just press the "save configuration" button and you should be all set. Now don't try using any short-cuts like changing the css-file in the files/color folder directly since it will be over-written the next time you change anything in the Garland folder.

Hope this helps.

Pontus

You shouldn't worry yourself with the automatically created css-file in the [your-path-to-drupal]/files/color folder. Just know that it's there (if you've changed the default theme in any way) and how that affects (or not affects in this case ) changes done to style.css.

Whenever you visit administer->site building->themes->Garland your current color theme should be shown.

What happens when you press the "save configuration" button is that the style.css (that you've now modified) is used to create a new custom css-file using the color values found on the Garland settings page.

Cheers

Pontus

is a piece of cake.
Search replace for the default width....210 replace with...200 ...
Save
Then go to Adminster/Themes/Garland
Save Configuration.

The Theme Developers should have set the page css so that each column would have different size.
Then we could change both to our needs.
This may have been accomplished but at first blush...it seems they are coupled.
---------------
Russell Griechen

It seems to me that the original intent of CSS files was to give oneself a single place in which to make changes in page presentation with some level of granularity. A requirement that one change setting after setting like this, in ways that are inherently correct but not very intuitive, seems to defeat part of the purpose of CSS files. Or is it just me?

(I would not be surprised to find that it is just me)

Michael

"I was going to buy a copy of The Power of Positive Thinking, and then I thought: What the hell good would that do?"
-- Ronnie Shakes

I'm not having much success making them two different widths. For example, left-sidebar = 160 and
right-sidebar=240. Any ideas?

Thanks,

Jim

I think I have a simple ask: given the minimum width requirements of Garland's sidebars...how can we have the remainder of window width available for the center? As I test with the comments below I am - at best - affecting the width of the sidebar...but not the "buffer width" to left and right of sidebar. I am viewing Garland under 1920x1200 and there is significant waste to the left and right of the sidebars.

I will continue to hack and test...but if anyone has a concrete example that would save me time - I would appreciate the handout.

Thanks.

--
Rjae Easton
blog: http://applanet.com/percs/
wiki: http://applanet.com/wiki/

Hi,
I've come up with a fairly messy way of reducing the width of the right hand column - but it works.

1. page.tpl.php
rename the class for div id="sidebar-left" from sidebar to e.g. class="my-sidebar-left"
rename the class for div id="sidebar-right" from sidebar to e.g. class="my-sidebar-right"

2. style.css
copy #wrapper #container .sidebar {...} twice. rename .my-sidebar-left and .my-sidebar-right
change the width in .my-sidebar-right, I used 80px

where .sidebar appears, add selectors for .my-sidebar-right and .my-sidebar-left :
a -
#watchdog-form-overview .form-submit,
.confirmation .form-submit,
.search-form .form-submit,
.poll .form-submit,
fieldset .form-button, fieldset .form-submit,
.sidebar .form-button, .sidebar .form-submit,
.my-sidebar-left .form-button, .my-sidebar-left .form-submit,
.my-sidebar-right .form-button, .my-sidebar-right .form-submit,
table .form-button, table .form-submit {
margin: 0;
}

b -
#wrapper #container .sidebar .block {,
#wrapper #container .my-sidebar-left .block,
#wrapper #container .my-sidebar-right .block,
{
margin: 0 0 1.5em 0;
}

then change the margins of the center element so it can expand out and use the extra space
body.sidebars #center {
/*was margin: 0 -210px;*/
margin: 0 -80px 0 -210px;
}

body.sidebars #squeeze {
/*was margin: 0 210px;*/
margin: 0 80px 0 210px;
}

Hope that helps.

If you have the event module installed, try editing the event.module file to change the display of the days of the week from 3 digits to 2 digits...that worked for me.

In any instance in the file (each appears 4 times, change all 4), where you see Mon, Tue, Wed, Thu, Fri, Sat, Sun...change them to Mo, Tu, We, Th, Fr, Sat, Sun respectively & you won't have the menu items shifting around anymore.

--
Matthew Jabs