Hello

Is it possible to move the left side panel to the right? and all the extensions also move with it to the right?

Yes, Jazzman's Vanilla Green displays the panel to the right.

It is a great style ... I tried it .. solves a lot but still there is something isn't right ..if you take a look at the picture below, you will see that "All Discussions" are still at the left ... how to make "All Discussions" comes to the right?

http://img86.imageshack.us/img86/6626/lovelyvanilliky8.jpg

You can open your theme/vanilla/styles/green/vanilla.css file and and look for:

#DiscussionsPage .ContentInfo h1 {
float:none;
text-align:left;


Then replace it by:

#DiscussionsPage .ContentInfo h1 {
float:none;
text-align:right;


That should do the trick (but I'm no CSS expert).

Ah, my fault. I guess a "}" got lost in the process.

#DiscussionsPage .ContentInfo h1 {
float:none;
text-align:right;
}

That should be better. However, for some reason, it doesn't go totally to the right with Firefox.

Thanks for all the input ..

@Ø : it is now working fine .. but still .. the discussions didn't move to the right...

@steviehype : thanks ... but I will use Jazzman's theme because it already moves the side panel to the right as you might have guessed

I'm going to guess that you'll want to do the same for the comments too, so find this:

#Comments {
margin:0px;
padding:0px;
list-style:none;
background-color: #fff;
}
and change it too:

#Comments {
margin:0px;
padding:0px;
list-style:none;
background-color: #fff;
text-align: right;
}

I'm guessing here but to move the "sticky" try this:

Find this

.DiscussionType {
font-size:14px;
float:left;
margin-right:5px !important;
color:#d9d3b3;
font-weight:bold;
line-height:20px;
}

Change to:

.DiscussionType {
font-size:14px;
float:right;
margin-right:5px !important;
color:#d9d3b3;
font-weight:bold;
line-height:20px;
}

As for the width, find (ignore the ......... I just mean that there is more code there)

#Header h1 {
height: 60px;
background: url('logo.gif') no-repeat left center;
width: 820px;.........

and

#Header ul {
width: 820px;.........

and

#Body {
clear: both;
width: 820px;.........

and

#Panel {
float: right;
width: 200px;.........

and

#Content {
float: left;
width: 580px;..........

Edit the parts above, I did the same for my site, I changed 820px to 760px and 200px to 180px and 580px to 540px. Have a play around, change values, see what they do, you can always change them back.

The easiest way to figure out what part of the css you want to edit, is view the source code of the page you want to edit, then search for the bit of text that you want to change, it will probably be wrapped in the tags that you need to edit e.g If you looked at the source code to find out what the "sticky" was wrapped in it looked like this: <li class="DiscussionType">
<span>DiscussionType</span>[Sticky]
</li>
From this we can see the you need to edit a class called "DiscussionType".

As for the "1 to 5 of 5" I'm guessing again here but find this:
.PageInfo {
border-top: 1px solid #ccc;
color:#bbb;
padding:0px 1px;
margin:5px 0px;
line-height:23px;
font-weight:bold;
}

and change too:

.PageInfo {
border-top: 1px solid #ccc;
color:#bbb;
padding:0px 1px;
margin:5px 0px;
line-height:23px;
font-weight:bold;
float: right:
}
But I think the small grey border above it will shrink, again, have a play around.

Good luck.