As part of our ongoing series featuring customizations and solutions we’ve created for Khoros Atlas, this guide is going to give you a step-by-step breakdown of how you can add a colorful author badge to comments and replies made by the original author of a blog post or message.
In the above image, you’ll see a magenta badge with the word AUTHOR in it. This badge only appears for the original author of a blog post or message within their replies or comments.
Creating this badge is pretty simple. It involves the creation of a component, the addition of some custom styling, and the component’s placement on two item types.
Step 1: Create the component
The author-badge component needs to be created so we can place it in the appropriate places using the Quilt. Here’s the process:
Navigate to Studio > Components within the Community Admin.
The snippet performs several important tasks. First, it captures the ID of the author and message. If the author ID matches the ID of the author of the message, the component displays a badge with the word AUTHOR. That badge’s styling is provided by the author.badge and badge1 classes.
Step 2: Add custom styling to the skin
The next step involves locating the skin your site is currently using, and editing the _styles.scss file to include new styling for the badge.
Here is how you can accomplish this:
Navigate to Admin > Display > Skins within Community Admin.
Take note of the skin currently being used. This skin has a filled-in radial field next to it on the list.
Navigate to Studio > Community Style.
Locate the current, active skin in the sidebar and select it.
Select the CSS tab.
Under sass in the file tree, choose the _style.scss file.