XF 2.0 [likes] Show thumb x amount >list directly instead of names? + Show likes behind thread?

[Cannabis Ape]

To show what I mean I got some screenshots.
1, show amount of likes and list directly instead of names. Except I would like the word Likes x ,


2, show the likes of the first post after the thread title in categories, before the sticky pin and eye if you follow.


3 I've been trying this unsuccessfully, can I separate the like button in a post and place it on the same line as the like bar that shows up after someone liked?

Cheers.

 

[Cannabis Ape]

Anyone can send me on the right path on any of them?

 

[S Thomas]

In thread_list_macros, find

<div class="structItem-title">
[...]
</div>

Insert before the closing div tag:

                <xf:if is="{$thread.first_post_likes}">
                    <i class="actionBar-action actionBar-action--like" aria-hidden="true"></i> x {$thread.first_post_likes}
                </xf:if>

In post_macros, replace

<xf:likes content="{$post}" url="{{ link('posts/likes', $post) }}" />

with

<a href="{{ link('posts/likes', $post) }}" data-xf-click="overlay"><bdi><i class="actionBar-action actionBar-action--like" aria-hidden="true"></i> x {$post.likes}</bdi></a>

Apply styling as needed.

 

[Cannabis Ape]

Works like a charm!

Thanks mate!

 

[Cannabis Ape]

In thread_list_macros, find

<div class="structItem-title">
[...]
</div>

Insert before the closing div tag:

                <xf:if is="{$thread.first_post_likes}">
                    <i class="actionBar-action actionBar-action--like" aria-hidden="true"></i> x {$thread.first_post_likes}
                </xf:if>

View attachment 176581

In post_macros, replace

<xf:likes content="{$post}" url="{{ link('posts/likes', $post) }}" />

with

<a href="{{ link('posts/likes', $post) }}" data-xf-click="overlay"><bdi><i class="actionBar-action actionBar-action--like" aria-hidden="true"></i> x {$post.likes}</bdi></a>

View attachment 176582

Apply styling as needed.

Hey man, still happy with this trick but I tried to style it so the thumb and amount would be a little smaller.

Now I got the thumb a bit smaller but I can't seem to get the amount smaller as it changes text on other spots too.

How can I only get the amount smaller?

 

[S Thomas]

Add another class like actionBar-action--text to the <i>s and in your extra.less use that for your text styling.

 

[Cannabis Ape]

Add another class like actionBar-action--text to the <i>s and in your extra.less use that for your text styling.

Excuse my noobness so to verify

<i class="actionBar-action actionBar-action--text" aria-hidden="true"></i>

If yes do I place behind the other I?

 

[S Thomas]

<i class="actionBar-action actionBar-action--like actionBar-action--text" aria-hidden="true"></i>

 

[Cannabis Ape]

@S Thomas
Added the line and tried sizing with this:

.actionBar-action.actionBar-action--like.actionBar-action--text {
    font-size: 12px;
}

But it only sizes the thumb and not the text, what am I missing?

 

[Cannabis Ape]

@S Thomas


Mate, still happy with all the info you provided but after trying a couple things on my own I just can't figure out how to get the x1 size smaller. Got the thumb smaller but need the x 1 smaller also.

 

[S Thomas]

Oh, misunderstanding.

In thread_list_macros , you've added:

                <xf:if is="{$thread.first_post_likes}">
                    <i class="actionBar-action actionBar-action--like" aria-hidden="true"></i> x {$thread.first_post_likes}
                </xf:if>

Replace that with

                <xf:if is="{$thread.first_post_likes}">
                    <i class="actionBar-action actionBar-action--like" aria-hidden="true"></i><span class="actionBar-action--text"> x {$thread.first_post_likes}</span>
                </xf:if>

And then style it with that class.

.actionBar-action--text {
    font-size: 5px;
}

 

[Cannabis Ape]

Sup! I'm still using this but now have an additional question. What do I need to add/change to set them at the end of the line, just before the "Replies:" so that all of them are aligned the same

I can do it manually with position, left 669px but yeah, not really responsive gheghe

Cheers