[Product Post] Theme Tip: Moving Sidebars

Posted by Adrian Speyer on Oct 10, 2014, 2:25:40 PM
Find me on:

2 minute read

One design choice you may face with your theme is whether the sidebar should appear on the left or right side of your community. There are arguments for both camps, but we won't debate that right now. In today's tip, we will show you how you can change the location of your sidebar. The following applies to the Bootstrap theme, but the concepts are similar in any theme.

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:

element-location-theme

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:

before

after

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.

Topics: Product, News

Related posts

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.

Search this blog

Recent Posts

community playbook

Have an Article for Vanilla's Blog?

Send us an email to pr@vanillaforums.com with your topic idea and we'll circle back with our publishing guidelines.