Hide Extra User Info with CSS Effect xenforo

security · 25-07-2015, 01:06 AM

First off this is a quickie, not tested with anything other than a default setup. So there will be limited support for this but it is so simple there really shouldn't be much support required. Pure CSS so there are some limitations and it could be accomplished with JS, which I will probably update this if I get time to make the script..

This is a simple little CSS snippet that hides the Extra User Info in messages until someone does a mouseover (hover) on the Message User Block..

Know issue:

Once a user hovers over the message user block it will push content below that message down. You can help reduce this by adding a higher min-height on the message content. I will leave that up to people to adjust it if they like.

Add to EXTRA.css

Code:
.messageUserBlock .extraUserInfo
 {
 opacity: 0;
 height: 0px;
 overflow: hidden;
 transition: all 0.5s ease-in;
 }
 
 .messageUserInfo:hover .extraUserInfo
 {
 opacity: 1;
 height: 55px;
 }
 
 <xen:if is="@enableResponsive">
 @media (max-width:@maxResponsiveWideWidth)
 {
 html .messageUserBlock .extraUserInfo
 {
 opacity: 1;
 height: auto;
 transition: none;
 }
 .messageUserInfo:hover .extraUserInfo
 {
 height: auto;
 }
 
 }
 </xen:if>

Depending on how many user fields you have enabled in the extra user info you may need to adjust the height that I have marked in red in the above code.

Hide Extra User Info with CSS Effect xenforo

Submitted by security, 25-07-2015, 01:06 AM, Thread ID: 8134