We change a look in postContainer

[Back]

Go to postContainer replace everything with:

{{$idField = $comment::$databaseColumnId;}}
{{$itemClassSafe = str_replace( '\\', '_', mb_substr( $comment::$itemClass, 4 ) );}}
{{if $comment->isIgnored()}}
	<div class='ipsComment ipsComment_ignored ipsType_light' id='elIgnoreComment_{$comment->$idField}' data-ignoreCommentID='elComment_{$comment->$idField}' data-ignoreUserID='{$comment->author()->member_id}'>
		{lang="ignoring_content" sprintf="$comment->author()->name"} <a href='#elIgnoreComment_{$comment->$idField}_menu' data-ipsMenu data-ipsMenu-menuID='elIgnoreComment_{$comment->$idField}_menu' data-ipsMenu-appendTo='#elIgnoreComment_{$comment->$idField}' data-action="ignoreOptions" title='{lang="see_post_ignore_options"}' class='ipsType_blendLinks'>{lang="options"} <i class='fa fa-caret-down'></i></a>
		<ul class='ipsMenu ipsHide' id='elIgnoreComment_{$comment->$idField}_menu'>
			<li class='ipsMenu_item ipsJS_show' data-ipsMenuValue='showPost'><a href='#'>{lang="show_this_post"}</a></li>
			<li class='ipsMenu_sep ipsJS_show'><hr></li>
			<li class='ipsMenu_item' data-ipsMenuValue='stopIgnoring'><a href='{url="app=core&module=system&controller=ignore&do=remove&id={$comment->author()->member_id}" seoTemplate="ignore"}'>{lang="stop_ignoring_posts_by" sprintf="$comment->author()->name"}</a></li>
			<li class='ipsMenu_item'><a href='{url="app=core&module=system&controller=ignore" seoTemplate="ignore"}'>{lang="change_ignore_preferences"}</a></li>
		</ul>
	</div>
{{endif}}

<a id='comment-{$comment->$idField}'></a>
<article {{if $comment->author()->hasHighlightedReplies()}}data-memberGroup="{$comment->author()->member_group_id}" {{endif}} id='elComment_{$comment->$idField}' class='cPost ipsBox {{if $otherClasses}}{$otherClasses}{{endif}} ipsComment {{if ( settings.reputation_enabled and settings.reputation_highlight and $comment->reactionCount() >= settings.reputation_highlight ) OR $comment->isFeatured()}}ipsComment_popular{{endif}} ipsComment_parent ipsClearfix ipsClear ipsColumns ipsColumns_noSpacing ipsColumns_collapsePhone {{if $comment->author()->hasHighlightedReplies()}}ipsComment_highlighted{{endif}} {{if $comment->isIgnored()}}ipsHide{{endif}} {{if $comment->hidden() OR $item->hidden() === -2}}ipsModerated{{endif}}'>
	{{if $item->isQuestion() and !$comment->new_topic}}
		{template="postRating" group="topics" app="forums" params="$item, $comment, $votes"}
	{{endif}}

	<div class='cAuthorPane cAuthorPane_mobile ipsResponsive_showPhone ipsResponsive_block'>
		<h3 class='ipsType_sectionHead cAuthorPane_author ipsResponsive_showPhone ipsResponsive_inlineBlock ipsType_break ipsType_blendLinks ipsTruncate ipsTruncate_line'>
			{template="userLink" group="global" app="core" params="$comment->author(), $comment->warningRef(), TRUE"}
			<span class='ipsResponsive_showPhone ipsResponsive_inline'>&nbsp;&nbsp;{template="reputationBadge" group="global" app="core" params="$comment->author()"}</span>
		</h3>
		<div class='cAuthorPane_photo'>
			{template="userPhoto" app="core" group="global" params="$comment->author(), 'large', $comment->warningRef()"}
		</div>
	</div>
	<aside class='ipsComment_author cAuthorPane ipsColumn ipsColumn_medium ipsResponsive_hidePhone'>
		<h3 class='ipsType_sectionHead cAuthorPane_author ipsType_blendLinks ipsType_break'><strong>{template="userLink" group="global" app="core" params="$comment->author(), $comment->warningRef(), FALSE"}
			</strong> <span class='ipsResponsive_showPhone ipsResponsive_inline'>&nbsp;&nbsp;{template="reputationBadge" group="global" app="core" params="$comment->author()"}</span></h3>

		<ul class='cAuthorPane_info ipsList_reset'>
			{{if $comment->author()->member_title && $comment->author()->member_id}}
				<li class='ipsType_break'>{$comment->author()->member_title}</li>
			{{elseif $comment->author()->rank['title'] && $comment->author()->member_id}}
				<li class='ipsType_break'>{$comment->author()->rank['title']}</li>
			{{endif}}
			{{if $comment->author()->rank['image'] && $comment->author()->member_id}}
				<li>{$comment->author()->rank['image']|raw}</li>
			{{endif}}

			<li class='cAuthorPane_photo'>
				{template="userPhoto" app="core" group="global" params="$comment->author(), 'large', $comment->warningRef()"}
			</li>
			<li>{expression="\IPS\Member\Group::load( $comment->author()->member_group_id )->formattedName" raw="true"}</li>
			{{if \IPS\Member\Group::load( $comment->author()->member_group_id )->g_icon }}
				<li><img src='{file="$comment->author()->group['g_icon']" extension="core_Theme"}' alt='' class='cAuthorGroupIcon'></li>
			{{endif}}
			{{if $comment->author()->member_id}}
				<li style='display:flow-root !important;border-bottom: 1px solid #2b2b2b !important;padding-bottom: 2px !important;'>
<span style='float: left !important;'><i class="fa fa fa-pencil-square-o" aria-hidden="true"></i> {lang="__api_forums_posts"}:</span>
<span style='float: right !important;'>{number="$comment->author()->member_posts"}</span></li>						
<li style='display:flow-root !important;border-bottom: 1px solid #2b2b2b !important;padding-bottom: 2px !important;'>
<span style='float: left !important;'><i class="fa fa-thumbs-o-up" aria-hidden="true"></i> {lang="archive_topic_rating"}:</span>
<span style='float: right !important;'>{template="reputationBadge" group="global" app="core" params="$comment->author()"}</span></li>					
<li style='display:flow-root !important;border-bottom: 1px solid #2b2b2b !important;padding-bottom: 2px !important;'>
<span style='float: left !important;'><i class="fa fa-clock-o" aria-hidden="true"></i> {lang="views"}:</span>
<span style='float: right !important;'>{{if $comment->author()->last_activity}}{datetime="$comment->author()->last_activity"}{{else}}{lang="never"}{{endif}}</span></li>
<li style='display:flow-root !important;border-bottom: 1px solid #2b2b2b !important;padding-bottom: 2px !important;'>
<span style='float: left !important;'><i class="fa fa-bell-o" aria-hidden="true"></i> {lang="ads_ad_active"}:</span>
<span style='float: right !important;'>{{if $comment->author()->isOnline()}}<span class='metric'>{lang="online"}</span>{{else}}<span style='color:red;font-weight:bold;'>{lang="offline"}</span>{{endif}}</span></li>
          {{if $comment->author()->reputationImage()}}
					<li class='ipsPad_half'>
						<img src='{file="$comment->author()->reputationImage()" extension="core_Theme"}' title='{{if $comment->author()->reputation()}}{$comment->author()->reputation()}{{endif}}' alt=''>
					</li>
				{{endif}}
				{template="customFieldsDisplay" group="global" app="core" params="$comment->author()"}
			{{endif}}
		</ul>
	</aside>
	<div class='ipsColumn ipsColumn_fluid'>
		{template="post" group="topics" app="forums" params="$item, $comment, $item::$formLangPrefix . 'comment', $item::$application, $item::$module, $itemClassSafe"}
	</div>
</article>

Add to custom.css

.metric {
  font-weight:700;
  color:#06b000;
  text-shadow:-1px -1px 0 #92d050,1px -1px 0 #92d050,-1px 1px 0 #92d050,1px 1px 0 #92d050;
  -webkit-animation-name:glow;
  -webkit-animation-duration:3s;
  -webkit-animation-iteration-count:infinite;
  -webkit-animation-timing-function:linear;
}
@-webkit-keyframes glow{0%{text-shadow:0 0 20px rgba(19,130,0,0.7)}50%{text-shadow:0 0 20px rgba(19,130,0,0.7),0 0 20px rgba(19,130,0,1),0 0 20px rgba(19,130,0,1),0 0 20px rgba(19,130,0,1),0 0 20px rgba(19,130,0,1),0 0 20px rgba(19,130,0,1),0 0 30px rgba(19,130,0,1)}100%{text-shadow:0 0 20px rgba(19,130,0,0.5)}}