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 stamp to comments and replies made by the original author of a blog post or message.
In the above image, you’ll see a magenta stamp with the word AUTHOR in it. This stamp only appears for the original author of a blog post or message within their replies or comments.
Creating this stamp 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.
- Select New Component.
- Assign the new component the name
author-badge. - Drop in the following code snippet.
<#if (env.context.message.author.id)?? && (env.context.message.parent)?? && (page.context.thread.topicMessage.author.id)??>
<#assign userId = env.context.message.author.id />
<#assign topicMessageId = page.context.thread.topicMessage.author.id/>
<#if (userId)?? && (topicMessageId)?? >
<#if (topicMessageId)?? && userId == topicMessageId>
<div class="author.badge">
<span class="badge1" data-badge="AUTHOR"></span>
</div>
</#if>
</#if>
</#if>
- Select Save to create the new component.
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 stamp 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 stamp.
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.
- Add the below snippet to the stylesheet.
.badge1 {
position:relative;
padding-left:2vh;
}
.badge1[data-badge]:after {
content:attr(data-badge);
top:2px; right:3px;
font-size:.8em;
background:#E21A9A;
color:white;
width:40%;
height:15px;
text-align:center;
line-height:18px;
box-shadow:0 0 1px #333;
font-weight:bold;
}
- Select Save.
Now we have the component created, and the styling to go along with it. All we need to do is assign the component to the page(s) and put it to use.
Step 3: Add the component to the appropriate message types
The final step actually applies the new component to the areas in the site in which you want to have them appear. There are two-page types we are focusing on in this tutorial:
- Blog Reply Message
- Forum Message
Here are the steps:
- Navigate to Studio > Page in Community Admin.
- Click the Change link next to the page name.
- Select the Blogs > Blog Reply Message page.
- In the sidebar, locate the author-badge component. It is found in Custom Components.
- Select the author-badge component to add it to the quilt.
- Make sure the author-badge component is placed in the header-left area. We set ours at the end, so it appears last.
- Select Save to lock in your changes.
Once this is done, locate a blog post with replies from the author to validate the change. You should see a new AUTHOR stamp in any reply left by the original author of the blog post.
Now, do the same thing again, but instead of Blogs > Blog Reply Message, select Forums > Forum Message.
That’s it! You now have a shiny new AUTHOR stamp on replies and comments left by the original author of each blog post and message.
