[Product Post] Theme Tip: Moving Sidebars

2 minute read

October 10, 2014

[Product Post] Theme Tip: Moving Sidebars

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;

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.

News product

Share Your Thoughts

Your email address will not be published. Required fields are marked *

Adrian Speyer

Written by Adrian Speyer

Adrian Speyer is the Head of Community and Lead Evangelist for Vanilla by Higher Logic. Besides spending many years in digital marketing, Adrian has been building communities of all sizes for over 20 years.

Have an Article for Vanilla's Blog?

Send us an email to [email protected] with your topic idea and we'll circle back with our publishing guidelines.

Subscribe to the Community Corner Newsletter and get expert insight and analysis on how to get the most out of your online community every Friday.
[contact-form-7 id="5700" title="Newsletter Form"]

Request a Demo

Schedule a product demo now.

Contact Us