• This forum has been archived. New threads and replies may not be made. All add-ons/resources that are active should be migrated to the Resource Manager. See this thread for more information.

Show user is online

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:

top-left-wrap.webp

Code:
/* 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;
        }

NB: I've made my avatar container a little wider than the "stock" XF one so you might need to adjust the position a little.
 
these do not work for me after I updated to 1.1... Maybe its something to do with the Flexile theme that I'm using. The online offline is working but anything I put in the extra.css template has not effect
 
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
I don't want changes except that ribbon appears at top-left. Can you tell me how ? Currently it appears at bottom-right.

Thanks in advance :D
 
Avatar.webp
The template adds Extra.css​
Code:
.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.
 
The template adds Extra.css​
Code:
.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.
If you want not appear users offline, add at the end of your code:
Code:
.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;
}
or
Code:
.UserOffline, .UserOffline span {
display: none !important;
}

Salud2
 
4. Tip (covering ribbon):

rib2.webprib1.webp

Code:
.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;
        }
 
You 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.
Thanks so much @Brogan

EDIT: it keeps messing up my topic layout
 
Top Bottom