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

[Product Post] Highlighting Staff Posts

Posted by Luc Vezina on Mar 24, 2017 8:00:37 AM

2 minute read

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 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.

Topics: Product, News

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

community playbook

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.