Put sidebar on homepage WordPress

Evan comments:

The sidebar should start beneath the header.

I can change the three smaller images later, so don't worry about them. My main issue is changing the size of the jquesry slider area and adding the sidebar. I would like it to be formatted so if additional homepage content is added it fits in the main content area below the slider.

If its possible I would like to add the backround to all the pages, but you don't have to worry about other sidebars. If you are able to tell me the code I need and where to add it that would be okay.

Thanks, and let me know if there is anything else you need to know!

Just Me comments:

in style.css you can change the width of

content_full_width (line 152)
home-bnr-jquery (line 476)

to make room for the sidebar. Total width used right now is 940px
Add some code to your index.php, something like <code><div id="sidebar"> get_sidebar();</div>

if it is not present you will need to add a file called sidebar.php to your theme folder

then you need to add the sidebar CSS styling to your style.css and define the width, position and such.

That is how it works, in short. Not sure what you are capable of doing yourself.

Evan comments:

Check out the site to see where I am now. Resizing the jquery box worked, but the picture is now too large. Not sure how to make that smaller.

The <div id="sidebar"> get_sidebar();</div> didn't work, but the theme I use has different templates, and I added the sidebar code from index.php to the homepage jquery template. It got the right sidebar on the page, but in the wrong spot.

The code I used was:<div id="sidebar" class="sidebar_blog">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar("Blog Sidebar") ) : ?><?php endif; ?>
</div><!-- end sidebar -->

Not sure how to move it.

Just Me comments:

Hi,

it is a start :). You should move the sidebar div outside the content div, so these will appear next to eachother.

Evan comments:

Okay, looking better. I'm going to try and figure out how to resize the picture, but I also need to know how to have a background on the area surrounding the content and sidebar.

Just Me comments:

right now the background of the #main area is set in style.css at line 133. It is a background image. Your header is a gradient kind of color, if you want the same thing you will have to great an image of that gradient and replace the current image.

Another way to do this, using solid color, is by replacing the background color with the background-color setting in style.css

some examples

background-color:yellow;
background-color:#00ff00;
background-color:rgb(255,0,255);


Just Me comments:

sorry, "great an image" should be "create an image"

Just Me comments:

not my brightest post.

In the last sentence I meant to say "replace the background-image setting with a background-color setting in style.css".

But maybe you understood anyway :)

Evan comments:

Makes sense, I'm heading out of town today but hopefully I'll get a chance to try this tonight.

Evan comments:

I tried changing the image to a color and changing the image to another one, but it has no effect.

Evan comments:

Never mind, it worked now, but it also changed the background of the content and sidebar, I want it to just be the area around them. How would I do that?

Just Me comments:

that is because that part hasn't been given a background color in the style.css
if you set a background-color: white; to the style.css at line 136 it should work.

The best way to solve CSS issues is use a browser like FireFox with Firebug installed. This will give you the option of looking at the CSS settings by rightclicking an element and using "Inspect Element" from the menu that shows up.

If you hover over the different div's you will see what part of the page they define. When you doubleclick one of those div's the CSS setting used will show up at the right side of the screen. These values can be changed there and then, just for testing. You can also add new values.

These changes have no permanent affect on your pages, it will just show you what your pages will look like if you were to make that chenge in the style.css file. A perfect way to test a few things.

Evan comments:

Last thing, I just need to make the bar between the header and body part of the body. Any idea how to do that?