XF 1.4 Postbit Layout

This is the way I have done it, but reading comments from others, it wasn't the cleanest way, so use at own risk.

First, I always edit the template message_user_info I have to add in the FA icons, so I do that there, and I also change pairsJustified to pairsInline.

This is the edit:

Code:
<xen:if is="@messageShowMessageCount AND {$user.user_id}">
                    <dl class="pairsInline">
                        <dt><span class="fa fa-comments fa-fw Tooltip" title="{xen:phrase messages}"></span></dt>
                        <dd><a href="{xen:link search/member, '', 'user_id={$user.user_id}'}" class="concealed" rel="nofollow">{xen:number $user.message_count}</a></dd>
                    </dl>
                </xen:if>
               
                <xen:if is="@messageShowTotalLikes AND {$user.user_id}">
                    <dl class="pairsInline">
                        <dt><span class="fa fa-thumbs-up fa-fw Tooltip" title="{xen:phrase likes_received}"></span></dt>
                        <dd>{xen:number $user.like_count}</dd>
                    </dl>
                </xen:if>
               
                <xen:if is="@messageShowTrophyPoints AND {$user.user_id}">
                    <dl class="pairsInline">
                        <dt><span class="fa fa-trophy fa-fw Tooltip" title="{xen:phrase trophy_points}"></span></dt>
                        <dd><a href="{xen:link 'members/trophies', $user}" class="OverlayTrigger concealed">{xen:number $user.trophy_points}</a></dd>
                    </dl>
                </xen:if>

Note: if you have add-ons that hook into those, if dependent on TMS, it likely will not work properly and you'd need a couple edits. As I said before, use at your own risk.

Then, I go into Style Properties and widen my postbit area, as well as offsetting the content area.
Screenshot_7.webp
Screenshot_8.webp
Then I add this to Extra.css
Code:
.extraUserInfo .pairsInline .fa {
    font-size: 20px;
    opacity: .5;
    color: rgb (150,150,150)
}
.messageUserBlock .extraUserInfo .pairsInline {
    display: inline-block;
    margin-bottom: 5px;
    text-align: center;
    width: 32%;
}
.messageUserBlock .extraUserInfo {
    color: rgb(106, 106, 106);
    font-size: 15px;
    margin: 5px 10px;
    padding: 0 !important;
    }

.extraUserInfo .pairsInline > dd {
    display: block;
    margin-top: 5px;
    font-size: 14px;
}

In the end, you come up with this on the default style.
Screenshot_5.webp

And yes, hoverable (which is part of the template edit)
hover.gif
 
And so it's known, that is usually just a start, or a base... it changes drastically depending on the needs I see at the time (stuff added, ect.), it is not done this way every single time.

I just happened to be bored so I posted that.
 
And so it's known, that is usually just a start, or a base... it changes drastically depending on the needs I see at the time (stuff added, ect.), it is not done this way every single time.

I just happened to be bored so I posted that.
Awesome, Anymore tops you can show us with the postbit. I actually dont know much about coding at all. Im just trying to develop a good site for my Company. All the help i can get is greatly appreciated.
 
@Sheldon
I've done the same your guide. :p
Outcome.
Screenshot_2014-11-17-00-02-33_1.webp
I want the icon in line.(like you)
screenshot_5-png.89082
 
Top Bottom