By Artem on

Hi All

Could anybody please advice how I could change the width of one column in a Garland theme?
I've spent several hours with it today and unfortunately failed because of the low CSS skills. By playing with margins and widths I somehow managed to change the width of both columns, but cannot find the way to widen just one.

⋅ Categories: Drupal 5.x, Drupal 6.x

Comments

kwgossett’s picture

kwgossett commented

I would like to know this answer as well. Thanks for posting!

naveenpl’s picture

naveenpl commented

one way is to edit the style.css in garland theme, then add these lines.
body.sideber-left {
width: 340px;
}
body.sidebar-right{
width: 800px;
}
other method is to create a folder in garland theme and you just name it. then inside that folder create style.css file and paste the above lines in the file. now this folder will become a new theme and you need to select this theme.

Hope this will help
Cheers.

Artem’s picture

Artem commented

I tried doing that, naveenpl (+ "@import "../style.css";"). Unfortunately it didn't help.
Are there any other tricks to try?

By the way, not sure if it matters, but I am actually interested in modifying Minelli theme, that is a fixed width variant of Garland. (I tried you solution with clean Garland though).

naveenpl’s picture

naveenpl commented

Check the minelli theme folder you can see just a style.css file then a snapshot.png file. This snapshotis used, where you select your theme.You are using the same method create a folder in garland (like minelli) say 'mytheme' Thats your new theme. create a style.css file in it and add new css for your theme. Now you need to select 'mytheme' from
administer/site building/themes.

Hope this will help.
Cheers.

Artem’s picture

Artem commented

I am able to create a new theme and if I change things in mytheme/style.css I see the effect on the site. E.g. it is completely unstyled if I remove "@import "../style.css";". Still I am not able to change the column width. Here is full content of mytheme's style.css:

@import "../style.css";

body.sidebar-left {
width: 340px;
}
body.sidebar-right{
width: 800px;
}
naveenpl’s picture

naveenpl commented

Most probably some class are overriding you class. Use firebug and webdeveloper(addons for firefox) to find that.
This thing should work but its not the right way.
Open page.tpl.php in garland theme folder.
there is a code like this

       <div id="sidebar-left" class="sidebar">/* change this line to <div style="width:300px;" id="sidebar-left" class="sidebar">*/
          <?php if ($search_box): ?><div class="block block-theme"><?php print $search_box ?></div><?php endif; ?>
          <?php print $sidebar_left ?>
        </div>
 
        <div id="sidebar-right" class="sidebar">/* change this line to <div style="width:600px;" id="sidebar-right" class="sidebar">*/
          <?php if (!$sidebar_left && $search_box): ?><div class="block block-theme"><?php print $search_box ?></div><?php endif; ?>
          <?php print $sidebar_right ?>
        </div>

This should work.
you can even create new class for those div and define them in style.css.

Hope this will help.
Cheers.

Artem’s picture

Artem commented

Thank you for following this up, naveenpl. Unfortunately changing page.tpl.php also didn't help. Oh well, it did change the column width indeed, but then the right sidebar was moved down below the left one and central one.

As you might guess I was searching the web and it looks like I am not alone with this problem (I didn't find a solution though). Probably this theme expects various margins and sizes match each other very well and for doing it I need to understand which numbers to match, there are so many.

I tried webdeveloper (and was able to reach same effect with it - changed sidebar width, but it was moved down). Didn't try firebug ever, will try it now.

Thank you for your help.

naveenpl’s picture

naveenpl commented

I just gone through some topics then i found this,
http://drupal.org/node/242225
"If you need to work on style.css with non-default color scheme, you need to do "Save Settings" after you make any changes to the style.css in the theme folder. If you do "Save Settings", then the style.css in files/color/yourtheme-XXXXX/ directory is updated (actually, a new files/color/yourtheme-ZZZZZ directory is created) to reflect the change you have made to your original style.css in the theme directory.

So as long as you use the default color scheme, this is not necessary. This is neccessary only for non-default color schemes."

Hope this will help.
Cheers.

Artem’s picture

Artem commented

Firebug is a fantastic tool indeed.

I was able to add 100px to the leftbar:

@import "../style.css";

body #wrapper #container {
  width: 560px;
}

body.sidebars #wrapper #container {
  width: 1180px;
}
                 
body.sidebar-left #wrapper #container,
body.sidebar-right #wrapper #container {
  width: 1024px;
}                  

#wrapper #container #sidebar-left {
  width: 310px;
}

body.sidebars #squeeze {
  margin: 0pt 310px 0pt 210px;
} 

body.sidebars #center {
  margin: 0pt -310px 0pt -210px;
}

It works in Firefox, but not in IE5 yet.

Artem’s picture

Artem commented

Oups, there was an error in my own module. Actually the above snippet works in IE 5 also. Not sure about the other browsers

thomasmurphy’s picture

thomasmurphy commented

Hey, thanks for posting this, I needed to mod garland to have sidebars with different top margins, and I used this method.

#wrapper #container #sidebar-left {
margin-top: 20px;
}