Finding the right elements in your CSS

The first step to changing any design is to click the “Customize Theme” link which you can find in your Vanilla Forums dashboard. Make sure you are on the “HTML” tab. Now let’s locate the class name for the content and sidebar element in your theme. For the Bootstrap, this is what you will find:

Moving the sidebar left to right?

So now that we know the element names, all we need to do, is add the following to the CSS tab of customize theme screen

#Body .ContentColumn {
margin: 0 340px 0 0 !important;
}

#Body .PanelColumn {
float: right !important;
}

That’s it. If you refresh your community, the sidebar will now be moved from the left to the right:

What about moving right to left?

If you are using a theme that has the sidebar on the right, the idea is very similar. You will need to locate the sidebar and body elements in your theme, but add CSS that moves these elements in the other direction. Depending on the theme, the elements and CSS will be slightly different. For example, in our Cornerstone theme, the following is the CSS to move the sidebar to from right to the left.

.site-content {
float: right !important;
}

.site-sidebar
{
float: left !important;
}


While each theme has some differences, we hope these tips can point you in the right direction to make small tweaks to your theme. Check under the product category for more product tips.

Vanilla Forums offers a cloud based solution which can easily be themed to match your brand. Try Vanilla Forums Cloud Solution free for 30-days.