Xenforo 2.1 postbit like this

interforo

New member
Registered
Joined
Aug 28, 2019
Messages
4
Points
13

Reputation:

I am looking for a postbit like this


1668702024323.png
 

Hsjsww

Active member
Registered
Joined
Oct 14, 2022
Messages
33
Points
8

Reputation:

Screenshot_20221119-195115_Chrome.jpg
 

interforo

New member
Registered
Joined
Aug 28, 2019
Messages
4
Points
13

Reputation:

Samuel

Well-known member
Registered
Joined
May 13, 2021
Messages
91
Points
28

Reputation:

What about for this one (xenforo forum)!

index2.jpg


Expanded!

index.jpg
 
View previous replies…

Suphawat

Well-known member
Registered
Joined
Mar 15, 2019
Messages
64
Points
28

Reputation:

What about for this one (xenforo forum)!

View attachment 32422

Expanded!

View attachment 32421
Samuel1. Go to message_macros add postbit-extra after pairs pairs--justified see pic
1.png

2. add this code for icon
Code:
<div class="postbit-extra-icon">
<dt>
    <span data-xf-init="tooltip" title="{{ phrase('messages')|for_attr }}">
        <xf:fa icon="fa-comment-lines" />
    </span>
</dt>
</div>
see pic
2.png

3. add class="postbit-extra-dd" in dd see pic
3.png

4.add css to extra.less
Code:
.postbit-extra {
    display: flex;
    background: #40495f;
    align-items: center;
    margin: 5px 0;
    border-radius: 5px;
    height: 30px;
    padding-left: 4px;
    box-shadow: 0 1px 3px #141921;
}
.postbit-extra-icon {
    padding: 10px;
    background: #4d5871;
    margin-right: 0.4rem;
    margin-left: -4px;
    width: 35px;
}
.postbit-extra-dd {
    margin: 0 7px 0 auto !important;
}
 
View previous replies…

Samuel

Well-known member
Registered
Joined
May 13, 2021
Messages
91
Points
28

Reputation:

1. Go to message_macros add postbit-extra after pairs pairs--justified see pic
View attachment 32424
2. add this code for icon
Code:
<div class="postbit-extra-icon">
<dt>
    <span data-xf-init="tooltip" title="{{ phrase('messages')|for_attr }}">
        <xf:fa icon="fa-comment-lines" />
    </span>
</dt>
</div>
see pic
View attachment 32425
3. add class="postbit-extra-dd" in dd see pic
View attachment 32426
4.add css to extra.less
Code:
.postbit-extra {
    display: flex;
    background: #40495f;
    align-items: center;
    margin: 5px 0;
    border-radius: 5px;
    height: 30px;
    padding-left: 4px;
    box-shadow: 0 1px 3px #141921;
}
.postbit-extra-icon {
    padding: 10px;
    background: #4d5871;
    margin-right: 0.4rem;
    margin-left: -4px;
    width: 35px;
}
.postbit-extra-dd {
    margin: 0 7px 0 auto !important;
}
SuphawatWhat are those side medals? does you know ?
 

jhoancito

Well-known member
Registered
Joined
Mar 23, 2021
Messages
76
Points
18

Reputation:

1. Go to message_macros add postbit-extra after pairs pairs--justified see pic
View attachment 32424
2. add this code for icon
Code:
<div class="postbit-extra-icon">
<dt>
    <span data-xf-init="tooltip" title="{{ phrase('messages')|for_attr }}">
        <xf:fa icon="fa-comment-lines" />
    </span>
</dt>
</div>
see pic
View attachment 32425
3. add class="postbit-extra-dd" in dd see pic
View attachment 32426
4.add css to extra.less
Code:
.postbit-extra {
    display: flex;
    background: #40495f;
    align-items: center;
    margin: 5px 0;
    border-radius: 5px;
    height: 30px;
    padding-left: 4px;
    box-shadow: 0 1px 3px #141921;
}
.postbit-extra-icon {
    padding: 10px;
    background: #4d5871;
    margin-right: 0.4rem;
    margin-left: -4px;
    width: 35px;
}
.postbit-extra-dd {
    margin: 0 7px 0 auto !important;
}
SuphawatIt didn't work out for me. I did it like your tutorial. It didn't come out like you see in the photo.

Captura.PNG


Here is what I made from your tutorial


Captura.PNG
 

Suphawat

Well-known member
Registered
Joined
Mar 15, 2019
Messages
64
Points
28

Reputation:

Attachments

  • 4.png
    4.png
    4.3 KB · Views: 157
View previous replies…

Suphawat

Well-known member
Registered
Joined
Mar 15, 2019
Messages
64
Points
28

Reputation:

Need bit help , how can i add more icon , in only message icon showing what will be the code to add more .

For example Reaction score,Points,Credits etc

what will be the code for this ?


here is my sample image


icon only showing for message not for other...
ShieldX
Code:
<div class="message-userExtras <xf:if is="property('xentr_user_info_block_collapse') == 'yes'">message-userExtras-body message-userExtras--collapsible</xf:if>">
                                <xf:contentcheck>
                                    <xf:if is="$extras.register_date">
                                        <dl class="pairs pairs--justified postbit-extra">
                                            <xf:if is="property('xentr_user_info_block_collapse')">
                                                <div class="postbit-extra-icon"><dt>
                                                    <span data-xf-init="tooltip" title="{{ phrase('joined')|for_attr }}">
                                                        <xf:fa icon="fa-user" />
                                                    </span>
                                                    </dt></div>
                                            <xf:else />
                                                <dt>{{ phrase('joined') }}</dt>
                                            </xf:if>
                                            <dd class="postbit-extra-dd">{{ date($user.register_date) }}</dd>
                                        </dl>
                                    </xf:if>
                                    <xf:if is="$extras.message_count">
                                        <dl class="pairs pairs--justified postbit-extra">
                                            <xf:if is="property('xentr_user_info_block_collapse')">
                                                <div class="postbit-extra-icon">
                                                    <dt>
                                                    <span data-xf-init="tooltip" title="{{ phrase('messages')|for_attr }}">
                                                        <xf:fa icon="fa-comment-lines" />
                                                        </span>
                                                </dt></div>
                                                <xf:else />
                                                <dt>{{ phrase('messages') }}</dt>
                                            </xf:if>
                                            <dd class="postbit-extra-dd">{$user.message_count|number}</dd>
                                        </dl>
                                    </xf:if>
                                    <xf:if is="$extras.solutions AND $user.question_solution_count">
                                        <dl class="pairs pairs--justified postbit-extra">
                                            <xf:if is="property('xentr_user_info_block_collapse')">
                                                <div class="postbit-extra-icon"><dt>
                                                    <span data-xf-init="tooltip" title="{{ phrase('solutions')|for_attr }}">
                                                        <xf:fa icon="fa-star" />
                                                    </span>
                                                    </dt></div>
                                                <xf:else />
                                                <dt>{{ phrase('solutions') }}</dt>
                                            </xf:if>
                                            <dd class="postbit-extra-dd">{$user.question_solution_count|number}</dd>
                                        </dl>
                                    </xf:if>
                                    <xf:if is="$extras.reaction_score">
                                        <dl class="pairs pairs--justified postbit-extra">
                                            <xf:if is="property('xentr_user_info_block_collapse')">
                                                <div class="postbit-extra-icon"><dt>
                                                    <span data-xf-init="tooltip" title="{{ phrase('reaction_score')|for_attr }}">
                                                        <xf:fa icon="fa-thumbs-up" />
                                                    </span>
                                                    </dt></div>
                                                <xf:else />
                                                <dt>{{ phrase('reaction_score') }}</dt>
                                            </xf:if>
                                            <dd class="postbit-extra-dd">{$user.reaction_score|number}</dd>
                                        </dl>
                                    </xf:if>
                                    <xf:if is="$extras.trophy_points && $xf.options.enableTrophies">
                                        <dl class="pairs pairs--justified postbit-extra">
                                            <xf:if is="property('xentr_user_info_block_collapse')">
                                                <div class="postbit-extra-icon"><dt>
                                                    <span data-xf-init="tooltip" title="{{ phrase('points')|for_attr }}">
                                                        <xf:fa icon="fa-trophy" />
                                                    </span>
                                                    </dt></div>
                                            <xf:else />
                                                <dt>{{ phrase('points') }}</dt>
                                            </xf:if>
                                            <dd class="postbit-extra-dd">{$user.trophy_points|number}</dd>
                                        </dl>
                                    </xf:if>
                                    <xf:if is="$extras.age && $user.Profile.age">
                                        <dl class="pairs pairs--justified postbit-extra">
                                            <xf:if is="property('xentr_user_info_block_collapse')">
                                                <div class="postbit-extra-icon"><dt>
                                                    <span data-xf-init="tooltip" title="{{ phrase('age')|for_attr }}">
                                                        <xf:fa icon="fa-birthday-cake" />
                                                    </span>
                                                    </dt></div>
                                            <xf:else />
                                                <dt>{{ phrase('age') }}</dt>
                                            </xf:if>
                                            <dd class="postbit-extra-dd">{$user.Profile.age}</dd>
                                        </dl>
                                    </xf:if>
You need edit all
for credit
Code:
<dl class="pairs pairs--justified postbit-extra">
<div class="postbit-extra-icon"><dt>
<span data-xf-init="tooltip" title="{$currency.title}">
<xf:fa icon="fa-wallet" />
</span>
    </dt></div>
        <dd class="postbit-extra-dd">
            <a href="{{ link('dbtech-credits/currency', $currency, {'user_id': $user.user_id}) }}" data-xf-click="overlay" class="fauxBlockLink-blockLink u-concealed">
                {$currency.prefix}{{ $currency.getValueFromUser($user) }}{$currency.suffix}
            </a>
        </dd>
    </dl>
 

ShieldX

Well-known member
Registered
Joined
Mar 27, 2022
Messages
537
Points
53

Reputation:

Code:
<div class="message-userExtras <xf:if is="property('xentr_user_info_block_collapse') == 'yes'">message-userExtras-body message-userExtras--collapsible</xf:if>">
                                <xf:contentcheck>
                                    <xf:if is="$extras.register_date">
                                        <dl class="pairs pairs--justified postbit-extra">
                                            <xf:if is="property('xentr_user_info_block_collapse')">
                                                <div class="postbit-extra-icon"><dt>
                                                    <span data-xf-init="tooltip" title="{{ phrase('joined')|for_attr }}">
                                                        <xf:fa icon="fa-user" />
                                                    </span>
                                                    </dt></div>
                                            <xf:else />
                                                <dt>{{ phrase('joined') }}</dt>
                                            </xf:if>
                                            <dd class="postbit-extra-dd">{{ date($user.register_date) }}</dd>
                                        </dl>
                                    </xf:if>
                                    <xf:if is="$extras.message_count">
                                        <dl class="pairs pairs--justified postbit-extra">
                                            <xf:if is="property('xentr_user_info_block_collapse')">
                                                <div class="postbit-extra-icon">
                                                    <dt>
                                                    <span data-xf-init="tooltip" title="{{ phrase('messages')|for_attr }}">
                                                        <xf:fa icon="fa-comment-lines" />
                                                        </span>
                                                </dt></div>
                                                <xf:else />
                                                <dt>{{ phrase('messages') }}</dt>
                                            </xf:if>
                                            <dd class="postbit-extra-dd">{$user.message_count|number}</dd>
                                        </dl>
                                    </xf:if>
                                    <xf:if is="$extras.solutions AND $user.question_solution_count">
                                        <dl class="pairs pairs--justified postbit-extra">
                                            <xf:if is="property('xentr_user_info_block_collapse')">
                                                <div class="postbit-extra-icon"><dt>
                                                    <span data-xf-init="tooltip" title="{{ phrase('solutions')|for_attr }}">
                                                        <xf:fa icon="fa-star" />
                                                    </span>
                                                    </dt></div>
                                                <xf:else />
                                                <dt>{{ phrase('solutions') }}</dt>
                                            </xf:if>
                                            <dd class="postbit-extra-dd">{$user.question_solution_count|number}</dd>
                                        </dl>
                                    </xf:if>
                                    <xf:if is="$extras.reaction_score">
                                        <dl class="pairs pairs--justified postbit-extra">
                                            <xf:if is="property('xentr_user_info_block_collapse')">
                                                <div class="postbit-extra-icon"><dt>
                                                    <span data-xf-init="tooltip" title="{{ phrase('reaction_score')|for_attr }}">
                                                        <xf:fa icon="fa-thumbs-up" />
                                                    </span>
                                                    </dt></div>
                                                <xf:else />
                                                <dt>{{ phrase('reaction_score') }}</dt>
                                            </xf:if>
                                            <dd class="postbit-extra-dd">{$user.reaction_score|number}</dd>
                                        </dl>
                                    </xf:if>
                                    <xf:if is="$extras.trophy_points && $xf.options.enableTrophies">
                                        <dl class="pairs pairs--justified postbit-extra">
                                            <xf:if is="property('xentr_user_info_block_collapse')">
                                                <div class="postbit-extra-icon"><dt>
                                                    <span data-xf-init="tooltip" title="{{ phrase('points')|for_attr }}">
                                                        <xf:fa icon="fa-trophy" />
                                                    </span>
                                                    </dt></div>
                                            <xf:else />
                                                <dt>{{ phrase('points') }}</dt>
                                            </xf:if>
                                            <dd class="postbit-extra-dd">{$user.trophy_points|number}</dd>
                                        </dl>
                                    </xf:if>
                                    <xf:if is="$extras.age && $user.Profile.age">
                                        <dl class="pairs pairs--justified postbit-extra">
                                            <xf:if is="property('xentr_user_info_block_collapse')">
                                                <div class="postbit-extra-icon"><dt>
                                                    <span data-xf-init="tooltip" title="{{ phrase('age')|for_attr }}">
                                                        <xf:fa icon="fa-birthday-cake" />
                                                    </span>
                                                    </dt></div>
                                            <xf:else />
                                                <dt>{{ phrase('age') }}</dt>
                                            </xf:if>
                                            <dd class="postbit-extra-dd">{$user.Profile.age}</dd>
                                        </dl>
                                    </xf:if>
You need edit all
for credit
Code:
<dl class="pairs pairs--justified postbit-extra">
<div class="postbit-extra-icon"><dt>
<span data-xf-init="tooltip" title="{$currency.title}">
<xf:fa icon="fa-wallet" />
</span>
    </dt></div>
        <dd class="postbit-extra-dd">
            <a href="{{ link('dbtech-credits/currency', $currency, {'user_id': $user.user_id}) }}" data-xf-click="overlay" class="fauxBlockLink-blockLink u-concealed">
                {$currency.prefix}{{ $currency.getValueFromUser($user) }}{$currency.suffix}
            </a>
        </dd>
    </dl>
Suphawatfor credit code where should i paste them , mean where in between or after any line ?
 

ShieldX

Well-known member
Registered
Joined
Mar 27, 2022
Messages
537
Points
53

Reputation:

Code:
<div class="message-userExtras <xf:if is="property('xentr_user_info_block_collapse') == 'yes'">message-userExtras-body message-userExtras--collapsible</xf:if>">
                                <xf:contentcheck>
                                    <xf:if is="$extras.register_date">
                                        <dl class="pairs pairs--justified postbit-extra">
                                            <xf:if is="property('xentr_user_info_block_collapse')">
                                                <div class="postbit-extra-icon"><dt>
                                                    <span data-xf-init="tooltip" title="{{ phrase('joined')|for_attr }}">
                                                        <xf:fa icon="fa-user" />
                                                    </span>
                                                    </dt></div>
                                            <xf:else />
                                                <dt>{{ phrase('joined') }}</dt>
                                            </xf:if>
                                            <dd class="postbit-extra-dd">{{ date($user.register_date) }}</dd>
                                        </dl>
                                    </xf:if>
                                    <xf:if is="$extras.message_count">
                                        <dl class="pairs pairs--justified postbit-extra">
                                            <xf:if is="property('xentr_user_info_block_collapse')">
                                                <div class="postbit-extra-icon">
                                                    <dt>
                                                    <span data-xf-init="tooltip" title="{{ phrase('messages')|for_attr }}">
                                                        <xf:fa icon="fa-comment-lines" />
                                                        </span>
                                                </dt></div>
                                                <xf:else />
                                                <dt>{{ phrase('messages') }}</dt>
                                            </xf:if>
                                            <dd class="postbit-extra-dd">{$user.message_count|number}</dd>
                                        </dl>
                                    </xf:if>
                                    <xf:if is="$extras.solutions AND $user.question_solution_count">
                                        <dl class="pairs pairs--justified postbit-extra">
                                            <xf:if is="property('xentr_user_info_block_collapse')">
                                                <div class="postbit-extra-icon"><dt>
                                                    <span data-xf-init="tooltip" title="{{ phrase('solutions')|for_attr }}">
                                                        <xf:fa icon="fa-star" />
                                                    </span>
                                                    </dt></div>
                                                <xf:else />
                                                <dt>{{ phrase('solutions') }}</dt>
                                            </xf:if>
                                            <dd class="postbit-extra-dd">{$user.question_solution_count|number}</dd>
                                        </dl>
                                    </xf:if>
                                    <xf:if is="$extras.reaction_score">
                                        <dl class="pairs pairs--justified postbit-extra">
                                            <xf:if is="property('xentr_user_info_block_collapse')">
                                                <div class="postbit-extra-icon"><dt>
                                                    <span data-xf-init="tooltip" title="{{ phrase('reaction_score')|for_attr }}">
                                                        <xf:fa icon="fa-thumbs-up" />
                                                    </span>
                                                    </dt></div>
                                                <xf:else />
                                                <dt>{{ phrase('reaction_score') }}</dt>
                                            </xf:if>
                                            <dd class="postbit-extra-dd">{$user.reaction_score|number}</dd>
                                        </dl>
                                    </xf:if>
                                    <xf:if is="$extras.trophy_points && $xf.options.enableTrophies">
                                        <dl class="pairs pairs--justified postbit-extra">
                                            <xf:if is="property('xentr_user_info_block_collapse')">
                                                <div class="postbit-extra-icon"><dt>
                                                    <span data-xf-init="tooltip" title="{{ phrase('points')|for_attr }}">
                                                        <xf:fa icon="fa-trophy" />
                                                    </span>
                                                    </dt></div>
                                            <xf:else />
                                                <dt>{{ phrase('points') }}</dt>
                                            </xf:if>
                                            <dd class="postbit-extra-dd">{$user.trophy_points|number}</dd>
                                        </dl>
                                    </xf:if>
                                    <xf:if is="$extras.age && $user.Profile.age">
                                        <dl class="pairs pairs--justified postbit-extra">
                                            <xf:if is="property('xentr_user_info_block_collapse')">
                                                <div class="postbit-extra-icon"><dt>
                                                    <span data-xf-init="tooltip" title="{{ phrase('age')|for_attr }}">
                                                        <xf:fa icon="fa-birthday-cake" />
                                                    </span>
                                                    </dt></div>
                                            <xf:else />
                                                <dt>{{ phrase('age') }}</dt>
                                            </xf:if>
                                            <dd class="postbit-extra-dd">{$user.Profile.age}</dd>
                                        </dl>
                                    </xf:if>
You need edit all
for credit
Code:
<dl class="pairs pairs--justified postbit-extra">
<div class="postbit-extra-icon"><dt>
<span data-xf-init="tooltip" title="{$currency.title}">
<xf:fa icon="fa-wallet" />
</span>
    </dt></div>
        <dd class="postbit-extra-dd">
            <a href="{{ link('dbtech-credits/currency', $currency, {'user_id': $user.user_id}) }}" data-xf-click="overlay" class="fauxBlockLink-blockLink u-concealed">
                {$currency.prefix}{{ $currency.getValueFromUser($user) }}{$currency.suffix}
            </a>
        </dd>
    </dl>
Suphawatis this code for point : $extras.trophy_points.....
 

Suphawat

Well-known member
Registered
Joined
Mar 15, 2019
Messages
64
Points
28

Reputation:

for credit code where should i paste them , mean where in between or after any line ?
ShieldX
Code:
<xf:set var="$viewableCurrencies" value="{{ $xf.app.em.getRepository('DBTech\Credits:Currency').getCurrencies(true) }}" />

<xf:if is="$viewableCurrencies">
    <xf:foreach loop="$viewableCurrencies" value="$currency" if="$currency.postbit">
    <dl class="pairs pairs--justified postbit-extra">
<div class="postbit-extra-icon"><dt>
<span data-xf-init="tooltip" title="{$currency.title}">
<xf:fa icon="fa-wallet" />
</span>
    </dt></div>
        <dd class="postbit-extra-dd">
            <a href="{{ link('dbtech-credits/currency', $currency, {'user_id': $user.user_id}) }}" data-xf-click="overlay" class="fauxBlockLink-blockLink u-concealed">
                {$currency.prefix}{{ $currency.getValueFromUser($user) }}{$currency.suffix}
            </a>
        </dd>
    </dl>
    </xf:foreach>
</xf:if>

full code dbtech_credits_postbit
 

Shubnam

Member
Registered
Joined
Mar 22, 2022
Messages
6
Points
11

Reputation:

View previous replies…

ForumFlake

Well-known member
Registered
Joined
Feb 8, 2023
Messages
79
Points
8

Reputation:

How can I get the right code for this. I tried copy and pasting what shield x posted. But It gave me an error, Can someone help me, I have Revolution pro theme, I wanna redesign the postbit with the boxes like the OP has. I want something like this.
2a824ffc001ae2616b7c72751749413b.png

https://gyazo.com/2a824ffc001ae2616b7c72751749413b it looks nice.
 

Zer01ne

Collaborate
Collaborate
Registered
Joined
Nov 25, 2022
Messages
720
Points
253

Reputation:

ForumFlake

Well-known member
Registered
Joined
Feb 8, 2023
Messages
79
Points
8

Reputation:

Last edited:
Top