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:

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:

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.