Resource icon

Hide Extra User Info with CSS Effect

Using a opacity would be best for that. I thought there may have been a resource already but can't seem to find it.

Add to EXTRA.css

Code:
.message .privateControls, .message .publicControls
{
    opacity: 0;
    transition: all 0.5s ease-in-out;
}

.message:hover .privateControls, .message:hover .publicControls
{
    opacity: 1;
}
Thanks for this also :)

Here's my previous code use for almost year now:
Code:
/* postbit button controls */
.message .messageMeta .control{ opacity: 0.75; }
.message .messageMeta .privateControls .control{ opacity: 0.10;}
body .message:hover .messageMeta .control{ opacity: 1; }
Just replaced with your code ;)
 
Thanks for your hint, but i have a issue with the Style addon "Online Status Banner" on a xenforo 1.3.3 - look:

View attachment 79224

How can i fix this?
Try this:
Code:
.messageUserBlock .extraUserInfo {
font-size: 10px;
background-color: rgb(252,245,240);
padding: 4px 6px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-khtml-border-radius: 4px;
border-radius: 4px;
width: 90%;
}
 
Try this:
Code:
.messageUserBlock .extraUserInfo {
font-size: 10px;
background-color: rgb(252,245,240);
padding: 4px 6px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-khtml-border-radius: 4px;
border-radius: 4px;
width: 90%;
}
That is not a proper fix really, also no need for -moz or -webkit.

@zagorskey seems to have posted the better solution. I'm on mobile so I can't confirm a fix.
 
Unfortunately this 'breaks' extra user info for responsive/mobile devices, since there's no hover-over effect for touchscreens and thus no method for them to reveal the info.
Anyone resolved this for touchscreen devices, but still kept this terrific functionality?
 
I added a little delay to the transition so that it doesn`t get triggered by accident:

That's what this part of the code is for,

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

}
</xen:if>
 
That's what this part of the code is for
Thanks. But not not working for me with iPad (ie. details hidden with iPad Safari)
I have 'Enable responsive design' ticked and my 'Max Responsive Width (Wide)' is 800px.
 
Unfortunately this 'breaks' extra user info for responsive/mobile devices, since there's no hover-over effect for touchscreens and thus no method for them to reveal the info.
Anyone resolved this for touchscreen devices, but still kept this terrific functionality?

On Android devices it works fine. Just touch any area of the messageUserBlock that isn't linked to something. We have a small spot on ours so that kinda works. But thinking of using CSS to make a more user info thing that disappears both for the mobile benifit as well as new users.

Can't speak for iOS and all browsers but...
 
Message user info is hidden by default on narrow responsive. I will see if I can come up with something else for medium and max.

Thanks. But not not working for me with iPad (ie. details hidden with iPad Safari)
I have 'Enable responsive design' ticked and my 'Max Responsive Width (Wide)' is 800px.

Missed your post, the code is supposed to return everything back to normal on max responsive and below. I'll recheck this later.
 
Has anyone tried this with Android 5.x+Chrome and iOS 8.x + Safari tablets? Is it working? Just touch the area and it'll pop up?
 
Last edited:
Anyone using with UI.X style?
Just upgraded to the latest version of the style (v1.4.3) and this has stopped working on my site.
Not sure what the issue might be.
 
Anyone using with UI.X style?
Just upgraded to the latest version of the style (v1.4.3) and this has stopped working on my site.
Not sure what the issue might be.
Hey @Mouth,
have you been able to get this running again in the UI.X style? Would be nice if you could share your knowledge, cause for us it isn´t working, too.
 
Top Bottom