XF 2.2 post border and appropriate rank oscillation? I don't know

Hey guys, I apologize for my English because it is very poor.

I'm asking for help because I don't know how to solve this:

everything as on the screens

1. I would like to be able to add a border to posts in the topic, e.g. for the administrator rank, as in the screenshot.

2. I would like to be able to place the appropriate rank on the right side of my posts, just like on the screen
or just its icon.

Please help, thank you in advance <3

Is it also possible to add an inscription like "thread author" in posts?

1708300143019.webp
 
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.
 
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.
I did as you wrote and unfortunately nothing changed for me
 
Back
Top Bottom