Smashbox
Member
do you have screen please ?
I edited the original post and added the screenshot.
do you have screen please ?
/* User Online-Offline tags over Avatar */
.UserOnline, .UserOffline, .UserOnlineInvisible
{
font-weight: bold;
font-size: 10px;
width: 34px;
color: @contentBackground;
background: @primaryLight url('@imagePath/xenforo/gradients/category-23px-light.png') repeat-x top;
padding: 1px 5px;
margin: -109px 0px 0px 0px;
border: 1px solid @primaryLight;
border-radius: 3px;
border-top-left-radius: 0px;
display: block;
float: left;
position: relative;
box-shadow: 1px 1px 3px rgba(0,0,0, 0.25);
margin-left: -4px;
}
.UserOnline span, .UserOffline span, .UserOnlineInvisible span
{
background-color: @primaryLight;
border-top-left-radius: 3px;
position: absolute;
top: -4px;
right: 41px;
width: 4px;
height: 4px;
}
these do not work for me after I updated to 1.1...
I don't want changes except that ribbon appears at top-left. Can you tell me how ? Currently it appears at bottom-right.I've just installed the mod and used the CSS given in this thread (thanks to both for your efforts) - but wanted to wrap mine at the top left.
I had a small issue with width (a 2px difference between offline and online) so fixed the width of mine, but here's the EXTRAS.css code for anyone who might want to use it:
View attachment 22425
that worked perfect thanksTry using:
.userUserOnline, .userUserOffline, .userUserOnlineInvisible
instead of:
.UserOnline, .UserOffline, .UserOnlineInvisible
That worked for me!
.UserOnline, .UserOffline, .UserOnlineInvisible {
position:absolute;
right:3px;
top:125px;
height:37px;
width:6px;
border-radius:3px;
background-color: #00e400;
}
.UserOnline span, .UserOffline span, .UserOnlineInvisible span
.UserOnline, .UserOffline, .UserOnlineInvisible {
position:absolute;
right:3px;
top:125px;
height:37px;
width:6px;
border-radius:3px;
background-color: #fa0404;
}
.UserOnlineInvisible {
position:absolute;
right:3px;
top:125px;
height:37px;
width:6px;
border-radius:3px;
background-color: #ffc71f;
}
.UserOnlineInvisible span {
position:absolute;
right:3px;
top:125px;
height:37px;
width:6px;
border-radius:3px;
background-color: #ffc71f;
}
<span class="{$userStatus.class}"></span><span class="secondSpan"></span>
If you want not appear users offline, add at the end of your code:The template adds Extra.cssCode:.UserOnline, .UserOffline, .UserOnlineInvisible { position:absolute; right:3px; top:125px; height:37px; width:6px; border-radius:3px; background-color: #00e400; } .UserOnline span, .UserOffline span, .UserOnlineInvisible span .UserOnline, .UserOffline, .UserOnlineInvisible { position:absolute; right:3px; top:125px; height:37px; width:6px; border-radius:3px; background-color: #fa0404; } .UserOnlineInvisible { position:absolute; right:3px; top:125px; height:37px; width:6px; border-radius:3px; background-color: #ffc71f; } .UserOnlineInvisible span { position:absolute; right:3px; top:125px; height:37px; width:6px; border-radius:3px; background-color: #ffc71f; }
The template adds message_user_online:Code:<span class="{$userStatus.class}"></span><span class="secondSpan"></span>
I'ma beginner in css cost me a lot to do this but finally succeeds.
.UserOffline {
position:absolute;
right:3px;
top:125px;
height:37px;
width:6px;
border-radius:3px;
background-color: transparent;
}
.UserOffline span {
position:absolute;
right:3px;
top:125px;
height:37px;
width:6px;
border-radius:3px;
background-color: transparent;
}
.UserOffline, .UserOffline span {
display: none !important;
}
.UserOnline
{
font-weight: bold;
font-size: 10px;
color: #ffffff;
background: #66cc00;
padding: 1px 5px;
margin: -5px;
border: 1px solid @primaryLight;
border-radius: 3px;
border-top-right-radius: 0px;
border-top-left-radius: 0px;
display: block;
float: inherit;
position: relative;
box-shadow: 0px 1px 3px rgba(0,0,0, 0.25);
}
.UserOffline
{
font-weight: bold;
font-size: 10px;
color: #ffffff;
background: #ff3333;
padding: 1px 5px;
margin: -5px;
border: 1px solid @primaryLight;
border-radius: 3px;
border-top-right-radius: 0px;
border-top-left-radius: 0px;
display: block;
float: inherit;
position: relative;
box-shadow: 0px 1px 3px rgba(0,0,0, 0.25);
}
.UserOnlineInvisible
{
font-weight: bold;
font-size: 10px;
color: #ffffff;
background: #ff66ff;
padding: 1px 5px;
margin: -5px;
border: 1px solid @primaryLight;
border-radius: 3px;
border-top-right-radius: 0px;
border-top-left-radius: 0px;
display: block;
float: inherit;
position: relative;
box-shadow: 0px 1px 3px rgba(0,0,0, 0.25);
}
.UserOnline span
{
background-color: #006600;
border-top-right-radius: 3px;
position: absolute;
top: -4px;
right: -1px;
width: 5px;
height: 4px;
}
.UserOffline span
{
background-color: #993333;
border-top-right-radius: 3px;
position: absolute;
top: -4px;
right: -1px;
width: 5px;
height: 4px;
}
.UserOnlineInvisible span
{
background-color: #990066;
border-top-right-radius: 3px;
position: absolute;
top: -4px;
right: -1px;
width: 5px;
height: 4px;
}
Thanks so much @BroganYou can do that with something like this.
Add this to message_user_info.css:
HTML:.online_dot { position:absolute; right:3px; top:3px; height:6px; width:6px; border-radius:3px; background-color:green; }
Edit the message_user_info template:
HTML:<div class="avatarHolder"><span class="online_dot"></span><xen:avatar user="$user" size="m" itemprop="photo" /></div>
It looks like this:
View attachment 6199View attachment 6200
That's quick and dirty so it would need tidying up a bit but it's what I'll be doing.
I just want something very subtle which is noticeable but not overly so.
Here is what I've got while playing with CSS
View attachment 6158
Code:float: inherit; font-size: 10px; margin-left: -5px;
Brogan's version:
View attachment 6160
HTML:<span class="userOnline"> <span></span> </span>
Code:height: 36px; margin-right: -5px; margin-top: -70px; padding-bottom: 1px; padding-left: 1px; padding-right: 5px; padding-top: 1px;
We use essential cookies to make this site work, and optional cookies to enhance your experience.