<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: List of Modules for Your Themes

Posted by Adrian Speyer on Mar 4, 2016 8:05:53 AM
Find me on:

5 minute read

When you start to customize your Vanilla community, you may hear about a magic term called "modules". In Vanilla, modules are building blocks that are functional blocks already built into Vanilla. However, new modules can also be added when some add-ons are enabled. If you've followed this blog for some time, you know we've covered a few different modules, but we decided to create something a bit more comprehensive. Below is an omnibus of the most fun and interesting modules you could use in your Vanilla theme.

Starting with Vanilla Modules

Customize_Theme_-_Vanilla

As is usual with customizing a Vanilla theme, head to the dashboard of your Vanilla community and bring up the customize theme tab. Modules go in the HTML section and will appear wherever you want.

Customize_Theme_-_Vanilla_2

Suggestions for places to add modules:

  • Above {asset name="Content"}, which is your main content.
  • Below {asset name="Panel"}, which is your sidebar.
  • Above {asset name="Foot"}, which will be above your footer.

However, you can add whatever you want, like below your navigation, for example. Now onto what you are really here for...

A List of Vanilla Modules

promoted-content

Promoted Content Module: As we covered in detail here, the promoted content module lets you show content based on your select criteria. For example, content promoted, or the last 5 discussions from an admin. Basic syntax is:
{module name="PromotedContentModule" Selector="role" Selection="administrator"}

Recent Discussions Module: This module will let you list the most recent discussions. This could be handy in the sidebar on the category landing page. To call the module, you can do something like this:

{module name="DiscussionsModule" Limit="5"}

In the above example, we limited it to the last 5, but default is the last 10.

If you want it only on the category (as discussed in the example) use a conditional statement:
{if InSection("CategoryList")}
{module name="DiscussionsModule" Limit="5"}
{/if}

Now just add some CSS to make it look great!

Recent Activity Module: If you add this module (and a member has permissions), they will see the latest 5 activities, from people joining, or getting a badge or more:

{module name ="RecentActivityModule" Limit="5"}

Leaderboard Module: Gamification is fun for everyone, but so is seeing how you stack up to others. The Activity page in your community has a leaderboard, but you can add it elsewhere, too. In this blog post we showed you how.

screen_leaderboard_theme

All you need to add  the following to make a weekly point leaderboard show up:

{module name="LeaderBoardModule" SlotType="w"}

Adding Existing Elements Elsewhere

Some of most interesting existing elements you can place elsewhere are from what we call the Mebox.

mebox

The Mebox includes your profile photo, a link to your bookmarks, your notifications and more. If you are building your own custom theme, these are elements you'll want to add.

Of course, let's start with the most important module:

Mebox: This allows you to call the Mebox wherever you'd like:
{module name="MeModule"}

Bookmark Module: If you wanted to show in the sidebar the user's bookmarked discussions, you could add:
{module name ="BookmarkedModule"} just after {asset name="Panel"}.

Inbox Module: A new personal conversation? Want to show users what's in the inbox, right in the sidebar? You can add the Inbox messages with the following code: {module name="InboxModule"}

Profile information If you wanted profile information to show other places besides the profile page, you can use the PhotoModule: {module name="UserPhotoModule"} to grab the current users Avatar. If you want to display information about the user (from their profile) add the UserInfo Module with the following code: {module name="UserInfoModule"}

Fun with Plugins and Modules

Some plugins will add enable certain modules for your use. Below, we'll explore the most common you may wish to customize.

Language Content Module (with Multilingual plugin): When you turn on the multilingual plugin, your theme will add links in the footer related to the locals enabled.

multilingual-css

When you select a certain language, it will make the menu, and even the dashboard, change to your local language. In this blog post we explain in greater detail how to customize the look and feel. However, if ever you wanted to move the Locale switcher to somewhere else in the your theme, you can use the following:
{module name="LocaleChooserModule" CssClass="Languages"}

Did you notice how a CSS class was added so you could apply your own CSS? You can do this so you can apply your CSS to this new module, and not affect the one added by the system.

Who’s Online Module (with Online plugin) If you enable the Who's Online plugin, you will have the option to set where you want the Who's Online info to show, but you have the option to show it where you want by adding the following code: {module name="OnlineModule" CssClass="whoisonline"}.

As you can notice, we also added a class so you can modify the look and feel.

Tag Module (with Tagging plugin) Normally, you will never need this module. Unless you have a theme without sidebars, the Tag module default would appear there by default. If you do have a theme without sidebars, here is how you can add the Tag cloud to your theme. {module name="TagModule" CssClass="Tagging"}

Don't forget the search

So one modification worth mentioning for your theme, even though its syntax is different from other modules, is the searchbox. To call a search box in your theme, you will add {searchbox}, but if you have advanced search, you need to make sure to change this to {searchbox_advanced} to unleash the full functionality.

We hope you found this list helpful and inspiring. It's not a complete list either, but we figured it was enough to get your creative mind going. Can't wait to see what you do with it! Happy designing!

Oh, and don't forget to 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

Gaming Launch Guide

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.