Today we are going to discuss how to hide users extra information in posts. What am I talking about you ask? It looks like this:

So how can we accomplish this you ask? Well we add some CSS to our EXTRA.CSS page in our template modifications section.

So let’s log into our Admin Panel and then navigate to Appearance -> Templates -> Extra.css 

It looks like this:

Click on it and you will see this page:

So after all of your extra code that you have add the following lines of code:

.messageUserBlock .extraUserInfo
{
    opacity: 0;
    max-height: 0px;
    overflow: hidden;
    transition: all 0.5s ease-in-out;
}

.messageUserInfo:hover .extraUserInfo
{
    opacity: 1;
    max-height: 300px;
}

<xen:if is="@enableResponsive">
@media (max-width:@maxResponsiveWideWidth)
{
    html .messageUserBlock .extraUserInfo
    {
        opacity: 1;
        height: auto;
        transition: none;
    }
    .messageUserInfo:hover .extraUserInfo
    {
        height: auto;
    }
 
}
</xen:if>

It will look like this in your box:

now click Save Changes and it should save for you. Now if you test it go to a thread and mouse over someones card and you will see it drop down. Here is before:

Here is after mouse over:

There you have it!

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

Looking for quality XenForo hosting? Check out Arvixe Web Solutions