.UserOffline (Online Status Indicator) [Code]

BioRage

Member
Hello, I'm not the greatest at coding, so I'm seeking some help please;

If your familiar with Online Status Indicator

What I'm trying to do is simply change the background for .UserOnline to have a green background, and .UserOffline to have a red background.

This is the current code.. I was thinking maybe it would be (below) however it didn't work to well

Code:
    .UserOnline, .UserOffline, .UserOnlineInvisible
    {
        font-weight: bold;
        font-size: 10px;
        color: @contentBackground;
        background: @primaryLight url('@imagePath/xenforo/gradients/category-23px-light.png') repeat-x top;
        padding: 1px 5px;
        margin: -5px -5px 5px 5px;
        border: 1px solid @primaryLight;
        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, .UserOffline span, .UserOnlineInvisible span
        {
            background-color: @primaryLight;
            border-top-right-radius: 3px;
            position: absolute;
            top: -4px;
            right: -1px;
            width: 5px;
            height: 4px;
        }

For Both offline + online, but I'll do offline for an example
Code:
    .UserOffline
    {
        font-weight: bold;
        font-size: 10px;
        color: @contentBackground;
        background: @red url('@imagePath/xenforo/gradients/category-23px-light.png') repeat-x top;
        padding: 1px 5px;
        margin: -5px -5px 5px 5px;
        border: 1px solid @primaryLight;
        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;
    }

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

Is there something I'm missing?

This is what I'm trying to end up with:
Untitled.webp Untitled.webp

Thanks,
 
Don't use @red. Just use red.

Okay, so this should work than?
Code:
    .UserOnline, .UserOnlineInvisible
    {
        font-weight: bold;
        font-size: 10px;
        color: @contentBackground;
        background: green url('@imagePath/xenforo/gradients/category-23px-light.png') repeat-x top;
        padding: 1px 5px;
        margin: -5px -5px 5px 5px;
        border: 1px solid @primaryLight;
        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, .UserOnlineInvisible span
        {
            background-color: green;
            border-top-right-radius: 3px;
            position: absolute;
            top: -4px;
            right: -1px;
            width: 5px;
            height: 4px;
        }
<!-- Offline -->
    .UserOffline
    {
        font-weight: bold;
        font-size: 10px;
        color: @contentBackground;
        background: red url('@imagePath/xenforo/gradients/category-23px-light.png') repeat-x top;
        padding: 1px 5px;
        margin: -5px -5px 5px 5px;
        border: 1px solid @primaryLight;
        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;
    }

        .UserOffline span
        {
            background-color: red;
            border-top-right-radius: 3px;
            position: absolute;
            top: -4px;
            right: -1px;
            width: 5px;
            height: 4px;
        }
 
Since i am also using this again to indicate who´s online and who´s not, i would like to restrict the display of Online Status Ribbons for Guests and some Groups i added. Is there any way?

For template modifications like that you can surround the ribbon code with this conditional:

Code:
<xen:if is="{$visitor.user_id}">

</xen:if>

That will make it so the code inside is only shown for users who are logged in (excludes guests).
 
Hi Jake. Many Thanks.
Is there an Error in the Indicator Addon? I was online but the Ribbon shows offline?. Maybe anyone knows about it?
 
Top Bottom