Category Archives: Features

[Product Post] Highlighting Staff Posts

In this post, we’ll cover a couple ways to make it easier for community members to identify staff posts and make those posts visually stand out. To make these modifications to your Vanilla instance, you’ll need to modify theme your base theme’s CSS.

1. Highlighting staff member posts in discussions.

In the first example, we are going to change the background color of staff posts and display an image for the role title instead of text. In this example we are modifying the Deflector theme and targeting the Role = Staff but you can target any Role and you can also target a user’s Rank if you are using the Ranks feature.

To be able to target Role CSS, make sure that the Role Title plugin is enabled.

To change the background color, add the following CSS on the Customize Theme page of the Dashboard:

.Item.Role_Staff {
background-color: #d8ecfc !important;
}

To display a Role title image, use this CSS:

.Item.Role_Staff .MItem.RoleTitle {
color: transparent;
background: no-repeat url(https://static.v-cdn.net/demo/staff-tag.png);
content: ” ” !important;
width: 30px;
margin-left: 8px;
}

The image can be stored on your web server of you can ask your customer success manager to upload the image to Vanilla’s CDN.

2. Using the Role Tracker plugin

The Role Tracker will tag tracked Roles and they will receive a CSS class to allow visual customization. For the tag to appear on a tracked post, you must have tagging enabled.

To enable the Role Tracker plugin, contact support or your CSM. The plugin is not-self-serve because it will make some changes to your instance that cannot easily be undone and we like to walk you through deployment. Once installed, you’ll see plugin options that let you set which Roles should be tracked.

With the Roles tracked, you can now do several things via CSS, some of which are fairly advanced and might need the involvement of our services team:

  • Display a custom icon next to discussions that contain tracked role post(s)

  • Use the promoted content module to display most recent tracked posts. In the example below, a custom carousel was created to display the tracked posts. You can read more about the promoted content module in this post.

  • In a discussion, let users click on a tag to skip to the next tracked post.

[Product Post] The 4 Vanilla Discussion Types

What you need to know about Vanilla’s different discussion types

The main function of a good user interface in a forum is to provide members with an intuitive solution between the user’s intention and our platform. Unlike many of the options for online forums that exist today, Vanilla is designed to be very flexible and customizable, as per the site owner’s needs, while also being clean, simple and cross-platform. Continue reading

[Product Post] Adding A Custom Font to Your Vanilla Community

Every Friday, we discuss one of the many Vanilla features that you can utilize in building and perfecting your forum. An important one is the ability to add your own custom font. Very similar to Google Fonts, the following article will give you the steps to allow you to add your favourite web fonts to your forum.

Selecting the font you want

To start adding custom fonts, head over to Google Fonts and use the filters on the right to choose the best font from over 800 different types.

Once you find the font you like, select it by clicking on the “+” sign, which will turn into a “-” sign.

There will also be a context menu made available to you as well, which you will want to click on. This will give you details on the code you need to use the font.

For the simplest implementation, the standard info here is exactly what you need. Copy the information from embed font section.

Open your Vanilla Forums dashboard and head to Customize HTML tab. Paste the code just before the code.

Now the next step is to tell your forum to use this new font. To do this you’ll need to add some custom CSS. Google Font provides you the essential code on their website.

They also provide a handy guide here for more details on some of the more complex things you can do.
For our needs, to have your whole forum use the same font, apply it via the body tag in CSS. You will add something like the following:

body {
font-family: ‘Lato’, sans-serif;
}

Place this code in the Customize CSS tab in your Vanilla Forums dashboard.

Make sure you click “Apply” to save your changes. That’s it!

Of course, you can add as many different fonts you want and to whatever elements you want, but these are the basics.

So that’s it for adding your fave font to Vanilla, if you’d like to learn other cool tricks, click here to check out the rest of our Friday Tips.