In this article, I am going to show you how to change the orientation of the member user info in threads.

What do I mean by this? What I am discussing here is expressed the following image:

So as you can see by this image it’s to the left of the post. What I am going to show here is how to change it so that it’s on top of the post. This is pretty nostalgic for those who have been using forum software for many years like I have.

So how can we do this?  Well I will show you.

First we need to do some code changes so we are going to go to our Admin cp and go to appearances and then message_user_info.css like so:

Click on it and we will see the following page:

We are going to replace the entire content of the current page with the following edited code:

.messageUserInfo
{
    @property "messageUserInfo";
    margin-bottom: 20px;
    @property "/messageUserInfo";
}

    .messageUserBlock
    {
        @property "messageUserBlock";
        background: @primaryLighterStill url('@imagePath/xenforo/gradients/tab-selected-light.png') repeat-x bottom;
        border: 1px solid @primaryLighterStill;
        border-radius: 5px;
        height: 122px;
        @property "/messageUserBlock";
  
        position: relative;
    }
  
        .messageUserBlock div.avatarHolder
        {
            @property "messageAvatarHolder";
            background-color: @primaryLightest;
            padding: 10px;
            margin-right: 15px;
            border-radius: 4px;
            float: left;
            @property "/messageAvatarHolder";
      
            position: relative;
        }
  
            .messageUserBlock div.avatarHolder .avatar
            {
                display: block;
                font-size: 0;
            }
      
            .messageUserBlock div.avatarHolder .onlineMarker
            {
                position: absolute;
                top: {xen:calc '@messageAvatarHolder.padding-top - 1'}px;
                left: {xen:calc '@messageAvatarHolder.padding-right - 1'}px;
          
                @property "messageOnlineMarker";
                border: 7px solid transparent;
                border-top-color: rgb(127, 185, 0);
                border-left-color: rgb(127, 185, 0);
                border-top-left-radius: 5px;
                border-top-right-radius: 3px;
                border-bottom-left-radius: 3px;
                @property "/messageOnlineMarker";
            }
      
        .messageUserBlock h3.userText
        {
            @property "messageUserText";
            padding: 6px;
            @property "/messageUserText";
        }
  
        .messageUserBlock .userBanner:last-child
        {
            margin-bottom: 0;
        }
        .messageUserBlock a.username
        {
            @property "messageUsername";
            font-weight: bold;
            display: inline;
            overflow: hidden;
            line-height: 16px;
            @property "/messageUsername";
      
        }
  
        .messageUserBlock .userTitle
        {
            @property "messageUserTitle";
            font-size: 11px;
            margin-bottom: 16px;
            display: block;
            @property "/messageUserTitle";
        }
  
        .messageUserBlock .extraUserInfo
        {
            @property "messageExtraUserInfo";
            font-size: 10px;
            background-color: @primaryLightest;
            padding: 10px 10px 7px;
            margin: -58px 0;
            border-radius: 4px;
            float: right;
            height: 105px;
            @property "/messageExtraUserInfo";
        }
                      
            .messageUserBlock .extraUserInfo img
            {
                max-width: 100%;
            }
  
        .messageUserBlock .arrow
        {
            position: absolute;
            top: 123px;
            left: 10px;
      
            display: block;
            width: 0px;
            height: 0px;
            line-height: 0px;
      
            border: 10px solid transparent;
            border-top-color: @messageUserBlock.border-color;
            -moz-border-top-colors: @messageUserBlock.border-color;
      
            /* Hide from IE6 */
            _display: none;
        }
  
            .messageUserBlock .arrow span
            {
                position: absolute;
                top: -11px;
                left: -10px;
          
                display: block;
                width: 0px;
                height: 0px;
                line-height: 0px;
          
                border: 10px solid transparent;
                border-top-color: @messageAvatarHolder.background-color;
                -moz-border-top-colors: @messageAvatarHolder.background-color;
            }

<xen:if is="@enableResponsive">
@media (max-width:@maxResponsiveNarrowWidth)
{
    .Responsive .messageUserInfo
    {
        float: none;
        width: auto;
    }

    .Responsive .messageUserBlock
    {
        margin-bottom: 5px;
        position: relative;
        height: 64px;
    }

    .Responsive .messageUserBlock div.avatarHolder
    {
        float: left;
        padding: 5px;
    }

        .Responsive .messageUserBlock div.avatarHolder .avatar img
        {
            width: 48px;
            height: 48px;
        }
  
        .Responsive .messageUserBlock div.avatarHolder .onlineMarker
        {
            top: 4px;
            left: 4px;
            border-width: 6px;
        }

    .Responsive .messageUserBlock h3.userText
    {
        margin-left: 64px;
    }
    .Responsive .messageUserBlock .userBanner
    {
        max-width: 150px;
        margin-right: 0;
        border-top-left-radius: 3px;
        border-top-right-radius: 3px;
        position: static;
        display: inline-block;
    }
        .Responsive .messageUserBlock .userBanner span
        {
            display: none;
        }

    .Responsive .messageUserBlock .extraUserInfo
    {
        display: none;
    }
    .Responsive .messageUserBlock .arrow
    {
        top: 65px;
    }
}
</xen:if>

Whew! That was a lot of code but trust me it’s worth it!

So what’s next?’

Well we need to go back to Templates and edit our Extra.css file.

Now here just add the following code to the end  of your file.

The code that you need is as follows:

.messageUserBlock .pairsJustified
{
    line-height: inherit;
    margin-top: -5px;
    padding-bottom: 7px;
}

.message .messageInfo
{
    margin: 0 !important;
}

.quickReply .messageUserBlock .arrow
{
    top: 10px;
    left: 123px;
    border: 10px solid transparent;
    border-left-color: @messageUserBlock.border-color;
    -moz-border-left-colors: @messageUserBlock.border-color;
    border-right: none;
}
  
.quickReply .messageUserBlock .arrow span
{
    top: -10px;
    left: -11px;  
    border: 10px solid transparent;
    border-left-color: @messageAvatarHolder.background-color;
    -moz-border-left-colors: @messageAvatarHolder.background-color;
    border-right: none;
}

.quickReply .messageUserInfo
{
    float: left !important;
}

.quickReply .messageUserBlock div.avatarHolder
{
    margin-right: 0 !important;
}

.messageUserBlock .userBanner
{
    position: absolute !important;
    top: 40px;
}

.messageUserBlock .userBanner.wrapped span
{
    display: none;
}

.messageUserBlock .userBanner.wrapped
{
    border-radius: 3px !important;
    margin-left: 80px;
}

.messageUserBlock .userBanner.bannerStaff
{
    margin-left: 0 !important;
}

Wow! That is so much code it makes my head spin! But, fear not we can do this and it’s easily manageable. Make sure that you have clicked save for both edits so that we know the changes can take effect.

So  now what? Well we are all finished! So here is what it looks like:

There you have it all done!

If you have any questions please feel free to ask away!

Looking for quality XenForo hosting? Check out Arvixe Web Solutions