This is something I am messing with for my own use, but it may be useful to others.
The default Prosilver "user online" indicator suffers from two issues:
To mimic the default Prosilver arrangement (which, in this case, I actually quite like) requires a bit of trickery, but nothing too outrageous.
The markup is just a span (or whatever) like this:Putting it just before .inner makes the most sense, because it will be readable for unsighted users just before the username, and because it allows you to use position: relative; on children of .inner (in case you need to) without that screwing things up.
The CSS for the Prosilver look goes like this (change colours to suit the style):This is for a style that has root tag font-size set to 62.%%, so .1rem = 1px. The default code there allows plenty of room for the English {L_ONLINE} text. The commented code under /* Conectado - es */ is for a longer banner that allows room for the Spanish {L_ONLINE} text (which seems to be the longest out of the dozen or so languages I checked). The banners have been checked for accuracy of positioning up to 200% font size.
The font as shown in both images is Roboto. Obviously you can apply any font styling you like: uppercase, small caps, italic, whatever. Do note that because this trick relies on clip-path to create the polygon you cannot use a top and bottom border. If you want to emulate those, one easy way is to use inset box-shadow with zero blur radius. Another way would be to use a linear-gradient, like this...
The default Prosilver "user online" indicator suffers from two issues:
- It's not at all accessible. Since it is only a background image it is invisible to screen readers, and there is no other labelling of online status anywhere.
- It requires a different image (and a different folder and a different CSS file) for every language you want to support. This is a nuisance if you don't like making new images and writing new CSS.
To mimic the default Prosilver arrangement (which, in this case, I actually quite like) requires a bit of trickery, but nothing too outrageous.
The markup is just a span (or whatever) like this:
Code:
<div id="p{postrow.POST_ID}" class="post has-profile <!-- IF postrow.S_UNREAD_POST --> unreadpost<!-- ENDIF --><!-- IF postrow.S_POST_REPORTED --> reported<!-- ENDIF --><!-- IF postrow.S_POST_DELETED --> deleted<!-- ENDIF --><!-- IF postrow.S_ONLINE and not postrow.S_POST_HIDDEN --> online<!-- ENDIF --><!-- IF postrow.POSTER_WARNINGS --> warned<!-- ENDIF -->"><!-- IF postrow.S_ONLINE and not postrow.S_POST_HIDDEN --><span class="user_online">{L_ONLINE}</span><!-- ENDIF --><div class="inner">The CSS for the Prosilver look goes like this (change colours to suit the style):
Code:
/*------------------*//*Online indicator.*//*------------------*/.user_online {pointer-events: none;position: absolute;/*Online - en*/top: 5.0rem;left: -1.4rem;width: 9rem;/*Conectado - es*//*top: 6.4rem;width: 11rem;/*----------*/background: #fff7;font-size: 1.3rem;line-height: 1.9rem;text-align: center;text-transform: uppercase;clip-path: polygon(1.9rem 0, calc(100% - 1.9rem) 0, 100% 100%, 0 100%);box-shadow: inset 0 1px 0 #0007, inset 0 -1px 0 #0007;transform: rotate(-45deg);transform-origin: top left;}The font as shown in both images is Roboto. Obviously you can apply any font styling you like: uppercase, small caps, italic, whatever. Do note that because this trick relies on clip-path to create the polygon you cannot use a top and bottom border. If you want to emulate those, one easy way is to use inset box-shadow with zero blur radius. Another way would be to use a linear-gradient, like this...
Code:
.user_online {background: linear-gradient(#0007 .1rem, #fff7 .1rem, #fff7 1.8rem, #0007 1.8rem);Statistics: Posted by Gumboots — Sun Sep 08, 2024 2:52 am