Assistance with Health Bar

[Water Crystals]

I've been playing around with some codes for a health bar and am having trouble. The intention is to insert a simple bbcode into a post to show health (used for Pokemon battles).
Here's what I've put together:

[div align="center"][div style="width:100px;height:20px;border:2px solid #000000;background-color:#0b0;"][font size="3"][b]100/100[/b][/font][/div][/div]

Which becomes this: 

100/100

My issue is if I change it to say 30/100 of health and adjust the width of colour the text doesn't stay where it is. I know why, but I can't figure out how to fix it. I've tried a few variations (I got the base code from this site: dungeons-n-darknuts.proboards.com/thread/202/bbcode-tutorial-advanced - scroll to reveal spoiler for "Health Bar (collective)"), but I always end up with a mess of extra boxes and badly-aligned text. I basically want to be able to change the colour width (for decreased health) without moving the text. Or some variation of that to achieve the result I want: coloured, bordered health bar with text over it.

An alternative could be this, but I've no idea how to turn into something for use on Proboards: code.jfbs.net/index.php?showtopic=32 
And I don't know if it changes colour only on those set % or if say anything above 75% would be also green. So if I set the value as 81% it's green, but if it's 62% it's yellow etc.

I can edit codes, but creating them is a bit beyond my skillset. Either option above is fine, I just need help getting it work. And again, this is something to be used in posts only.

[adminabp]

Nov 6, 2017 20:45:10 GMT -8 Water Crystals said:

I've been playing around with some codes for a health bar and am having trouble. The intention is to insert a simple bbcode into a post to show health (used for Pokemon battles).
Here's what I've put together:

[div align="center"][div style="width:100px;height:20px;border:2px solid #000000;background-color:#0b0;"][font size="3"][b]100/100[/b][/font][/div][/div]

Which becomes this: 

100/100

My issue is if I change it to say 30/100 of health and adjust the width of colour the text doesn't stay where it is. I know why, but I can't figure out how to fix it. I've tried a few variations (I got the base code from this site: dungeons-n-darknuts.proboards.com/thread/202/bbcode-tutorial-advanced - scroll to reveal spoiler for "Health Bar (collective)"), but I always end up with a mess of extra boxes and badly-aligned text. I basically want to be able to change the colour width (for decreased health) without moving the text. Or some variation of that to achieve the result I want: coloured, bordered health bar with text over it.

An alternative could be this, but I've no idea how to turn into something for use on Proboards: code.jfbs.net/index.php?showtopic=32 
And I don't know if it changes colour only on those set % or if say anything above 75% would be also green. So if I set the value as 81% it's green, but if it's 62% it's yellow etc.

I can edit codes, but creating them is a bit beyond my skillset. Either option above is fine, I just need help getting it work. And again, this is something to be used in posts only.

I'd suggest something simple, like using a zero.

[div align="center"][div style="width:100px;height:20px;border:2px solid #000000;background:linear-gradient(to left, #008000 50%, #008000 50%);"][font size="3"][b]100/100[/b][/font][/div][/div]

100/100

[div align="center"][div style="width:100px;height:20px;border:2px solid #000000;background:linear-gradient(to left, #FF0000 50%, #008000 50%);"][font size="3"][b]050/100[/b][/font][/div][/div]

050/100

[div align="center"][div style="width:100px;height:20px;border:2px solid #000000;background:linear-gradient(to left, #FF0000 30%, #008000 70%);"][font size="3"][b]030/100[/b][/font][/div][/div]

030/100

[Water Crystals]

These look really cool, especially the last one. However, the text length has no impact on the rest of it so I'm unsure how adding a zero helps. Ideally, I only want to use green; the bar itself will get shorter as HP gets lower, which is why (I'm guessing) I have issues getting the text to stay when the image behind it gets small. Here's an example:


[div align="center"][div style="width:20px;height:20px;border:2px solid #000000;background-color:#0b0;"][font size="3"][b]20/100[/b][/font][/div][/div]
The issue:

20/100

Is there some way to fix this to be way I want it? How the code is now is super easy for me to edit, and teach to my staff as we just change the text and width. If only the text would stay where it is. If it helps, there will always be a bar. Such as, at least 1 HP. When health reaches 0 there's no need to show a health bar as the Pokemon is finished.

[adminabp]

Nov 7, 2017 20:35:17 GMT -8 Water Crystals said:

These look really cool, especially the last one. However, the text length has no impact on the rest of it so I'm unsure how adding a zero helps. Ideally, I only want to use green; the bar itself will get shorter as HP gets lower, which is why (I'm guessing) I have issues getting the text to stay when the image behind it gets small. Here's an example:


[div align="center"][div style="width:20px;height:20px;border:2px solid #000000;background-color:#0b0;"][font size="3"][b]20/100[/b][/font][/div][/div]
The issue:

20/100

Is there some way to fix this to be way I want it? How the code is now is super easy for me to edit, and teach to my staff as we just change the text and width. If only the text would stay where it is. If it helps, there will always be a bar. Such as, at least 1 HP. When health reaches 0 there's no need to show a health bar as the Pokemon is finished.

Tried this...

[div align="center"][div style="background-color:#0b0;height:20px;width:20px;"][div style="width:100px;height:20px;border:2px solid #000000;"][font size="3"][b]20/100[/b][/font]
[/div][/div][/div]

which produced that...

20/100

so I added a couple of extra pixels to fill the gap caused by the div...

[div align="center"][div style="background-color:#0b0;height:22px;width:20px;"][div style="width:100px;height:20px;border:2px solid #000000;"][font size="3"][b]20/100[/b][/font]
[/div][/div][/div]

and got this...

20/100

But that throws off the centering, which brought me to this...

[div style="width:100px;margin:0 auto;border:2px solid #000000;"][div style="background-color:#0b0;height:20px;width:20px;"][div style="width:100px;height:20px;text-align:center;"][font size="3"][b]20/100[/b][/font][/div][/div][/div]

Which renders as...

1/100

20/100

50/100

100/100

Is that more what you are looking for?

[Water Crystals]

Yes, that will work wonderfully! The centering isn't always center though. I have a thread I test these on, and this one goes further to the right, and if I put a second below it (generally two of these will be in each post, as it's two Pokemon battling) and it went even further right?

[adminabp]

I was working on a solution to the centering...check my edit.

[Water Crystals]

Awesome! I appreciate the details and fast response. I'm excited to use this in my RPG. Thank you so much for helping me with this

[adminabp]

Water Crystals

I made one final edit to my post above.

I figured out what was throwing off everything by a couple of pixels. After some of the changes I made, I needed to attached the border to a different division.

That last edit will hopefully fix everything. I tried it on four different levels and they all look good to me.

Glad to help. You are very welcome.

[Water Crystals]

Thank you!!