Implemented Online Status Indicator / move outside of Avatar-image

Status
Not open for further replies.

erich37

Well-known member
The position of the "green dot" inside the Avatar is not great, as it destroys the appearance of the Avatar-image.
Depending on the Avatar-image, the "Online Status Indicator" is also hardly visible.

The "Online Status Indicator" should be positioned somewhere outside of the Avatar-image.



onlinenow.webp
 
Upvote 24
This suggestion has been implemented. Votes are no longer accepted.
2. It'll literally take you 10 seconds to make the adjustments and place it to your preferred location

That's pretty indicative of the assumption made by most of the forum packages available now, that admins know how to code. I may be able to figure it from Shelley's screenshot but I wouldn't have had a clue otherwise.
 
That's pretty indicative of the assumption made by most of the forum packages available now, that admins know how to code. I may be able to figure it from Shelley's screenshot but I wouldn't have had a clue otherwise.

Adjusting a couple of values isn't exactly rocket science. If people can install xenforo, they can adjust values top: and right: and move it to a preferred location. :)
 
I liked the indicator on the right side in mobile view personally :), easy fix so it may be my default location.
 
Adjusting a couple of values isn't exactly rocket science. If people can install xenforo, they can adjust values top: and right: and move it to a preferred location. :)

No it isn't rocket science but I wouldn't be able to do it without instruction - wouldn't even know where to look. Installing XF is a different thing all together. Intuitive plus backed by comprehensive instructions.

There's likely things in life I find ultra simple to do that you may struggle with.
 
Plenty of instruction will be provided, no matter what you want to do.
So there's no need to be concerned with regards to that.
 
No one would ever expect you to just go out and do that on your own. Either a designer such as Shelley would release a guide as to how to do it, or you'd be more than welcome to post in the Styling and Customisations forum asking how.

You'd get help one way or another.

EDIT: Damn you Broganinja!
 
Biggest thing folks are forgetting: Resource Manager :D, I'm sure they'll be plenty of modifications in there for it.
 
No it isn't rocket science but I wouldn't be able to do it without instruction - wouldn't even know where to look. Installing XF is a different thing all together. Intuitive plus backed by comprehensive instructions.

There's likely things in life I find ultra simple to do that you may struggle with.

There's plenty of documentation/guides with regards to css, plus plenty of examples. Also, If/when I release anything such as this I always provide the css (documentation to implement it) so anyone having issues wouldn't have an issue. Infact, anyone posting changes such as this provide the tutorial along with anything else need to get it up and working. :)

I don't think I know of anyone person that would post an image and not the css (pending css is required). This is what makes the support here unrivaled I just didn't think I had to say it in so many words but looks like I did. :)
 
Plenty of instruction will be provided, no matter what you want to do.
So there's no need to be concerned with regards to that.

No one would ever expect you to just go out and do that on your own. Either a designer such as Shelley would release a guide as to how to do it, or you'd be more than welcome to post in the Styling and Customisations forum asking how.

You'd get help one way or another.

EDIT: Damn you Broganinja!

That's genuinely the reason why I chose XF! I'm just addressing the points made about simplicity as frankly it can be intimidating to some folk.
 
Well to move the indicator from where it is now to outside the avatar is as simple as adding this to EXTRA.css:

Code:
.messageUserBlock div.avatarHolder .onlineMarker
{
    top: 2px;
    right: 2px;
}
 
Adjusting a couple of values isn't exactly rocket science. If people can install xenforo, they can adjust values top: and right: and move it to a preferred location. :)

Well to move the indicator from where it is now to outside the avatar is as simple as adding this to EXTRA.css:

Code:
.messageUserBlock div.avatarHolder .onlineMarker
{
    top: 2px;
    right: 2px;
}

:)
 
Thanks - I'll be going for a Online or Offline ribbon like your Staff Member one. My 'older' demographic will prefer that.

I'll be sure to be looking for an add-on for that or asking for help.
 
Thanks - I'll be going for a Online or Offline ribbon like your Staff Member one. My 'older' demographic will prefer that.

I'll be sure to be looking for an add-on for that or asking for help.

That'll involve changing the background-colour >> background and most likely adjusting the top and right property values. That said, you may have trouble with the ribbon design on responsive since the layout changes so the placement problem may be an issue.
 
Something to ponder - thanks. Got some bigger fish to fry customisation wise but will be coming back to this. It's the little things the members notice!
 
Thanks - I'll be going for a Online or Offline ribbon like your Staff Member one. My 'older' demographic will prefer that.

I'll be sure to be looking for an add-on for that or asking for help.

Just did some testing. You might have an issue with the arrow on the messageuserinfo container if you planned on hanging the ribbon from there though a specialised design (or scaling the image smaller could get around this imo.
Screenshot_8.webp

Although, hanging it from the avatar point doesn't seem to pose any issues (though it will need some tinkering in responsive) but I'm also confident that ribbon could be made smaller to get around a few issues.
Screenshot_9.webp

And finally, responsive (as expected) but i knew there would be issues there, but nothing I think can't be fixed easily. Just letting you know what to expect if your trying this yourself.

Screenshot_10.webp
 
And finally, responsive (as expected) but i knew there would be issues there, but nothing I think can't be fixed easily. Just letting you know what to expect if your trying this yourself.

screenshot_10-png.79346
Looks to me like an improvement over @Brogan's avatar.
 
You can use a media query to change the image and/or position once the screen drops below a certain width.

So easily resolved.
 
Status
Not open for further replies.
Top Bottom