Take a look at Leare's stats. That is a hardcoded div. The true stats div is display:none

What I want is for the text that accompanies a progress bar to appear directly over that progress bar. Ideally, achievable by giving the text a slightly higher z-index than the .statbar. Functionally impossible because is not a selector in CSS. So I coded a whole new div identical to the real stats div and gave the string a selector so I could elevate the z-index.

This is suboptimal, becase I have to manually update all stats as they change. I considered writing something to reference the real stats data (and maybe progress bar percentages too, in an ideal world) but I have no idea how I'd achieve that.

TL;DR: I want the text strings to appear on top of the progress bars, like they do on the live page. I don't care how this is achieved as long as the stats don't have to be hardcoded.

Here's some code that moves the text strings on top of the progress bars:

li { position: relative; z-index: 2; } li .statbar { position: absolute; top: 0; left: 0; right: 0; height: 100%; z-index: -1; } li .statbar .stat { height: 100%; }

Just let me know if you'd like me to explain any part of this :) I hope this helps!

(Note - You'll have to tweak the spacing/alignments/colors/etc though, this is code JUST for changing the position of the text to how you want it)

Thank you so much! That works perfectly and is much simpler than anything I tried. I had no idea negative z-index was valid...I'll have to remember that.

I'm pretty new to HTML/CSS in general and have only ever used it to edit existing pages (mostly on petsites) so I've picked up some really weird hacks over the past couple of years. One of which is just slapping z-index: 99 on an element that won't layer how I want.

And on a personal note I'd like to say that I love NB. What a great idea for a pet!

Thank you! And I'm glad I could help!

If you want to dive into HTML/CSS and learn more in-depth, I highly recommend it - it's super fun :D I have a couple tutorials on making pet profiles here that you might find helpful: https://bug.bz/tuts/

Good luck! PS. Leare's treasure and artwork look amazing, and the profile is coming together really well imo. Love the personality in it! <3

I'll take a look through that tutorial now, actually, before I make even more a pig's ear of Leare's profile. And it is fun, on that point I agree! On another petsite, I started coding profiles (pure CSS, a site-enforced rule) for a small fee. They were joke/novelty profiles rather than the shiny-modern aesthetic, but I found myself doing them just because...I like doing them.

Good CSS is a form of art on its own. However, spending twenty minutes changing arbitrary values to fix a weird bug before realising I just neglected a semicolon is...not an experience analagous to my usual art media. (Or worse yet, one website I use has an embedded IDE that automatically closes tags as soon as I type them, so I have to delete the /close every time or the whole code breaks. There's no way to turn of autoclosure. It's a frustrating "feature".)

And thank you! I can't take full credit for Leare's profile - I inherited it in quite a state (I have the original code and a screenshot somewhere, for posterity). A part of me wants to recode it from scratch (that background image is not something I've had to work with before. It's very...limiting) but I also don't want to damage a decade-old legacy.

The art I also can't take credit for! I've just realised I hid the div the credit is in to test something and never restored it...I'll fix that now. But it was created by Doc-Roe , whom I think has taken a break from Subeta?

I'm hoping to get the profile into a state befitting its heritage (and maybe even the pet spotlight?? Would that be unfair because half the work was done when he was given to me?) and then create a matching template to use across his various scientists.

Oh, since you mentioned his treasures: I want to replace every treasure image with the same image on a transparent background (like I did with his minion). I'm hoping staff will be reasonable about it still being the same image, but have you ever seen this done before? Would I fall afoul of profile rules?

Hm... for your questions about what's allowed in the profile spotlight, I'm not entirely sure either. I would make a ticket to ask for a rule clarification. You can do that here: https://subeta.net/tickets.php?act=create&cat=35

I think I have seen people use custom treasure images before, but it can't hurt to ask about that in your ticket too just to double check.

And wow, I thought I was the only one bothered by the auto-complete feature on some editors lol! I have the same problem with that kind of thing and always end up with extra closing brackets since I don't always remember to delete the ones it adds automatically.

Also, joke/novelty profiles sounds incredible and you should definitely do some of those here if you come up with fun ideas!

That's a good idea, I've sent in a ticket to be sure.

I think what I'd really like to be able to do in HTML editors is select a body of text, and then click a button that allows me to type specific divs/opening tags, which then wraps the selected text in those tags so I don't have to go hunting for the correct ends to close them up again. Basically like the formatting buttons every BBCode forum has, but with custom input for the formatting.

I might give