Page 1 of 2

Move Sidebar from left to right

PostPosted: Sat Nov 15, 2008 3:07 pm
by TheJoe
I have been searching for this and I know it has to be a fairly simple fix. I have not been able to figure it out.

I would like to swap the sidebar from the left side to the right side. I am not fully css savvy. I am testing this theme to replace my blog's theme. (I love the header)

So, this is what I have tried:

In style.css:

#content {
float: right; <---- I change this to none
width: 640px;
margin-top: 0px;
}

and:

#sidebar {
width: 232px;
float: none; <--- I change this to right
padding-top: 8px;
text-align: left;
}

This does move the content area to the left side and positioned correctly. However, the sidebar is on the right side and is below the content area. I hope this describes what I am seeing properly. I have not rolled this theme out to my blog yet, it's just behavior I am noticing on my dev system.

This seems like it's an easy fix, I have not worked with CSS for some time. Could any one give me some help or point me in the right direction?

Thank you in advance.

Re: Move Sidebar from left to right

PostPosted: Sun Nov 16, 2008 11:32 am
by wayne
Try editing the index.php file and swap the order of the sidebar and the body.

Re: Move Sidebar from left to right

PostPosted: Sun Nov 16, 2008 9:58 pm
by TheJoe
That was one of the first things I tried.

The index.php file calls the following:

header via: <?php get_header(); ?>
Then does the "content" via: <div id="content">

Then calls the sidebar and the footer:

<?php get_sidebar(); ?>

<?php get_footer(); ?>

All the layout information for the body of the content is in CSS. I've been using CSS Edit and it looks great in preview mode. When it goes to my dev site and I bring it up in Firefox or Safari, the sidebar is on the right side but it's below the "content" area.

It's all good, I am working on integrating the phatfusion/mootools code into the original wp theme.

Thanks for your response.

-Joe

Re: Move Sidebar from left to right

PostPosted: Mon Nov 17, 2008 6:21 am
by TheJoe
I brushed up on my CSS and with the help of CSS Edit, I found the solution.

For those that are interested in doing this within the current "slidingdoor" theme.

In style.css:

Find:

#content {
float: right; <---- change this to left
width: 640px;
margin-top: 0px;
}

and:

#sidebar {
width: 232px;
float: none; <--- change this to right
padding-top: 8px;
text-align: left;
}

This will swap the sidebar to the right side of the page. The mistake I made was changing float to none, which made the 'content' block take up the whole page within the wrapper.

I hope this helps.

Re: Move Sidebar from left to right

PostPosted: Thu Nov 20, 2008 6:59 am
by wayne
yep good work

Re: Move Sidebar from left to right

PostPosted: Thu Dec 11, 2008 10:39 am
by Margriet
Thanks!!!!

For your clear explanation. It works fine for me also!

Re: Move Sidebar from left to right

PostPosted: Tue Dec 30, 2008 7:31 pm
by StacyN
Oh - this is terrific! Great info and it worked perfectly. I didn't even know where to start with it - and I'm pretty OK with CSS. There's just a lot of lines to wade through.

Re: Move Sidebar from left to right

PostPosted: Wed Dec 31, 2008 1:15 am
by LLC
It doesn't seem to work for mine when I make those changes. www.linechasingcircle.com

Re: Move Sidebar from left to right

PostPosted: Wed Feb 11, 2009 1:49 am
by brookek1
Cheers, that worked great

Re: Move Sidebar from left to right

PostPosted: Sun Mar 01, 2009 2:24 pm
by amykf
Thank you, thank you, thank you! Those instructions worked perfectly. :D