Move Sidebar from left to right

Any questions about styling and customising the layout, changing the number of columns, changing the number of sliding images and so on.

Move Sidebar from left to right

Postby TheJoe » Sat Nov 15, 2008 3:07 pm

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.
TheJoe
I'm new here
 
Posts: 3
Joined: Sat Nov 15, 2008 2:55 pm

Re: Move Sidebar from left to right

Postby wayne » Sun Nov 16, 2008 11:32 am

Try editing the index.php file and swap the order of the sidebar and the body.
wayne
Site Admin
 
Posts: 726
Joined: Tue Apr 08, 2008 7:02 pm

Re: Move Sidebar from left to right

Postby TheJoe » Sun Nov 16, 2008 9:58 pm

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
TheJoe
I'm new here
 
Posts: 3
Joined: Sat Nov 15, 2008 2:55 pm

Re: Move Sidebar from left to right

Postby TheJoe » Mon Nov 17, 2008 6:21 am

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.
TheJoe
I'm new here
 
Posts: 3
Joined: Sat Nov 15, 2008 2:55 pm

Re: Move Sidebar from left to right

Postby wayne » Thu Nov 20, 2008 6:59 am

yep good work
wayne
Site Admin
 
Posts: 726
Joined: Tue Apr 08, 2008 7:02 pm

Re: Move Sidebar from left to right

Postby Margriet » Thu Dec 11, 2008 10:39 am

Thanks!!!!

For your clear explanation. It works fine for me also!
Margriet
I'm a regular
 
Posts: 6
Joined: Tue Dec 09, 2008 2:54 pm

Re: Move Sidebar from left to right

Postby StacyN » Tue Dec 30, 2008 7:31 pm

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.
StacyN
I'm a regular
 
Posts: 8
Joined: Tue Dec 30, 2008 7:30 pm

Re: Move Sidebar from left to right

Postby LLC » Wed Dec 31, 2008 1:15 am

It doesn't seem to work for mine when I make those changes. www.linechasingcircle.com
LLC
I'm new here
 
Posts: 2
Joined: Wed Dec 31, 2008 1:14 am

Re: Move Sidebar from left to right

Postby brookek1 » Wed Feb 11, 2009 1:49 am

Cheers, that worked great
brookek1
I'm new here
 
Posts: 4
Joined: Wed Feb 04, 2009 4:09 am

Re: Move Sidebar from left to right

Postby amykf » Sun Mar 01, 2009 2:24 pm

Thank you, thank you, thank you! Those instructions worked perfectly. :D
amykf
I'm new here
 
Posts: 2
Joined: Sun Mar 01, 2009 2:09 pm

Next

Return to Advanced - Customising the theme