Xenforo 2.1 postbit like this

[Samuel]

What about for this one (xenforo forum)!

Expanded!

 

[Shubnam]

What about for this one (xenforo forum)!

View attachment 32422

Expanded!

View attachment 32421

Samuelplease share the website link in DM

 

[Splicho]

please share the website link in DM

ShubnamForum is not existing anymore

http://xfactor.org/

 

[Shubnam]

Forum is not existing anymore

http://xfactor.org/

Splichooops,
did you get the codes working?

 

[Splicho]

oops,
did you get the codes working?

ShubnamI have better postbit

 

[Suphawat]

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

2. add this code for icon

<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

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

4.add css to extra.less

.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;
}

 

[jhoancito]

1. Go to message_macros add postbit-extra after pairs pairs--justified see pic
View attachment 32424
2. add this code for icon

<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

.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.

Here is what I made from your tutorial

 

[Zer01ne]

@ForumFlake this may helpful to you

 

[ForumFlake]

@ForumFlake this may helpful to you

Zer01neThank you got the coding to work. Been looking for this for awhile now.

 

[Zer01ne]

Thank you got the coding to work. Been looking for this for awhile now.

ForumFlakewelcome, and glad to hear that.

 

[XenFrodo]

Can someone help me to realize this postbit style?
[v2.2.15] [Default Style]
A-F

 

[Splicho]

Can someone help me to realize this postbit style?
[v2.2.15] [Default Style]
A-F

View attachment 40306

View attachment 40307

XenFrodoC and F is AddonFlare Awards Addon
D is quite easy to do, ill do a tutorial soon.
A is something else, probably another badge system.
B seems to be a badge with conditional statement ($user.is_admin)
E Is also probably a png or svg with if user is online satement

Oh and it seems that xreactor uses iO style as default (I may be wrong)