Uneven column widths

Events happening in the community are now at Drupal community events on www.drupal.org.
robynruckel's picture

Hi,

I'm working with the Acquia Marina theme for a client. They want the sidebar first narrower than in the base theme and they want the sidebar last wider than in the base theme. I've been playing around with the css but haven't figured out how to make this work. Has anyone else out there done this? Any tips would be greatly appreciated while I still have some hair left!

Thanks!

Comments

make sure you have content in

tubby's picture

make sure you have content in the blocks that you're resizing. sometimes if there is no content in the sidebar first for example, the css changes may not appear to have taken effect.

make sure you change all/the right values for the sidebar first/last declaration. they appear several times depending on the number of columns you plan to use.

if this is a fixed width site, make sure your numbers add up. if you take 20px off of sidebar last, make sure it's added back somewhere else.

clear you cache then reload the page

thank you

robynruckel's picture

Thanks for your suggestions! You clarified that I was doing the right thing. It was a math issue for me. I went back and worked out the math and made sure everything still added up and it's working now. Yay! One issue I had was the newsletter signup form in the main content area. I also had to narrow that a bit to make things work the way I wanted them to. Thanks again for replying so quickly.

OK, so here's what you'll

sgprs's picture

OK, so here's what you'll need to do: First, the section you'll edit will be the Columns section. Open your style.css and scroll down till you see

/****************************************/
/* COLUMN LAYOUTS /
/
/
/
Classes for different column layouts /
/
that are applied to the tag. */
/****************************************/

This is where you'll need to make your mods. Before you change anything, you need to determine which style you're using, Single, Two or Three column. From your post, I'm assuming, of course, that you're using a 3 column layout. So you'll need to scroll down a bit further till you reach the 3 column layout:

/**********************************/
/* THREE COLUMN LAYOUT /
/
(Sidebar:Main Content:Sidebar) */
/**********************************/

This is the exact area to edit for your layout. It can get a bit tricky and will be a little time consuming... but nothing horrible. The main thing you'll need to do is keep your width sizes within the outer wrapper. When you increase one side, you'll not only need to edit the other, but you may very well need to adjust the content inner (main content) area as well to prevent vertical shifting due to the widths pushing the sidebars out of the wrapper and to keep things looking uniform and "right". I can't tell you what values to enter, of course, but I can tell you that you'll surely need to edit the margins too. Here's a little example; this is EXACTLY where you'll need to edit:

body.layout-first-main-last #sidebar-first { <---------------Controls your first (left) sidebar size & position---
margin: 40px 20px 0 0; /* LTR */
width: 240px;
}

body.layout-first-main-last #content-wrapper { <---------------Controls your main content region size & position---
margin: 40px 0 0;
width: 700px;
}

body.layout-first-main-last #content-wrapper #content-inner {
}

body.layout-first-main-last #content-wrapper #sidebar-last { <----------------Controls your last (right) sidebar---
background-color: #F4F7E7;
margin: 0;
padding: 0 0 0 20px; /* LTR */
width: 280px;
}

That's it! Just play around with these areas until you get the look your client desires. Make sure you drop a copy of the css on your pc before any changes (in case you need to start over). By default, the areas fit together tightly, so as soon as you make a change to one sidebar, you'll probably see the others get "out of whack". Don't worry... just continue to make the changes and as long as you keep everything evened-out, it'll come out fine. Ask away if you need more help.

Good luck!

Chris

Thanks!

robynruckel's picture

Wow! Thank you, sgprs, for the very detailed answer to my issue. Tubby pointed me in the right direction and your detailed and clearly written instructions were so helpful in clarifying exactly where I needed to make the changes. When you mentioned the margins a light bulb went on over my head. I had been able to resize the two sidebars but when I did the outer edge of sidebar last no longer lined up with the outer edge of the 3 postscript boxes below. It was quite a bit to the inside of the edge. I put a negative margin on the right side of sidebar last and all is good now. Thank you so much!

TNT Themes

Group organizers

Group categories

Type of post

Group notifications

This group offers an RSS feed. Or subscribe to these personalized, sitewide feeds: