Difference between revisions of "Template:StatBar"

From Holdfast: Nations At War
Jump to navigation Jump to search
m
m
 
(One intermediate revision by the same user not shown)
Line 1: Line 1:
 
<noinclude>
 
<noinclude>
 
<pre>
 
<pre>
{{StatBar|max=125|value=70|bonus=12|width=200|sections=5|height=10}}
+
{{StatBar|max=100|value=70|bonus=12|width=200|sections=4|height=10}}
 
</pre>
 
</pre>
'''Example:''' {{StatBar|max=125|value=70|bonus=12|width=200|sections=5|height=16}}Text following
+
'''Example:''' {{StatBar|max=100|value=25|bonus=25|width=200|sections=4|height=16}}Text following
  
 
Next Line
 
Next Line
 
</noinclude>
 
</noinclude>
<includeonly><span style="vertical-align:middle;width:{{{width|200}}}px;height:{{{height|16}}}px;position:static;display:inline-block;border:3px solid black">
+
<includeonly><span style="vertical-align:middle;width:{{{width|200}}}px;height:{{{height|16}}}px;position:static;display:inline-block;border:3px inset black">
 
<span style="z-index=-5;position:relative;left:0px;top:0px;background-color: grey;width:{{{width|200}}}px;height:{{{height|16}}}px;display:inline-block;float:left">
 
<span style="z-index=-5;position:relative;left:0px;top:0px;background-color: grey;width:{{{width|200}}}px;height:{{{height|16}}}px;display:inline-block;float:left">
<span style="z-index=1;position:relative;left:0px;top:0px;background-image: linear-gradient(135deg, rgba(255,110,3,255), rgba(254,249,1,255));width:{{#expr:{{{value}}}*{{{width|200}}}/{{{max}}} }}px;height:{{{height|16}}}px;display:inline-block">
+
<span style="z-index=1;position:relative;left:0px;top:0px;background-image: linear-gradient(135deg, rgba(255,110,3,255), rgba(254,249,1,255));width:{{#expr:({{{value}}}*{{{width|200}}})/{{{max}}} }}px;height:{{{height|16}}}px;display:inline-block">
<span style="z-index=2;position:relative;left:{{#expr:{{{value}}}*{{{width|200}}}/{{{max}}} }}px;top:0px;background-color: rgba(61,236,74,255);width:{{#expr:{{{bonus}}}*{{{width|200}}}/{{{max}}} }}px;height:{{{height|16}}}px;display:inline-block">
+
<span style="z-index=2;position:relative;left:{{#expr:({{{value}}}*{{{width|200}}})/{{{max}}} }}px;top:0px;background-color: rgba(61,236,74,255);width:{{#expr:{{{bonus}}}*{{{width|200}}}/{{{max}}} }}px;height:{{{height|16}}}px;display:inline-block">
 
</span></span></span>
 
</span></span></span>
 
{{#ifeq:{{{sections}}}|4|
 
{{#ifeq:{{{sections}}}|4|
<span style="z-index=3;position:relative;left:{{#expr:1*{{{width|200}}}/{{{sections}}} }}px;top:0px;width:3px;height:{{{height|16}}}px;border-left:3px solid black;display:block;">
+
<span style="z-index=3;position:relative;left:{{#expr:({{{width|200}}}/{{{sections}}}) }}px;top:0px;width:0px;height:{{{height|16}}}px;border-left:3px outset black;display:block;">
<span style="z-index=3;position:relative;left:{{#expr:1*{{{width|200}}}/{{{sections}}} }}px;top:0px;width:3px;height:{{{height|16}}}px;border-left:3px solid black;display:block;">
+
<span style="z-index=3;position:relative;left:{{#expr:({{{width|200}}}/{{{sections}}})-3 }}px;top:0px;width:0px;height:{{{height|16}}}px;border-left:3px outset black;display:block;">
<span style="z-index=3;position:relative;left:{{#expr:1*{{{width|200}}}/{{{sections}}} }}px;top:0px;width:3px;height:{{{height|16}}}px;border-left:3px solid black;display:block;"></span></span></span>|
+
<span style="z-index=3;position:relative;left:{{#expr:({{{width|200}}}/{{{sections}}})-3 }}px;top:0px;width:0px;height:{{{height|16}}}px;border-left:3px outset black;display:block;"></span></span></span>|
<span style="z-index=3;position:relative;left:{{#expr:1*{{{width|200}}}/{{{sections}}} }}px;top:0px;width:3px;height:{{{height|16}}}px;border-left:3px solid black;display:block;">
+
<span style="z-index=3;position:relative;left:{{#expr:({{{width|200}}}/{{{sections}}}) }}px;top:0px;width:0px;height:{{{height|16}}}px;border-left:3px solid black;display:block;">
<span style="z-index=3;position:relative;left:{{#expr:1*{{{width|200}}}/{{{sections}}} }}px;top:0px;width:3px;height:{{{height|16}}}px;border-left:3px solid black;display:block;">
+
<span style="z-index=3;position:relative;left:{{#expr:({{{width|200}}}/{{{sections}}})-3 }}px;top:0px;width:0px;height:{{{height|16}}}px;border-left:3px solid black;display:block;">
<span style="z-index=3;position:relative;left:{{#expr:1*{{{width|200}}}/{{{sections}}} }}px;top:0px;width:3px;height:{{{height|16}}}px;border-left:3px solid black;display:block;">
+
<span style="z-index=3;position:relative;left:{{#expr:({{{width|200}}}/{{{sections}}})-3 }}px;top:0px;width:0px;height:{{{height|16}}}px;border-left:3px solid black;display:block;">
<span style="z-index=3;position:relative;left:{{#expr:1*{{{width|200}}}/{{{sections}}} }}px;top:0px;width:3px;height:{{{height|16}}}px;border-left:3px solid black;display:block;"></span></span></span></span>}}
+
<span style="z-index=3;position:relative;left:{{#expr:({{{width|200}}}/{{{sections}}})-3 }}px;top:0px;width:0px;height:{{{height|16}}}px;border-left:3px solid black;display:block;"></span></span></span></span>}}
 
</span></includeonly>
 
</span></includeonly>

Latest revision as of 18:49, 21 August 2019

{{StatBar|max=100|value=70|bonus=12|width=200|sections=4|height=10}}

Example: Text following

Next Line