Public
cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 

How We Built It: Author Stamps

Khoros Staff

Author Stamp.png

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.

authorTagUserProfile.png

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:

authorTagUserProfile_3.png

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

authorTagUserProfile_4.png

  • 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:

author_badge_1.png

 

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

8 Comments
Honored Contributor

This is fantastic! Looking forward to trying it out on our site. 

Honored Contributor

We already have it on the HP Support communities and I must admit, we looked at Khoros (and other channels) and leveraged the idea 😃

Valued Contributor

Love this, just implemented this for the Pandora Community! Thank you for sharing. Love tips from your team!

Occasional Contributor

Hello,

 

Just to be clear, we only need to place it under the files in  style.scss ? 

Khoros Staff

@adriana4u The CSS styling needs to go in _style.css. You can get to that file from the Communities Admin. This will ensure that the custom styling for the badge is picked up when the skin is loaded.

The component still has to be made and assigned to the appropriate quilts/sections. Once that is done, it should appear exactly like we have it in our blog. You can, of course, tweak the CSS to match your particular scheme and needs.

Occasional Contributor

@RyanPi hello, sorry for the late response but I managed to do it! thank you so much!!

Khoros Staff

@RyanPi My customer this week specifically called out this blog as something that they LOVED. Awesome work :)_

Respected Contributor

This is awesome! Thanks for sharing.

May I suggest that a text key be created "OOB" for this?