Please upgrade here. These earlier versions are no longer being updated and have security issues.
HackerOne users: Testing against this community violates our program's Terms of Service and will result in your bounty being denied.

Moving The Category Panel

I've noticed that there isn't a way to move the position of the category panel (or at least not that I can see). But I prefer to have my panel on the right-hand side, as I did with the older versions of Vanilla. Is there a way to do this? I assume I could edit the code and change the position from there, But I don't know how. Thanks!


  • If your theme doesn't have it, look into doing a custom theme, then editing the default.master.tpl.

  • @donovanb

    It was the default theme from, and the category section was on the right side, but looks like they changed it in newer versions. Is it possible to edit my current (default) theme? If so, any idea what to change?

  • Yes, it's possible.. but probably better to simply create a theme based off of it, and edit that one:


  • @donovanb

    That looks like something the would lead to me completely wreck my forum, as I know i'd mess it up. I only want to change that one thing, just to move the panel to the right side. do you know what I would have to change in order to do that? If not, I guess i'll have to look into making a custom theme somehow.

  • R_JR_J Ex-Fanboy Munich Admin

    I think all you need to do is to add this CSS:

    .ContentColumn {
        margin: 0 230px 0 0;
    #Panel {
        float: right;

    For simple changes, I would recommend bleistivts plugin CSSEdit. It makes playing around with design quite easy. If things are getting more complex (or you want to share your work), you could switch to a custom theme.

  • @R_J

    Thanks R_J! That works perfectly. And that plugin is amazing, bleistivts did a great job with it. I could definitely see how it would help make things easy for somebody that knows what they are doing, but for me, I work better when I see the actual css in front of me. Without that, i'm clueless. For instance, i'd like to widen the category panel a little bit, because some of my category names are a little long, but I wouldn't know how to do that out of thin air, but If i were looking at the css, it's properly just a px number that i'd have to change.

    The problem i'm having is, trying to find the css i'm looking for. When I go into my themes folder, i see a bunch of different ones:


    I would assume that it would be located in default, but it doesn't seem to be. 2011compatibility is the only one not actually located in my dashboard, but it seems to have a bunch of different css files in it's design folder. Do you know which css was edited by using CSSEdit? Thanks!

  • whu606whu606 I'm not a SuperHero; I just like wearing tights... MVP

    Use a web inspector from your browser.

    This allows you to highlight a particular aspect of your forum, and then find which CSS rules apply to it. it will also show you which CSS file(s) are being used.

    You don't edit existing CSS files.

    You can take a look at a sample theme I made if you want to see a lot of the CSS classes/rules applied in Vanilla:

  • @whu606

    Thanks Whu!

    I opened up the inspector (through firefox), and it actually allowed me to edit the width from there, but i assume that will only apply for me? Basically, from what I can tell, the browser has the ability to edit the css, and save it locally?

    I found the file it points to (style.css), but you're saying I shouldn't edit it? I've only worked with css files a few times in the past, but i've always edited them.


  • edited June 2018

    On second thought, I wonder if I can edit the section in web inspector (with firefox), and then just copy/paste that into CSSEdit. Would that work? It also looks like you can save the css to file, through firefox.

  • R_JR_J Ex-Fanboy Munich Admin

    @StaticCory said:
    On second thought, I wonder if I can edit the section in web inspector (with firefox), and then just copy/paste that into CSSEdit. Would that work? It also looks like you can save the css to file, through firefox.

    Add the changes that you have in the inspector to CSSEdit

  • edited June 2018


    this is what the rule looks like:

    #Panel {
        width: 200px;
        /* float: left; */

    Because I just switched the "float" to right, in another rule, would this not affect that? In the inspector, there's a little check box, and i unchecked it, which makes me think that "/* float: left; */" will basically not count it.

    Here's what appears if the box is checked:

    #Panel {
        width: 200px;
        float: left;

    So you're saying that I would just input the first one into CSSEdit, and it should work?

Sign In or Register to comment.