Left side panel to the right

alnokta · September 2006

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

Minisweeper · September 2006

It is possible with a bunch of theme changes but it depends how confidant you are playing with the code. I believe jazzman had a right-panel style in the works but i dont know if it's got anywhere?

SlashedZero · September 2006

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

Minisweeper · September 2006

So it does, forgive me.

alnokta · September 2006

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

Minisweeper · September 2006

I'm guessing it's probably just an align: right; somewhere in the css file but that's really a stab in the dark. I'm sure someone more competant with css will be along soon to help.

SlashedZero · September 2006

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).

alnokta · September 2006

It did a trick but not *the* trick .. thanks anyway http://img49.imageshack.us/img49/733/funnyvanisa0.jpg

SlashedZero · September 2006

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.

steviehype · September 2006

I thought it would be this bit of code:

#Panel {
	width:201px;
	margin-left:18px;
	float:left;
	background:url('panelfadetop.gif') top right no-repeat;
	display: inline;
	}

To this:

#Panel {
	width:201px;
	margin-left:18px;
	float:right;
	background:url('panelfadetop.gif') top right no-repeat;
	display: inline;
	}

EDIT: Sorry, I just looked at the picture, don't listen to me! If you wanted to use the default theme, then use the code above to move the sidebar.

alnokta · September 2006

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

steviehype · September 2006

This might work, find this code:

#Discussions {
	margin-top:-5px !important;
	float: left;
	width: 100%;
	font-family: arial;
	}

and change it to this:

#Discussions {
	margin-top:-5px !important;
	float: left;
	width: 100%;
	font-family: arial;
        text-align: right;
	}

steviehype · September 2006

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;
	}

alnokta · September 2006

Thanks a lot for this stevie but if you take a look at the image below you will see something funny ... also .. shouldn't the theme resize itself so it can fit on 800x600? because that resolution is annoying....

EDIT: sorry forgot the picture

steviehype · September 2006

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.

alnokta · September 2006

stevie ... I cannot express my gratitude for all the tips and the help ... thanks