Difference between revisions of "Template:StatBar"

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

Revision as of 18:36, 21 August 2019

{{StatBar|max=125|value=70|bonus=12|width=200|sections=5|height=10}}

Example: Text following

Next Line