XF 1.4 Adding date to message container top border

[eggplant_casserole]

Having moved from vBulletin 4, our users are requesting a style more like the one we had. I've managed to get it looking pretty similar. As part of this, I added a top border and bottom border to the message container, both of width 25px. They have different colours, and look exactly as they did in vBulletin. However, the date and post number were in the top border.

I followed Jake's instructions on moving the date / post number to the top, found here: https://xenforo.com/community/threads/request-move-post-date-and-post-number-to-top-of-thread.12856/

That works, in that it moves them to the top. However, they are under the border.

How can I make it so this information is in the border?

Here's what I mean - on the left is what I have achieved on Xenforo. The right is how it looked on vBulletin. (I'm not worried about changing the formatting etc. - just getting the text into the blue border).

 

[eggplant_casserole]

We ended up using the code found in the referenced post, but altering the part that goes in:

Admin CP -> Appearance -> Templates -> post

to:

<xen:set var="$messageBeforeTemplate">
<div class="messageMeta" style="background: rgb(13, 86, 166); padding: 9px 20px 10px; margin-bottom: 10px;">
<div class="privateControls">
<span class="item muted">
<xen:username user="$post" class="author" />,
<a href="{xen:link threads/post-permalink, $thread, 'post={$post}'}" title="{xen:phrase permalink}" class="datePermalink"><xen:datetime time="$post.post_date" /></a>
</span>
</div>

<div class="publicControls">
<a href="{xen:link threads/post-permalink, $thread, 'post={$post}'}" class="item muted postNumber hashPermalink" title="{xen:phrase permalink}">#{xen:calc '{$post.position} + 1'}</a>
</div>
</div>
</xen:set>

(The alteration is the div class="messageMeta" line. Change the background colour value to suit.)

On Xenforo 1.4, the complete code for post would be:

Spoiler: Click for code

<xen:include template="message">

    <xen:map from="$post" to="$message" />

    <xen:set var="$messageId">post-{$post.post_id}</xen:set>
  
    <xen:set var="$likesUrl">{xen:link posts/likes, $post}</xen:set>
  
    <xen:set var="$messageContentAfterTemplate"><xen:if is="{$post.attachments}"><xen:include template="attached_files" /></xen:if></xen:set>
  
    <xen:set var="$messageAfterTemplate">
              
        <div class="messageMeta ToggleTriggerAnchor">
          
            <div class="privateControls">
                <xen:if is="{$post.canInlineMod}"><input type="checkbox" name="posts[]" value="{$post.post_id}" class="InlineModCheck item" data-target="#post-{$post.post_id}" title="{xen:phrase select_this_post_by_x, 'name={$post.username}'}" /></xen:if>
                <span class="item muted">
                    <span class="authorEnd"><xen:username user="$post" class="author" />,</span>
                    <a href="{xen:link threads/post-permalink, $thread, 'post={$post}'}" title="{xen:phrase permalink}" class="datePermalink"><xen:datetime time="$post.post_date" /></a>
                </span>
                <xen:hook name="post_private_controls" params="{xen:array 'post={$post}'}">
                <xen:if is="{$post.canEdit}">
                    <a href="{xen:link posts/edit, $post}" class="item control edit {xen:if $xenOptions.messageInlineEdit, OverlayTrigger}"
                        data-href="{xen:link posts/edit-inline, $post}" data-overlayOptions="{&quot;fixed&quot;:false}"
                        data-messageSelector="#post-{$post.post_id}"><span></span>{xen:phrase edit}</a>
                    <xen:require js="js/xenforo/discussion.js" />
                </xen:if>
                <xen:if is="{$post.edit_count} && {$post.canViewHistory}"><a href="{xen:link posts/history, $post}" class="item control history ToggleTrigger"><span></span>{xen:phrase history}</a></xen:if>
                <xen:if is="{$post.canDelete}"><a href="{xen:link posts/delete, $post}" class="item control delete OverlayTrigger"><span></span>{xen:phrase delete}</a></xen:if>
                <xen:if is="{$post.canCleanSpam}"><a href="{xen:link spam-cleaner, $post}" class="item control deleteSpam OverlayTrigger"><span></span>{xen:phrase spam}</a></xen:if>
                <xen:if is="{$canViewIps} AND {$post.ip_id}"><a href="{xen:link posts/ip, $post}" class="item control ip OverlayTrigger"><span></span>{xen:phrase ip}</a></xen:if>
              
                <xen:if is="{$post.canWarn}">
                    <a href="{xen:link members/warn, $post, 'content_type=post', 'content_id={$post.post_id}'}" class="item control warn"><span></span>{xen:phrase warn}</a>
                <xen:elseif is="{$post.warning_id} && {$canViewWarnings}" />
                    <a href="{xen:link warnings, $post}" class="OverlayTrigger item control viewWarning"><span></span>{xen:phrase view_warning}</a>
                </xen:if>
                <xen:if is="{$post.canReport}">
                    <a href="{xen:link posts/report, $post}" class="OverlayTrigger item control report" data-cacheOverlay="false"><span></span>{xen:phrase report}</a>
                </xen:if>
              
                </xen:hook>
            </div>
          
            <div class="publicControls">
                <a href="{xen:link threads/post-permalink, $thread, 'post={$post}'}" title="{xen:phrase permalink}" class="item muted postNumber hashPermalink OverlayTrigger" data-href="{xen:link posts/permalink, $post}">#{xen:calc '{$post.position} + 1'}</a>
                <xen:hook name="post_public_controls" params="{xen:array 'post={$post}'}">
                <xen:if is="{$post.canLike}">
                    <a href="{xen:link posts/like, $post}" class="LikeLink item control {xen:if $post.like_date, unlike, like}" data-container="#likes-post-{$post.post_id}"><span></span><span class="LikeLabel">{xen:if $post.like_date, {xen:phrase unlike}, {xen:phrase like}}</span></a>
                </xen:if>
                <xen:if is="{$canReply}">
                    <xen:if is="{$xenOptions.multiQuote}"><a href="{xen:link threads/reply, $thread, 'quote={$post.post_id}'}"
                        data-messageid="{$post.post_id}"
                        class="MultiQuoteControl JsOnly item control"
                        title="{xen:phrase toggle_multi_quote_tooltip}"><span></span><span class="symbol">{xen:phrase multiquote_add}</span></a></xen:if>
                    <a href="{xen:link threads/reply, $thread, 'quote={$post.post_id}'}"
                        data-postUrl="{xen:link posts/quote, $post}"
                        data-tip="#MQ-{$post.post_id}"
                        class="ReplyQuote item control reply"
                        title="{xen:phrase reply_quoting_this_message}"><span></span>{xen:phrase reply}</a>
                </xen:if>
                </xen:hook>
            </div>
        </div>
    </xen:set>
  
    <xen:set var="$messageBeforeTemplate">
<div class="messageMeta" style="background: rgb(13, 86, 166); padding: 9px 20px 10px; margin-bottom: 10px;">
<div class="privateControls">
<span class="item muted">
<xen:username user="$post" class="author" />,
<a href="{xen:link threads/post-permalink, $thread, 'post={$post}'}" title="{xen:phrase permalink}" class="datePermalink"><xen:datetime time="$post.post_date" /></a>
</span>
</div>

<div class="publicControls">
<a href="{xen:link threads/post-permalink, $thread, 'post={$post}'}" class="item muted postNumber hashPermalink" title="{xen:phrase permalink}">#{xen:calc '{$post.position} + 1'}</a>
</div>
</div>
</xen:set>
  
</xen:include>

As stated in the previous post, if you want conversations to match, put the same code in:

Admin CP -> Appearance -> Templates -> conversation_message