I was just messing with this again and I thought of something I should have thought of before.
The catch with the old code was that positioning the span accurately was a tricky, due to using
The clever way is to use two spans, both
The inner span gets
The markup is essentially the same as before, apart from the extra child span inside
The CSS simplifies to this:Which may not look simpler, but actually is simpler when it comes to setting things up. To make the gizmo fit English with this font-size, line-height, etc, use
If you want a different font-size or whatever just pick what suits you and then change the width of
The catch with the old code was that positioning the span accurately was a tricky, due to using
transform-origin: top left; and a CSS polygon. These both turned out to be very stupid ideas, which is something I excel at on occasion. There's a much easier and more versatile way of doing it, at the cost of a little more markup. All positioning problems are solved automatically, and there's no need to frig around with CSS for polygons either.The clever way is to use two spans, both
position: absolute; with one nested inside the other. The outer span gets aspect-ratio: 1/1; overflow: hidden;. This is much easier to deal with, because instead of trying to fit the original rotated span accurately against the sides of your .post container, you just set the new outer span to top: 0; left: 0;.The inner span gets
left: 0; bottom: 0; width: 141.4%; transform-origin: 0 100%;. This means that its length always equals the diagonal of the outer span and, since it pivots around its bottom left corner, everything else sorts itself out too. All you need to do is decide on your font-size, and then set the width or height (you only need one) of the outer span to whatever fits the text nicely.The markup is essentially the same as before, apart from the extra child span inside
span.user_online: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"><span>{L_ONLINE}</span></span><!-- ENDIF -->Code:
.post.has-profile.online:not(.hidden) {& .user_online {/* -------------- *//* Do not edit *//* this stuff! */pointer-events: none;position: absolute;top: 0;left: 0;aspect-ratio: 1/1;overflow: hidden;/* -------------- *//* Adjust width *//* to suit here! *//* Online - en */width: 5.6rem;/* Conectado - es *//*width: 7.6rem;/* -------------- */& span {/* -------------- *//* Do not edit *//* this stuff! */position: absolute;bottom: 0;left: 0;width: 141.4%;text-align: center;transform: rotate(-45deg);transform-origin: 0 100%;/* -------------- *//* Do your eye *//* candy here! */height: 1.7rem;background: var(--groovebot);font-size: 1.2rem;line-height: 1.4rem;text-transform: uppercase;border: solid var(--darkerbor);border-width: .1rem 0;}}}.user_online {width: 5.6rem;} and for Spanish use .user_online {width: 7.6rem;}. No other changes are necessary.If you want a different font-size or whatever just pick what suits you and then change the width of
.user_online until it looks good. Easy.Statistics: Posted by Gumboots — Sun Mar 23, 2025 1:57 pm