By Anonymous (not verified) on

I took the Zen-theme as template and I'm currently trying to adjust it. I would like the middle column to have all nodes in one "box" with a border and a background colour. Currently it looks like this:


 .-------------------------.
|                         |
`-------------------------'
.--. .---------------. .--.
|  | |  Story 1      | |  |
`--' `---------------' `--'
     .---------------.
     |  Story 2      |
     `---------------'

I want it to be like this:


 .-------------------------.
|                         |
`-------------------------'
.--. .---------------. .--.
|  | |  Story 1      | |  |
`--' |               | `--'
     |               |
     |  Story 2      |
     `---------------'

Does anybody know which ID or class I need to adjust in the CSS file? I tried styling #main, .column and .title but I couldn't achieve what I want.

⋅ Categories: Drupal 5.x

Comments

eddy147’s picture

eddy147 commented

I dont know this theme, but it looks like a normal 3 column layout.
with http://csscreator.com/tools/layout you can create this easily yourself.

What I normally do is give the div's different background-colors, then at least i know what is what.
Just do it local on your pc, with the style.css and the index.html you have from the browser's output (view source).
Once you figured that out, it must bepossible to merge the 2 divs together.

Anonymous’s picture

Anonymous (not verified) commented

I know how to do this kind of layout by hand when I'm coding a static page from ground up, which would be a simple task, but a CMS like Drupal and the word "easy" don't go well together... so I have to stick to a premade theme and adjust it.

Edit: It's not just the 2 divs like shown in my ASCII art, I want all news stories that will be added in the middle to look like they're in one column instead of singles boxes.

shwetanksingh’s picture

shwetanksingh commented

Use firebug for firefox to locate the divs and other html tags..its really easy..

Anonymous’s picture

Anonymous (not verified) commented

I'm using the Web Developer extension. I see all the div names and classes, but no, it's NOT easy. Even if the theme is considered to be a good starting point from what the users here say, the CSS is cluttered and the layout built up too complicated.

If I change a CSS attribute, either nothing happens or I break the whole layout apart :/

Rowanw’s picture

Rowanw commented

try

#squeze {
  background-color: #ccc;
}

The Zen theme is indeed complicated, but it's very solid in terms of flexibility and stability (across browsers).

Anonymous’s picture

Anonymous (not verified) commented

Thanks. I nearly got it. Now I have the problem that with the background colour showing, the middle column touches the sidebars. There's no space in between. I tried adding paddings and margins to the #squeeze, #sidebar-left and #sidebar-right, but again nothing happens or I break the whole layout.

Edit: Found it. Had to adjust it in "body.both-sidebars #squeeze".