Moving The Category Panel

StaticCory

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!

donovanb

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

StaticCory

@donovanb

It was the default theme from 2.0.18.1, 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?

donovanb

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

https://docs.vanillaforums.com/developer/addons/theme-quickstart/

Donovan

StaticCory

@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_J

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.

StaticCory

@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:

2011compatibility
bittersweet
default
embedfriendly
mobile

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!

whu606

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:

https://open.vanillaforums.com/discussion/comment/252092/#Comment_252092

StaticCory

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

Thanks!

StaticCory

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_J

@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

StaticCory

@R_J

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?