1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

XF 1.4 Postbit Layout

Discussion in 'Styling and Customization Questions' started by Crimson, Nov 13, 2014.

  1. Crimson

    Crimson Member

    How can you make your post bit look like this?

    Screen Shot 2014-11-13 at 12.44.36 PM.png

    :)
     
    Lisa likes this.
  2. Amaury

    Amaury Well-Known Member

    It's a customization done on @Russ' styles.
     
  3. Sheldon

    Sheldon Well-Known Member

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

    And yes, hoverable (which is part of the template edit)
    hover.gif
     
    XboxAR, IPF, maszd and 6 others like this.
  4. Sheldon

    Sheldon Well-Known Member

    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.
     
    Crimson likes this.
  5. Crimson

    Crimson Member

  6. oO5 Dynasty

    oO5 Dynasty Active Member

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

    nguyenhuuhung Active Member

    @Sheldon
    I've done the same your guide. :p
    Outcome.
    Screenshot_2014-11-17-00-02-33_1.jpg
    I want the icon in line.(like you)
    [​IMG]
     
  8. Metin Donmez

    Metin Donmez Member

    here 's how the code point and I need to use for credit
    Ekran Alıntısı.PNG

    thank you
     
  9. Metin Donmez

    Metin Donmez Member

Share This Page