Template:StatBar - Revision history

Falo at 18:49, 21 August 2019

2019-08-21T18:49:09Z

Falo: Fix to vertical bar positions

2019-08-21T18:48:46Z

Fix to vertical bar positions

Falo at 18:36, 21 August 2019

2019-08-21T18:36:30Z

Falo at 17:30, 21 August 2019

2019-08-21T17:30:23Z

Falo at 23:23, 20 August 2019

2019-08-20T23:23:58Z

Falo: Initial version of StatBar template

2019-08-20T23:21:47Z

Initial version of StatBar template

New page

<noinclude>
<pre>
{{StatBar|max=125|value=70|bonus=12|width=200|sections=5}}
</pre>
{{StatBar|max=125|value=70|bonus=12|width=200|sections=5}}
</noinclude>
<includeonly>
<div style="width:{{{width}}}px;height:16px;position:relative;border:3px;border-style:inset;border-color:black">
<div style="z-index=-5;position:absolute;left:0px;top:0px;background-color: grey;width:{{{width}}}px;height:16px"></div>
<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>
<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>
{{#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>
<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>
<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>
|
<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>
<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>
<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>
<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>
}}

</div>
</includeonly>

@@ Line 20: / Line 20: @@
 <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:({{{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>{{#expr:1*{{{width|200}}}/{{{sections}}} }}</includeonly>
+</span></includeonly>

@@ Line 1: / Line 1: @@
 <noinclude>
 <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>
-'''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
 </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=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>
 {{#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>{{#expr:1*{{{width|200}}}/{{{sections}}} }}</includeonly>

@@ Line 1: / Line 1: @@
 <noinclude>
 <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>
-{{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
 </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|
-<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>

@@ Line 19: / Line 19: @@
 <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>
 <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>
-}}</div></includeonly>
+<div style="z-index=10;width:{{{width}}}px;height:16px;position:static:border-right:5px solid red"></div>