Bradley Prout

Well-Known Member
How would I be able to move the part below the avatar, the post date details ( July 24th 2016) above the avatar part? Swap them around and then colour the post date background in blue and change the text color to white?


  • wp_ss_20160731_0002.png
    523.3 KB · Views: 22
Easiest way I know of would be to, copy this portion:

      <xen:if is="@xb_message_layout == 1 OR @xb_message_header">
   <div class="messageHeading">
     <span class="leftSide">
       <xen:if is="{$conversation}">
         <a href="{xen:link conversations/message, $conversation, 'message_id={$message.message_id}'}" class="datePermalink"><xen:datetime time="$message.message_date" /></a>
       <xen:else />
         <a href="{xen:link threads/post-permalink, $thread, 'post={$post}'}" title="{xen:phrase permalink}" class="datePermalink"><xen:datetime time="$post.post_date" /></a>
     <xen:if is="!{$conversation}">
     <span class="rightSide">
       <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>

Inside the message template, paste it again right below the very top <li class=message ect ect

Also add an extra class next to messageHeading, like mobileHeader, so the top would look like: <div class="messageHeading mobileHeader">

Then your extra.css:
.messageHeading.mobileHeader { display: none; }
@media (max-width:@maxResponsiveNarrowWidth) {
.messageInfo .messageHeading { display: none; }
.Responsive .messageHeading.mobileHeader { display: block; }
No, paste it right below the very first <li, it's at the very top of the template:

<li id="{$messageId}" class="message {xen:if $message.isDeleted, 'deleted'} {xen:if '{$message.is_staff}', 'staff'} {xen:if '{$post.user_id} == {$thread.user_id}', 'threadStarter'} {xen:if '{$message.is_admin}', 'admin'} {xen:if $message.isIgnored, ignored}" data-author="{$message.username}">

Essentially you're copying it back to the original location, but also adding a class to help with CSS.
Add: margin: 0px; to:

.Responsive .messageHeading.mobileHeader

For a border on top, Style Properties -> Message Layout -> Message Container, just add a top border there.
Turn what I orignally posted:

.Responsive .messageHeading.mobileHeader {
  display: block;

.Responsive .messageHeading.mobileHeader {
  display: block; margin: 0px;
You need to find this and remove it:
.Responsive .messageUserBlock div.avatarHolder {
  position: absolute !important;
  top: 0 !important;

Maybe do a partial search for:
.Responsive .messageUserBlock div.avatarHolder

Pre-Sale Questions

If you have any questions or concerns you want to ask before you make a purchase don't hesitate to use one of our multiple support channels for your convenience.