@Malkavian Grin Coming in strong with the styling. This was not something i was up to doing at midnight when my hyperfocus ran its course.
@CharmingSatyr (every time i see your icon i do a doubletake because i use that as my icon in so many places)
The tutorial would actually be pretty easy - if someone wanted to do this now before the plug and play button eventually (hopefully) goes in, you could just copy the base code which i'll post at the end. However, if you want to know how it works its not too hard. In fact, this used to be my full-time job.
To start with you need this;
<div style="border:2px solid #666;width:100%;max-height:40px;border-radius:3px;padding:2px;"> <div class="miniBar"> <div class="miniBarProgress" style="height:20px;width:43%;background-color:#0da271;text-align:right;"> <strong><span style="color:#bdc3c7;">43%</span> </strong> </div> </div> </div>
And get this.
<div style="border:2px solid #666;width:100%;max-height:40px;border-radius:3px;padding:2px;">
To explain this are the steps you're looking at;
• border. The first 2px is the width of the border, its weight. (#666 is the colour of the border).
• width needs to be 100% so it fills whatever its a part of, in this case its full-width of the screen so it doesn't break mobile.
• max-height which is the height of the box. You can make this shorter or taller to fix what you need.
• border-radius is how curved the corners are and the padding is the spacing around it.
Example; To show the differences, i've changed the border to 6, with a red (#c11b0e) colour. I have to leave the Width alone. I shortened the box with max-height to 20, and made it super curved with the border-radius changed to 8. As you can see the actual bar part of it is broken now because the container is shorter, we'll change that in the next bit.
<div style="border:6px solid #c11b0e;width:100%;max-height:20px;border-radius:8px;padding:2px;">
That will cause the entire thing to look like this:
To change the green bar itself, you need to move to the next line in the code, which is the 'minibar' you need to look at this part of the code;
<div class="miniBar"> <div class="miniBarProgress" style="height:20px;width:43%;background-color:#0da271;text-align:right;"> <strong><span style="color:#bdc3c7;">43%</span> </strong> </div>
On the miniBarProgress line you have....
• height which is 20 (but we changed the max height to 20 so its much too large to fit)
• width here is how far along the bar is out of 100%.
• background colour which is that green (#0da271)
• text-align:right is whether you want the text within the bar to align left, middle or right.
The next line controls the text that sits on the bar, which is very simple but can be styled more than this.
• colour decides the colour of the text, in this line <strong> is just making the text bold so its easier to see.
So we're going to fix the bar we broke earlier. Because we made the max-height of the border 20, and the height of the bar is 20 already we have to change that, changing the height to 5 makes the bar fit within the (now ridiculous for example purposes) border of the bar.
In the interest of showing how everything works, we'll also change the percentage of the bar, so we will change the width of the miniBarProcess to 87% and the colour of the bar itself by changing color from #0da27 to #a2530d
However its much too short for the text to fit, we COULD change the size of the text but honestly it would have to be much too small to show up so we'll delete it entirely.
The bar code, the abomination that it is, should look like this;
<div style="border:6px solid #c11b0e;width:100%;max-height:20px;border-radius:8px;padding:2px;"> <div class="miniBar"> <div class="miniBarProgress" style="height:5px;width:87%;background-color:#a2530d;text-align:right;"> </div> </div> </div>
So that is how you change all the major parts of the bar.
Is you want to follow the additional styling what you need to do is add background images to the bar instead of colours.
So the new code with the styling will look like this
<div style="border:2px solid #666;width:100%;max-height:40px;border-radius:3px;padding:2px;"> <div class="miniBar"> <div class="miniBarProgress" style="height:20px;width:60%;text-align:right;background-image:url("https://t3.ftcdn.net/jpg/02/89/42/70/360_F_289427042_Q4tqOQpUQs0REeZJdnJra8QUbEpL9TNQ.jpg");"> <strong><span style="color:#bdc3c7;">60% Health</span> </strong> </div> </div> </div>
Which, once again, looks like this;
Most of the things here are the same, except now you have the addition of
background-image:url you can use this addition to add a texture to the back of the bar. Everything else will be the same, you can use pretty much any image for this.
Lastly is pushing it into the middle of the post. Do to that you need to wrap the entire code in this code
<div style="float:right;width:78%;margin-bottom:10px;"> </div>
Which all seems very complicated but really its not, and you can just play with numbers until you get what you want. If something breaks, you just Crtl+Z (or better yet, just keep the base code in a notepad.)
The final code will look like this;
Base 100% width
<div style="border:2px solid #666;width:100%;max-height:40px;border-radius:3px;padding:2px;"> <div class="miniBar"> <div class="miniBarProgress" style="height:20px;width:60%;text-align:right;background-image:url("https://t3.ftcdn.net/jpg/02/89/42/70/360_F_289427042_Q4tqOQpUQs0REeZJdnJra8QUbEpL9TNQ.jpg");"> <strong><span style="color:#bdc3c7;">60% Health</span> </strong> </div> </div>
Next to floated images
<div style="float:right;width:78%;margin-bottom:10px;"> <div style="border:2px solid #666;width:100%;max-height:40px;border-radius:3px;padding:2px;"> <div class="miniBar"> <div class="miniBarProgress" style="height:20px;width:60%;text-align:right;background-image:url("https://t3.ftcdn.net/jpg/02/89/42/70/360_F_289427042_Q4tqOQpUQs0REeZJdnJra8QUbEpL9TNQ.jpg");"> <strong><span style="color:#bdc3c7;">60% Health</span> </strong> </div> </div> </div>