XF 1.x message layout on mobile

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?
 

Attachments

  • wp_ss_20160731_0002.png
    wp_ss_20160731_0002.png
    523.3 KB · Views: 16

Russ

Pixel Exit Staff
Easiest way I know of would be to, copy this portion:

Code:
      <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:
Code:
.messageHeading.mobileHeader { display: none; }
@media (max-width:@maxResponsiveNarrowWidth) {
.messageInfo .messageHeading { display: none; }
.Responsive .messageHeading.mobileHeader { display: block; }
}
 

Russ

Pixel Exit Staff
No, paste it right below the very first <li, it's at the very top of the template:

Code:
<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.
 
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.
 

Attachments

  • wp_ss_20160802_0001.png
    wp_ss_20160802_0001.png
    479.1 KB · Views: 8

Russ

Pixel Exit Staff
Add: margin: 0px; to:

.Responsive .messageHeading.mobileHeader

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

Russ

Pixel Exit Staff
Turn what I orignally posted:

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

Into:
Code:
.Responsive .messageHeading.mobileHeader {
  display: block; margin: 0px;
}
 
Turn what I orignally posted:

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

Into:
Code:
.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

Pixel Exit Staff
You need to find this and remove it:
Code:
.Responsive .messageUserBlock div.avatarHolder {
  position: absolute !important;
  top: 0 !important;
}

Maybe do a partial search for:
Code:
.Responsive .messageUserBlock div.avatarHolder
 
You need to find this and remove it:
Code:
.Responsive .messageUserBlock div.avatarHolder {
  position: absolute !important;
  top: 0 !important;
}

Maybe do a partial search for:
Code:
.Responsive .messageUserBlock div.avatarHolder
damn, how the F do you know all this, amazing thank you Russ
 

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.