For this we will need to make some small changes to the
post_macros
template.
Instructions
Find the following code block in the
post_macros
template:
HTML:
<article class="message {{ extension_value('extra_classes') }} js-post js-inlineModContainer {{ $post.isIgnored() ? 'is-ignored' : '' }} {{ $post.isUnread() ? ' is-unread' : '' }}"
data-author="{{ $post.User.username ?: $post.username }}"
data-content="post-{$post.post_id}"
id="js-post-{$post.post_id}"
{{ $includeMicrodata ? 'itemscope itemtype="https://schema.org/' . $thread.getReplyMicrodataType() . '" itemid="' . $post.getContentUrl(true) . '"' : '' }}>
Change this code completely as follows:
HTML:
<article class="message {{ extension_value('extra_classes') }} js-post js-inlineModContainer {{ $post.isIgnored() ? 'is-ignored' : '' }} {{ $post.isUnread() ? ' is-unread' : '' }}"
data-author="{{ $post.User.username ?: $post.username }}"
data-rank="{{ $post.User.is_admin ? 'admin' : 'user' }}"
data-content="post-{$post.post_id}"
id="js-post-{$post.post_id}"
{{ $includeMicrodata ? 'itemscope itemtype="https://schema.org/' . $thread.getReplyMicrodataType() . '" itemid="' . $post.getContentUrl(true) . '"' : '' }}>
In the same template, find the following code:
HTML:
<xf:if is="$post.isUnread()">
<li><span class="message-newIndicator">{{ phrase('new') }}</span></li>
<xf:elseif is="$thread.isUnread() && $showThreadUnreadIndicator" />
<li><span class="message-newIndicator" title="{{ phrase('new_replies')|for_attr }}">{{ phrase('new') }}</span></li>
</xf:if>
Change this code completely as follows:
HTML:
<xf:if is="$post.isUnread()">
<li><span class="message-newIndicator">{{ phrase('new') }}</span></li>
<xf:elseif is="$thread.isUnread() && $showThreadUnreadIndicator" />
<li><span class="message-newIndicator" title="{{ phrase('new_replies')|for_attr }}">{{ phrase('new') }}</span></li>
</xf:if>
<li>
<xf:if is="$post.User.is_admin">
<xf:userbanners user="$post.User" />
</xf:if>
</li>
And finally, paste this CSS code into the
extra.less
template:
CSS:
[data-rank='admin'] {
border-color: red !important;
box-shadow: 0px 0 8px hsla(0deg, 100%, 50%, 42%);
}
Let me know if there are any problems.