<img height="1" width="1" style="display:none" src="https://q.quora.com/_/ad/10b616b60fad4a51aa023ade12476783/pixel?tag=ViewContent&amp;noscript=1">

[Product Post] Theme Tip: Removing Sidebars

Posted by Adrian Speyer on Nov 28, 2014 11:01:39 AM
Find me on:

3 minute read

full_width

In most of the default themes, there is a sidebar or panel, but what if you want to go full-width and remove the sidebar? In today's tip, we will show you how to remove the panel, and ensure you have the proper links in your navbar and more.

Getting Rid of the Panel

We will show you how to make these changes on the Bootstrap theme, but the concepts will apply to any theme. The first step is to modify your HTML in customize theme. Find the item {asset name="Panel"}. Add the following to have the Panel become hidden when you are on a discussion or category page.

{if !InSection("DiscussionList")&& !InSection("CategoryList")}
{asset name="Panel"}
{/if}

With his change, elements normally found in the sidebar will not render. Don't worry though, they will appear where they are needed like on the profile and activity page. However, things like the Tags Module or links to the category list will not show (we will cover some options for that below).

Making Content Full-Width

With the panel only showing on non-profile/non-inbox pages, we need to ensure the Content area is full width. To remove all margins on the content area, add the following:

#vanilla_discussions_index div#Content.Column.ContentColumn{
margin: 0px !important;
}
#vanilla_categories_index div#Content.Column.ContentColumn{
margin: 0px !important;
}

This will ensure that the Content area of the community takes over any space now available that the Panel has been removed.

Modifying Navbar Links

Another thing that changes with the removal of the sidebar, is a list of links you may find handy in your Bootstrap theme. For example, by default, you lose a link to the category list. It's also a bit strange to also have a link to discussions when you are on the discussions list. To make these changes, we will use what we covered last week about if statements and variables.

The first change is to make the discussions_link only show when on the categories page and the categories_link when we are on the discussion page. To make this change replace {discussions_link} and {categories_link} (if it happens to be there) with the following:

{if !InSection("DiscussionList")&& InSection("CategoryList")}
{discussions_link}
{/if}
{if !InSection("CategoryList") && InSection("DiscussionList")}
{categories_link}
{/if}
{if !InSection("DiscussionList")&& !InSection("CategoryList")}
{discussions_link}
{/if}

With the above changes, you will have a link categories on the recent discussions pages and vice versa. Also when you are not on either, you have a link to recent discussions.

Add Other Modules

With the removal of the sidebar, any plugin adding a module has nowhere to be displayed. An example of a plugin that createa module would be the Tags plugin. But don't worry, you can still call any module directly. In our example to call the tag module add the following after {asset name="Content"} in your customize theme HTML tab:

{module name="TagModule" CssClass="Tagging"}

It might also make sense to add it into a div, so the final code will look something like the following:

tag_module_code

This will make the tags appear just after the content (as you see in the example at the top of this article).

If you are using the Online add-on, so you can see who is visiting your community. You can call that by using the following, after {asset name="Content"} like the TagModule:

{module name="OnlineModule" CssClass="whoisonline"}

Notice we added a CSS Class, so we can make changes to the CSS if needed and you can also consider including it in a div.

Below is how all the HTML code looks:


full_width_theme

Final Tips

Every theme is different but, essentially, you want to look for Panel and Content. These are the two elements in the HTML and in the CSS which need modification. You also need to keep in mind that any information in the panel, once hidden, will also not render. This includes the tagging plugin, the online plugin or any pockets you have allocated to that area.

We hope this post has given you some ideas to modify your theme and make it something unique. Check under the product category for more product tips.

Topics: News, Product

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

checklist