By dreadstar on

Noob here using plain vanilla Garland theme on my personal drupal site. I want to add a border between my left pane and the main page similar to the picture below:

Only local images are allowed.

http://i275.photobucket.com/albums/jj292/dreadstar01/2009-04/want.gif
(apologies, I dont think the forum allowed me to embed an img tag)

I found the border image copy below:

Only local images are allowed.
http://i275.photobucket.com/albums/jj292/dreadstar01/2009-04/book-spine.gif

Would it be any easy task to do add this vertical border? If yes, I would be grateful for instructions or a nudge to the right direction on how to do this.

⋅ Categories: Drupal 6.x

Comments

vm’s picture

vm commented

using the firefox browser with firebug add on will help you target specific elements. Once you learn what element you want to add to, you add to the style.css file.

dreadstar’s picture

dreadstar commented

Im not verse with CSS programming however trying to study and imitate other themes, I tried to put the image in the garland/images theme directory and added the following lines in style.css

#main {
  background: url(images/book-spine.gif) #fff top left repeat-y;
  padding: 20px 20px 20px 50px;
}

.... and it didn't work

vm’s picture

vm commented

I don't have garland in use on any sites. Please provide a link to your site so that the proper css can be given to you.

dreadstar’s picture

dreadstar commented

http://benchmark.liip.net

You may use the guest login to see the left navigation pane and the main page on the right. In the middle of that is where I want to put the vertical border.

Username: visitor
Password: visitor

Thanks @VeryMisunderstood for taking time to help me out.

dreadstar’s picture

dreadstar commented

Up .... any help out there? Pls?

mjohnq3’s picture

mjohnq3 commented

There's noting simple about modifying the Garland theme! It uses various background colors and images in the locations where you need to place the book-spine image. However, you can start by:

1) crop the width of your image to approx. 210 pixels to match the Garland sidebar width.
2) add the following CSS after line 436 (#sidebar-left .block):

#sidebar-right {
  background: #fff url(images/book-spine.gif) repeat-y right top;
}

3) change the left padding in #sidebar-right .block from 15px to approx. 40px.

When I tried this the result didn't look quite right because the backgrounds don't match up very well, but maybe you can tweek things until they look good to you.

Using the contributed Clearblue theme would be a lot easier unless you don't like both sidebars on the right.

dreadstar’s picture

dreadstar commented

Thank you sir mjohnq3

Your instructions were very clear. I modified the code a little bit. #sidebar-right did not work for me but #sidebar-left did. Would it still be possible for me to push the background picture a little bit more to the right? It would be perfect if I could put it on the left side of the content area rather than on the right side of the left sidebar. I guess a picture could explain it better ... 8-)

http://i275.photobucket.com/albums/jj292/dreadstar01/2009-04/snapshot.gif

Otherwise Im quite happy and grateful for the help!

On a sidenote: I did look and was tempted to use the Clearblue theme. Except it uses 3 columns (I think I only use 2 ... left sidebar + content area). And the other problem was the sidebar (and book spine pic) was on the rightside of the content area instead of being on the left.

mjohnq3’s picture

mjohnq3 commented

Use the following CSS to place the image in the content area:

#wrapper #container #center {
  background: transparent url(images/book-spine.gif) repeat-y top left;
}

However, because of the Garland layout it will appear higher than the sidebar.

dreadstar’s picture

dreadstar commented

For some reason it did not move to the right but stayed at the same place as the former solution. And you are correct that it came out higher than the sidebar hence came out worse.

I guess the previous solution will have to do for now. Thank you very much for all the help ... 8-)