Increasing the height of a side column

[ThaiAnimalSanctuary]

I am trying to sort out the layout of a site to look like an old version of a charity website. I would love to import the old site but unfortunately the volunteer who designed it won't reply to our emails requesting the old templates etc.

I would like to increase the height of the left sidebar so that it goes over the header and for the header to only take up the area to the right of the sidebar. Or would anyone be able to tell me how I can adjust the settings on Suffusion to look like the following site:

http://www.thaianimalsanctuary.org.uk (Go into 'New Website' on the left)

Also, is there an option anywhere to put a dotted line inside the menu bars like those on the site? Or would I need to upload these as images?

Thanks for your help.

[drake]

It is not about height of sidebar, which will grow with how many widgets you will add there. It is possibile to obtain what you wish, but you need to move the sidebar up, over the header, with a definition like this: #sidebar-shell-1 {margin-top:-100px;} (depends on your configuration maybe you need to address #sidebar-shell-2 and also you need to adjust -100px to suit for your site). Also, probably you will need to change the width and placement of navigation bar.
A working example with Suffusion theme you can see here: http://www.shirinsadeghi.com/

For the second question, you can get a dashed border around your navigation bar at Suffusion Options -> Skinning -> Navigation Bar Below Header. But, for having the dashed line inside navigation bar you will need to upload your own picture.

[ThaiAnimalSanctuary]

Thanks for the reply

I think I understand how to edit the sidebar now, though it will need adjusting again and I need to figure out how to get rid of the white border on the image.

Do you have any advice on how I can change the width of the navigation bar? I've looked for clues in the html code but don't know enough to figure out what to change. At the moment the site is looking very messy and not at all like the old one!

Here's what it looks like: http://thaianimalsanctuary.com

Thanks!

[drake]

You have more adjustments to do...

For border (actually background) of that image you need to add at Suffusion Options -> Backend -> Custom Includes -> Custom Styles (all your CSS adjustments will go here, even they are related to elements from plugins or to your own div's):

Code: Select all

aside#image-3 {background:none;border:none;}

But, I suggest to start from the beginning - add your header first, to know the height needed to move up the sidebar...

Go to Suffusion Options -> Sidebars -> Sidebar 1 and disable Drag and Drop. Also, while you are in Sidebars menu, select Right Header Widgets and choose "Hide the search...."

At Suffusion Options -> Other Graphical Elements -> Navigation Bar Below Header align navigation bar to the right.

Finally at Custom Styles change the width of navigation bar (adjust 750px to suit):

Code: Select all

#nav {width:750px;}

[ThaiAnimalSanctuary]

Thank you so much for your help.
I've managed to get rid of the white border around the logo but am still having problems. I adjusted the alignment to the right which took over the options/ words to the right hand side, but the green navigation bar is still on the left though I was able to change the width to 650px as suggested.Any ideas?

In regards to starting with the header; I think I won't use a header at all and use the logo in the left side bar as a header and put in facebook and youtube icon widgets and a contact us tab there instead. Like it is in the old website (thaianimalsanctuary.org.uk under "new website" to the left) though I'm not sure how I'm going to do this yet!