Theming - Overview
One of the most important things to take care of when building your community, is your branding. You want to create a space for your customers that is welcoming and familiar, and you want your community to feel like a natural part of your offering. With Vanilla, you're able to use one of our out-of-the-box theme to build your own basic theme. If you have team members familiar with HTML & CSS, they can make customization using our Customize Theme and Pockets add-on.
Most elements in those base themes can be tweaked in the HTML or CSS, though we recommend that you leave some modules intact, such as the "Mebox" module:
{module name="MeModule"}
You can change the location of this and it can be customized somewhat, but the box itself must remain. It’s key to providing you and your team access to the Dashboard, and for your users to access their inboxes, notifications and profile. It’s also where they would log-out.
This is because the MeModule is Dynamic and will add/remove elements are addons are turned on or off, or as roles and permissions change. Similarly, the side panel element is best to leave as-is as it too is dynamic, and will include options like 'drafts' when the user has drafts, 'unanswered' when Q&A is enabled etc.
Those who are quite experienced with CSS and HTML should also take a look at our Developer Theming Docs
Please note that these are written for both our hosted and open source clients. While there is a great deal of information that will be valuable to a themer here, some of it is geared towards open source and may not be possible on hosted. If you are unsure, feel free to reach out and ask!
Below you'll find the basic info about Vanilla's theming features.
Basics
Out-of the Box Themes: You've probably already noticed that Vanilla has a set of out-of-the-box themes that you can use or build on top of. Know that our Bootstrap 3, Deflector and Cornerstone Themes do offer additional theming options (a new section in the side pannel will appear for "Theme Options" where you can select a different colour scheme/font combo.
Branding: From there you can set a banner image, share image & favicon in the Banner section of your Dashboard settings :
Avatars : You can also choose a default avatar for your users : Alternatively I can enable a plugin for you call Avatar Pool, which allows users to pick from a select set of avatars.
Notification Emails : By default our welcome and notification emails are pretty bland, BUT you can enable HTML emails and select colours and images to format these
Layout : You can try different layouts for your categories, discussions and homepage in the Homepage section of your Dashboard Settings
Customizations
Modules
In Vanilla, modules are building blocks that are functional blocks already built into the product and these can be added to your theme.
Here is a blog post that outlines the various modules you can use in your theme, but I’ve also included here a bit more information + examples for you:
Promoted Content Module
The promoted content module lets you show content based on your select criteria. For example, content promoted through reactions, or the last 5 discussions from an admin. If you will be using this module, you’ll want to set the selector criteria to be used (i.e. what type of content should appear here) :
- role: Author’s Role - Posts by authors of a certain Role (Admin, Mod etc.)
- rank: Author’s Rank (requires Ranks plugin to be enabled) - Posts by authors of a certain Rank
- category:Content’s Category (URL slug name) - Content from a particular category
- score: Content’s total number of point (requires Reactions plugin to be enabled) - Content that has received the most positive reactions
- promoted: is content promoted (requires Reactions plugin to be enabled) - Content that has been reacted to using the “Promote” reaction.
Leaderboard Module:
Here you can see which users have accumulated the most number of points in the forum.
Theming Mobile View
Vanilla has two standard mobile themes, Basic Mobile and Lithe. I'm partial to Lithe, but recommend you check them both out!
These out-of-the-box mobile themes are not as customizable as our desktop themes are. That being said, we have a couple options here.
We can override the mobile theme entirely so that the theme you have on desktop is what you get on mobile. This would require that you tweak your custom CSS in consequence. This typically requires an experienced web developer. If you go this route, you will want to make sure you test the theme in both views.
I can enable mobile responsive theming for you, but this does require a fair amount of work on your side, and is usually tested out on staging first. Here is an Overview of how Vanilla works on mobile and another on Ensuring your forum is mobile friendly
If you just want to do some minor tweaks to the existing mobile themes (Basic Mobile or Lithe), for example colours, you can do this inside style tags in a pocket.
You can then isolate elements you want to change (again, there is a limit to how much you can change here compared to responsive) and wrap them in style tags inside a pocket. The pocket will need to be set to
- Location - head
- Only display on mobile browsers
- Make sure you include !important or it won’t work
It should look something like this:
Tip: Make sure the pocket is enabled!