message layout on mobile

[Bradley Prout]

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?

 

[Bradley Prout]

what about this please mate @Russ

 

[Russ]

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>
     </span>
     <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>
   
     </span>
     </xen:if>

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; }
}

 

[Bradley Prout]

sorry Russ not 100% what i am doing here.
am i posting the code above im this area ?

 

[Russ]

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.

 

[Bradley Prout]

getting there Russ,thank you so far. Check out the image now?
also how do I go about adding a blue border along the top of each thread.

 

[Russ]

Add: margin: 0px; to:

.Responsive .messageHeading.mobileHeader

For a border on top, Style Properties -> Message Layout -> Message Container, just add a top border there.

 

[Bradley Prout]

Add: margin: 0px; to:

.Responsive .messageHeading.mobileHeader

That in the Extra.css?

 

[Bradley Prout]

when added in extra css. Not sure its working. As I see this

 

[Russ]

That in the Extra.css?

The CSS I gave you previously, display: block; just also add margin: 0px; to that as well.

 

[Russ]

Turn what I orignally posted:

.Responsive .messageHeading.mobileHeader {
  display: block;
}

Into:

.Responsive .messageHeading.mobileHeader {
  display: block; margin: 0px;
}

 

[Bradley Prout]

Turn what I orignally posted:

.Responsive .messageHeading.mobileHeader {
  display: block;
}

Into:

.Responsive .messageHeading.mobileHeader {
  display: block; margin: 0px;
}

genius, now last thing. Just below the avatar it gets cut off a little, can that be fixed ?

 

[Russ]

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

 

[Bradley Prout]

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

damn, how the F do you know all this, amazing thank you Russ