Hide Extra User Info with CSS Effect xenforo

by security - 25-07-2015, 12:06 AM
Closed Account
Jul 2015
2 Years of Service
Posted: 25-07-2015, 12: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
.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;

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.
The last reply on this thread is older than a month. Please do not unnecessarily bump it.
Register an account or login to reply
Create an account
Create a free account today and start posting right away. It only takes a few seconds.
Log into an existing account.
1 Guest(s)