Show user is online

[raytrails]

Installed, but appears way to high. How to fix this? Tried to adjust some of the values, but it just pushed everything further down..

 

[JacquiiDesigns]

Thanks so much for the sharing

J.

 

[CyberAP]

Installed, but appears way to high. How to fix this? Tried to adjust some of the values, but it just pushed everything further down..

View attachment 17721

Change the position in the options.

 

[Pope Viper]

Someone made mention earlier of wrapping the avatar with a color border indicating status. Is this possible, or beyond the scope of this modification?

 

[Sylar]

Someone made mention earlier of wrapping the avatar with a color border indicating status. Is this possible, or beyond the scope of this modification?

That would actually be cool to see!

 

[Pope Viper]

Not sure how that would reflect user online/offline status?

 

[Vilandra]

Sorry I thought you just wanted to show a different color per usergroup. Totally misunderstood what you were asking. My bad Removing the post lol

 

[Pope Viper]

No problem, I actually wouldn't mind seeing that info again, as it would help me regardless.

Thank you!

* Edit - Disregard, I found it!

 

[CyberAP]

Someone made mention earlier of wrapping the avatar with a color border indicating status. Is this possible, or beyond the scope of this modification?

Nope. You could reply to the original addon thread and ask for that. It is easy to do really.

 

[Pope Viper]

Unfortunately, it's currently beyond my abilities to do, so I'm dependent on the smart people.

 

[Floris]

Someone made mention earlier of wrapping the avatar with a color border indicating status. Is this possible, or beyond the scope of this modification?

yes
edit the template, use the var for the is online, and if so, color exception, else normal color.

 

[DRE]

Example:

View attachment 16887

• Add in EXTRA.css template:

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

Doesn't work.

 

[Paul B]

You need to install the add on first: http://xenforo.com/community/threads/online-status-indicator-within-threads.8813/

 

[Allan]

You need to install the add on first: http://xenforo.com/community/threads/online-status-indicator-within-threads.8813/

Correct.

 

[Martyn]

is it possible to make the blue area turn green when online? i think something that stands out more would be better?

 

[DRE]

You need to install the add on first: http://xenforo.com/community/threads/online-status-indicator-within-threads.8813/

I did and nothing happened.

 

[thunderup]

View attachment 6288​

Choose the style you want and you're ready to go!

What you need to do:

1. Download User Online Indicator
2. Download instructions.txt
3. Open Instructions.txt and follow them!

Thanks to Arik for making this hack!

What do I need to do to align the text "Online" to the right on the long ribbon?

 

[Smashbox]

A little coloring for your enjoyment.

Invisible = pink/purpleish

    .UserOnline
    {
        font-weight: bold;
        font-size: 10px;
        color: #ffffff;
        background: #66cc00;
        padding: 1px 5px;
        margin: -5px -5px 5px 5px;
        border: 1px solid #006600;
        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
    {
        font-weight: bold;
        font-size: 10px;
        color: #ffffff;
        background: #ff3333;
        padding: 1px 5px;
        margin: -5px -5px 5px 5px;
        border: 1px solid #993333;
        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
    {
        font-weight: bold;
        font-size: 10px;
        color: #ffffff;
        background: #ff66ff;
        padding: 1px 5px;
        margin: -5px -5px 5px 5px;
        border: 1px solid #990066;
        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: #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;
        }

 

[AndreaMarucci]

Beautiful!

 

[Allan]

A little coloring for your enjoyment.

    .UserOnline
    {
        font-weight: bold;
        font-size: 10px;
        color: #ffffff;
        background: #66cc00;
        padding: 1px 5px;
        margin: -5px -5px 5px 5px;
        border: 1px solid #006600;
        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
    {
        font-weight: bold;
        font-size: 10px;
        color: #ffffff;
        background: #ff3333;
        padding: 1px 5px;
        margin: -5px -5px 5px 5px;
        border: 1px solid #993333;
        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
    {
        font-weight: bold;
        font-size: 10px;
        color: #ffffff;
        background: #ff66ff;
        padding: 1px 5px;
        margin: -5px -5px 5px 5px;
        border: 1px solid #990066;
        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: #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;
        }

do you have screen please ?