.UserOffline (Online Status Indicator) [Code]

[BioRage]

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

    .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

    .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:


Thanks,

 

[Jake Bunce]

Don't use @red. Just use red.

 

[BioRage]

Don't use @red. Just use red.

Okay, so this should work than?

    .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;
        }

 

[Jake Bunce]

It looks correct.

 

[BioRage]

It looks correct.

For some reason the offline shows like this... Would you happen to know why?

 

[Jake Bunce]

Remove that HTML comment. It doesn't belong in your style sheet:

<!-- Offline -->

 

[BioRage]

Remove that HTML comment. It doesn't belong in your style sheet:

<!-- Offline -->

Thank's so much!

 

[bogus]

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?

 

[Jake Bunce]

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:

<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).

 

[bogus]

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?