XF2 Tutorials Years Of Service (Postbit)

[XenBD]

This is seen on many boards like this:


However you can achieve somewhat similar results easy.

In message_macros added the following:

    arg-itemProp="">
    <xf:set var="$monthsOld">{{ number(($xf.time - $user.register_date) / (60 * 60 * 24 * 30)) }}</xf:set>
    <xf:set var="$yearsOld">{{ number(($xf.time - $user.register_date) / (60 * 60 * 24 * 30 * 12)) }}</xf:set>
    <section class="message-user"

                                arg-valueClass="pairs pairs--justified" />
                        </xf:if>
                    </xf:if>
                </xf:contentcheck>
    <xf:if is="$yearsOld >= '1'">
            <div class="service-tag type-year-{$yearsOld}"><i class="fa fa-star" aria-hidden="true"></i> {$yearsOld} years of service</div>
        <xf:elseif is="$monthsOld >= '1'" />
            <div class="service-tag type-month-{$monthsOld}"><i class="fa fa-star" aria-hidden="true"></i> {$monthsOld} months of service</div>
    </xf:if>
                </div>
            </xf:if>
        </xf:if>
        <span class="message-userArrow"></span>

Add the following to Extra.less:

.type-month-1,
.type-month-2,
.type-month-3,
.type-month-4,
.type-month-5,
.type-month-6,
.type-month-7,
.type-month-8,
.type-month-9,
.type-month-10,
.type-month-11
 {
    color: hsl(199, 100%, 54%);
    border-bottom-style: solid;
    border-width: 2px;
}

.service-tag {
    order: 9;
    width: 85%;
    padding: 4px 6px;
    text-align: center;
    border-radius: 1px;
    font-size: 11px;
    text-shadow: none;
    text-transform: uppercase;
    margin: 3px auto 0 auto;
    margin-bottom: 5px;
    font-weight: bold;
    background: hsl(0, 0%, 7%);
}

You'll have to further tweaking this to your liking.