• 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

Sorry if this is the wrong place, but I want to add these as ranks and then that green dot for online. Anyways, I want to have colors changeable so like purple ribbon that says admin, green for moderator, etc. Is there a way to do this?
Thanks.
 
Divide it into tow parts in your EXTRA.css (something like that):

PHP:
.UserOnline, .UserOnlineInvisible
{
background: green url('@imagePath/xenforo/gradients/category-23px-light.png') repeat-x top;
... all the other CSS...
}

PHP:
.UserOffline
{
background: red url('@imagePath/xenforo/gradients/category-23px-light.png') repeat-x top;
... all the other CSS...
}
 
Divide it into tow parts in your EXTRA.css (something like that):

PHP:
.UserOnline, .UserOnlineInvisible
{
background: green url('@imagePath/xenforo/gradients/category-23px-light.png') repeat-x top;
... all the other CSS...
}

PHP:
.UserOffline
{
background: red url('@imagePath/xenforo/gradients/category-23px-light.png') repeat-x top;
... all the other CSS...
}

danke hast mir sehr geholfen habe es jetzt hinbekommen.
die schrift habe ich noch schwarz gemacht .
sieht auch richtig gut aus.

thank you helped me a lot, it was hammer out now.
I still have the writing done black.
looks really good.

Translate by google :)
 
I want to add these as ranks and then that green dot for online. Anyways, I want to have colors changeable so like purple ribbon that says admin, green for moderator, etc. Is there a way to do this?
Thanks.
Bumping my comment?
 
This appears to have quit working for me after the 1.0.3 update. Even uninstalled and re-installed the add-on and template edits.

Update:

On my dev site, which is a fresh 1.0.3 install, it works fine.

But on my production site, which is a 1.0.3 upgrade, it installs fine, but shows everyone as offline. Uninstalling, reinstalling show no effect, and no errors are thrown. Worked fine before the upgrade.
 
I personally would prefer something far more subtle, such as the green dot I proposed a while ago.
That's easily done using css though.

However, here's an alternative location for the ribbon which doesn't require any additional space and doesn't overlap the avatar, user name or title.

View attachment 6157

I have been trying to make mine like this but so far I have been full of fail.... :( Brogan you did this with the add-on installed right? If so what "Display Location" do you have picked?
 
I only installed it for testing and haven't had it installed for months now.

I don't remember too much about it to be honest.
 
Example:

example.webp

  • Add in EXTRA.css template:
Code:
.UserOnline
    {
        font-weight: bold;
        font-size: 10px;
        color: @contentBackground;
        background: #5791BA url('@imagePath/xenforo/gradients/category-23px-light.png') repeat-x top;
        padding: 1px 5px;
        margin: -5px -5px 5px 5px;
        border: 1px solid #5791BA;
        border-radius: 3px;
        border-top-right-radius: 0px;
        display: block;
        float: right;
        position: relative;
        box-shadow: 1px 1px 3px rgba(0,0,0, 0.25);

        margin-left: -{xen:calc '@content.padding-right + 5'}px;
    }

        .UserOnline span
        {
            background-color: #5791BA;
            border-top-right-radius: 3px;
            position: absolute;
            top: -4px;
            right: -1px;
            width: 5px;
            height: 4px;
        }

.UserOffline
    {
        font-weight: bold;
        font-size: 10px;
        color: @contentBackground;
        background: #5791BA url('@imagePath/xenforo/gradients/category-23px-light.png') repeat-x top;
        padding: 1px 5px;
        margin: -5px -5px 5px 5px;
        border: 1px solid #5791BA;
        border-radius: 3px;
        border-top-right-radius: 0px;
        display: block;
        float: right;
        position: relative;
        box-shadow: 1px 1px 3px rgba(0,0,0, 0.25);
        opacity: 0.5;
        filter: alpha(opacity='50');

        margin-left: -{xen:calc '@content.padding-right + 5'}px;
    }

        .UserOffline span
        {
            background-color: #5791BA;
            border-top-right-radius: 3px;
            position: absolute;
            top: -4px;
            right: -1px;
            width: 5px;
            height: 4px;
        }

.UserOnlineInvisible {
        font-weight: bold;
        font-size: 10px;
        color: @contentBackground;
        background: #f4a135 url('@imagePath/xenforo/gradients/category-23px-light.png') repeat-x top;
        padding: 1px 5px;
        margin: -5px -5px 5px 5px;
        border: 1px solid #f4a135;
        border-radius: 3px;
        border-top-right-radius: 0px;
        display: block;
        float: right;
        position: relative;
        box-shadow: 1px 1px 3px rgba(0,0,0, 0.25);

        margin-left: -{xen:calc '@content.padding-right + 5'}px;
    }

        .UserOnlineInvisible span
        {
            background-color: #f4a135;
            border-top-right-radius: 3px;
            position: absolute;
            top: -4px;
            right: -1px;
            width: 5px;
            height: 4px;
        }
 
Example:

View attachment 16887

  • Add in EXTRA.css template:
Code:
.UserOnline

    {
        font-weight: bold;
        font-size: 10px;
        color: @contentBackground;
        background: #5791BA url('@imagePath/xenforo/gradients/category-23px-light.png') repeat-x top;
        padding: 1px 5px;
        margin: -5px -5px 5px 5px;
        border: 1px solid #5791BA;
        border-radius: 3px;
        border-top-right-radius: 0px;
        display: block;
        float: right;
        position: relative;
        box-shadow: 1px 1px 3px rgba(0,0,0, 0.25);

        margin-left: -{xen:calc '@content.padding-right + 5'}px;
    }

        .UserOnline span
        {
            background-color: #5791BA;
            border-top-right-radius: 3px;
            position: absolute;
            top: -4px;
            right: -1px;
            width: 5px;
            height: 4px;
        }

.UserOffline
    {
        font-weight: bold;
        font-size: 10px;
        color: @contentBackground;
        background: #5791BA url('@imagePath/xenforo/gradients/category-23px-light.png') repeat-x top;
        padding: 1px 5px;
        margin: -5px -5px 5px 5px;
        border: 1px solid #5791BA;
        border-radius: 3px;
        border-top-right-radius: 0px;
        display: block;
        float: right;
        position: relative;
        box-shadow: 1px 1px 3px rgba(0,0,0, 0.25);
        opacity: 0.5;
        filter: alpha(opacity='50');

        margin-left: -{xen:calc '@content.padding-right + 5'}px;
    }

        .UserOffline span
        {
            background-color: #5791BA;
            border-top-right-radius: 3px;
            position: absolute;
            top: -4px;
            right: -1px;
            width: 5px;
            height: 4px;
        }

.UserOnlineInvisible {
        font-weight: bold;
        font-size: 10px;
        color: @contentBackground;
        background: #f4a135 url('@imagePath/xenforo/gradients/category-23px-light.png') repeat-x top;
        padding: 1px 5px;
        margin: -5px -5px 5px 5px;
        border: 1px solid #f4a135;
        border-radius: 3px;
        border-top-right-radius: 0px;
        display: block;
        float: right;
        position: relative;
        box-shadow: 1px 1px 3px rgba(0,0,0, 0.25);

        margin-left: -{xen:calc '@content.padding-right + 5'}px;
    }

        .UserOnlineInvisible span
        {
            background-color: #f4a135;
            border-top-right-radius: 3px;
            position: absolute;
            top: -4px;
            right: -1px;
            width: 5px;
            height: 4px;
        }
I think you should swap the offline and invisible ones. Invisible ones = half opacity!
 
Online.webpOffline.webpInvisible.webp
  • In EXTRA.css, add this:
Code:
.messageUserBlock h3.userText {
text-align: center;
@property "messageUserText";
padding: 0px;
@property "/messageUserText";
}

.UserOnline
    {
display: block;
margin-left: -5px;
margin-top: -7px;
width: 132px;
height: 34px;
background: transparent url('@imagePath/xenforo/misc/online.png') no-repeat !important;
        }

.UserOffline
    {
display: block;
margin-left: -5px;
margin-top: -7px;
width: 132px;
height: 34px;
background: transparent url('@imagePath/xenforo/misc/offline.png') no-repeat !important;
        }

.UserOnlineInvisible
    {
display: block;
margin-left: -5px;
margin-top: -7px;
width: 132px;
height: 34px;
background: transparent url('@imagePath/xenforo/misc/invisible.png') no-repeat !important;
        }
  • In message_user_online template, replace:
Code:
<span class="{$userStatus.class}"><span></span>{$userStatus.text}</span>
By
Code:
<span class="{$userStatus.class}"></span>

  • Upload "online.png", "offline.png", and "invisible.png" in "../xenforo/misc/" file to your style (create it if no existe)
invisible.webp offline.webp online.webp
 
Wow. That's smexy man, too bad they won't work with the rank ribbons I already have going on my site :(
 
Top Bottom