[Xenforo] Change Postbit Layout

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:

info1

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:

info2

Click on it and we will see the following page:

info3

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:

info4

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

Tags: , , , , , , , , , | Posted under XenForo | RSS 2.0

Author Spotlight

Keith Pottratz

Hello My Name is Keith Pottratz. I have been working with computers for over a decade. It's my personal hobby something that I love and enjoy doing. I went to school for Computer Science, and have spent many years self teaching my self various things. I have ton's of experience in HTML,CSS, PHPBB,CPanel,CMS software, blogging software and various other systems and enviroments. My favorite thing to do though is backend developing. I find it to be a growing and ever evolving beast and I love learning about it. I look forward to giving as much knowledge as I can and help.

Leave a Reply

Your email address will not be published. Required fields are marked *