Hollowness wrote: I am away from my computer this weekend/early week I'll have a look when I get home. :)
No worries, enjoy your weekend. :)
I want to be able to simplify it so any user can use it. E.g:
{{HealthBar | 320 | 512 }}
It should put those numbers directly into the calculation function in the code to produce the correct percentage of bar.
If you check out the first section of my sandbox (http://piratepower.wikia.com/wiki/User:LonePudding/Sandbox) you can see I've already styled it ,just need help making it user friendly. :)
With the example picture you provided I came up with this adapted from the original template (since I am not the most familiar with this type of template I do a bit a of trial and error), I did a grey background so you can see it has a white border just like in the image you provided (don't worry adding the heart image you had will be easy but I didn't want to download/upload just to use on community corner):
If you like I can set up the template on your Wiki if not I can give you the steps so that it works exactly how you want ie:
{{HealthBar |320 |512 }}
I had one hiccup the bar I could do it without the curve line in the inside but then if the bar was full it look like this:
I am not that template savvy to figure out the #if phaser function for this particular template I'd have to ask for help :)
oh wait, did you want the blue/turquoise bar look instead? I can do that too. I just noticed they was more than one bar on the image you linked X / Sorry.
Okay so I got a bit carried away and spent long hours staring at progress bars :P
After searching forever, I found this, the ideal style I'd like my bars to have if I had the ability to code properly (http://codepen.io/phillipalexander/pen/hvJFC). I think this style is perfect (in a red colour, minus the darker animated stripes going across). Would you know how to use inline CSS rather than using Wikia.css?
Is this too much to ask? Could you help with those please?^ Or if it's too advanced, do you know anyone who could help with it?
I quoted your message with the example bars and saw that you got it to work with the "user friendly template" suggestion I gave you. How did you do that? I googled the #if function, still don't understand it lol.
(Don't worry about the curved line, it's with or without it)
Thanks for your help!
It's java script and I know nothing about java script. I can't even get people to help me with java script on these forums LOL :P ;) but you can always ask around.
I use #if phaser functions in Infoboxe fields, like
{{#if:{{{videos|}}}|<data source="videos"></data>}}
Which means if the video field is filled it will show if it is empty it will not. It would have been nice to have an if function that is the bar is 100%; it have the lined curved, if not; it be not curved. But this is not a template I have used before besides testing in this thread.
On your site create a template named HealthBar (click this link)
and paste:
<div style="position: absolute; left: 35px; font-family: Arial Rounded MT Bold; border-style:solid;border-width:2px;border-color:#FFFFFF;background-color:#8f5d01;width:100px;height:1.5em;-moz-border-radius:6px 6px 6px 6px; -webkit-border-radius:6px 6px 6px 6px;"><div style="position: absolute; background-color:#e0a100;width:{{#expr:floor(100*{{{1|320}}}/{{{2|512}}})}}px;height:1.5em;-moz-border-radius:4px 4px 4px 4px; -webkit-border-radius:4px 4px 4px 4px;"></div><div style="position: absolute; color: #FFFFFF;width:100px;height:1.5em;text-align:center;z-index: 10;">'''{{formatnum:{{{1|320}}}}}'''</div><div style="position: absolute; left:calc(65%); color: #8f5d01;width:100px;height:1.5em;text-align:right;z-index: 10;">'''{{formatnum:max {{{2|512}}}}}'''</div></div>
Then:
{{HealthBar |320 |512 }}
Template should work on your site.
Oh sorry! I had no idea there was JavaScript in there! It's disabled on my wiki anyway so that definitely wouldn't work lol.
Do you know where you got that template from or no other wikis that use it so I can snoop around and read some more about them?
And thanks for the code! It works perfectly!
From earlier in this thread Noblex96 linked it:
Noblex96 wrote: http://splatoon.wikia.com/wiki/Hero_Shot_Replica
how about this link
Ohh yes I saw that. Because you changed the colour I thought you go it from somewhere else.
Thanks for your help.
no problem :)