Vanilla 1 is no longer supported or maintained. If you need a copy, you can get it here.
HackerOne users: Testing against this community violates our program's Terms of Service and will result in your bounty being denied.

Left side panel to the right

edited September 2006 in Vanilla 1.0 Help
Hello Is it possible to move the left side panel to the right? and all the extensions also move with it to the right?


  • Options
    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?
  • Options
    Yes, Jazzman's Vanilla Green displays the panel to the right.
  • Options
    So it does, forgive me.
  • Options
    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?
  • Options
    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.
  • Options
    edited 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).
  • Options
    It did a trick but not *the* trick .. thanks anyway
  • Options
    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.
  • Options
    edited 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.
  • Options
    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
  • Options
    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; }
  • Options
    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; }
  • Options
    edited 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 :)
    Free Image Hosting at
  • Options
    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.
  • Options
    stevie ... I cannot express my gratitude for all the tips and the help ... thanks
This discussion has been closed.