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>