SVG header

Link to article: SVG header.

#page-content tr td:first-child {
    text-align: right;
}

#page-content tr td:last-child {
    background: #eee;
}

.templateInfo{ margin: 0 0 1em; padding: 0 1em; border: 1px solid hsl(0, 0%, 87%); }
.templateInfo hr{ margin: 1em 0; }
.templateInfo h1,  .templateInfo h2{ text-align: center; }
.code{display:none;}

width: 100%; height: 225px; border: none;

(none)

```
templateInfo
```
```
templateInfo
```
```
templateInfo
```

[[iftags +component]]
[[module css]]
#page-content tr td:first-child {
    text-align: right;
}

#page-content tr td:last-child {
    background: #eee;
}

.templateInfo{ margin: 0 0 1em; padding: 0 1em; border: 1px solid hsl(0, 0%, 87%); }
.templateInfo hr{ margin: 1em 0; }
.templateInfo h1,  .templateInfo h2{ text-align: center; }
.code{display:none;}
[[/module]]

[[note]]
**Author:**
[[*user 7happy7]]
----
**Ported  By:**
[[*user Mang Gwan]]
[[/note]]

[[div class="templateInfo"]]
+ How to use
----
++ 1. Copy the following
> @@[[include :scp-wiki:component:svgheader@@
> @@|lv=@@
> @@|threat=@@
> @@|item=@@
> @@|oc=@@
> @@|oc2=@@
> @@|pend=@@
> @@]]@@
----
++ 2. Read the guide
[[table]]
[[row]]
[[cell]]
Start of Include Block ▷
[[/cell]]
[[cell]]
@@[[include :scp-wiki:component:svgheader@@
[[/cell]]
[[/row]]

[[row]]
[[cell]]
Clearance Level Number ▷
[[/cell]]
[[cell]]
|lv={{1-6}}
[[/cell]]
[[/row]]

[[row]]
[[cell]]
[http://scp-int.wikidot.com/niveaux-de-menace-des-objets-scp Threat Level] ▷
[[/cell]]
[[cell]]
|threat={{white/}} {{blue/}} {{green/}} {{orange/}} {{red/}} {{black/}} {{undefined}}
[[/cell]]
[[/row]]

[[row]]
[[cell]]
Item Number ▷
[[/cell]]
[[cell]]
##blue||item=##{{XXXX}}
[[/cell]]
[[/row]]

[[row]]
[[cell]]
Object Class ▷
[[/cell]]
[[cell]]
##blue||oc=##{{safe/}} {{euclid/}} {{keter/}} {{thaumiel/}} {{other}}
[[/cell]]
[[/row]]

[[row]]
[[cell]]
Object Class 2 __(Optional)__ ▷
**Object Class would be strikethrough**
[[/cell]]
[[cell]]
##blue||oc2=##{{safe/}} {{euclid/}} {{keter/}} {{thaumiel/}} {{other}}
[[/cell]]
[[/row]]

[[row]]
[[cell]]
Pending Blink __(Optional)__ ▷
**Object Class 2 would be blinking**
**Object Class would NOT be strikethrough**
(Defaults to "false")
[[/cell]]
[[cell]]
|pend={{true/false}}
[[/cell]]
[[/row]]

[[row]]
[[cell]]
End of Include Block ▷
[[/cell]]
[[cell]]
@@]]@@
[[/cell]]
[[/row]]
[[/table]]
+++ For the ##blue|blue parts##, you may insert any text you like. BUT if special characters are used, please use the encoder below.
[[iframe https://scp-wiki.wdfiles.com/local--code/component:svgheader/1 style="width: 100%; height: 225px; border: none;"]]
[[code type="HTML"]]
<head></head>
<body>
<form>
<input type="reset" value="reset"><br>
<textarea id="text" onchange="encode();" oninput="encode();" rows="5" cols="50" placeholder="insert before-encoded text"></textarea>
<textarea id="result" rows="5" cols="50" readonly></textarea>
</form>
<script>
let text = document.getElementById("text"), result = document.getElementById("result");
function encode() {
    result.value = encodeURIComponent(text.value);
}
</script>
[[/code]]

[[/div]]

[[div class="templateInfo"]]
+ Examples
----
> @@[[include :scp-wiki:component:svgheader@@
> @@|lv=0@@
> @@|threat=undefined@@
> @@|item=XXXX@@
> @@|oc=Euclid@@
> @@]]@@
[[include :scp-wiki:component:svgheader-backend
|lv=0
|threat=undefined
|item=XXXX
|oc=Euclid
|oc2=false
]]
----
> @@[[include :scp-wiki:component:svgheader@@
> @@|lv=3@@
> @@|threat=green@@
> @@|item=XXXX@@
> @@|oc=Safe@@
> @@|oc2=(Pending)@@
> @@|pend=true@@
> @@]]@@
[[include :scp-wiki:component:svgheader-backend
|lv=3
|threat=green
|item=XXXX
|oc=Safe
|oc2=(Pending)
|pend=true
]]
----
> @@[[include :scp-wiki:component:svgheader@@
> @@|lv=6@@
> @@|threat=red@@
> @@|item=XXXX@@
> @@|oc=Euclid@@
> @@|oc2=Thaumiel@@
> @@]]@@
[[include :scp-wiki:component:svgheader-backend
|lv=6
|threat=red
|item=XXXX
|oc=Euclid
|oc2=Thaumiel
|pend=false
]]
----
[[/div]]
----
[[div class="templateInfo"]]

+ [/component:svgheader-backend Source Code]

[[/div]]
----
[[/iftags]]

[[include :scp-wiki:component:svgheader-backend
|lv={$lv}
|threat={$threat}
|item={$item}
|oc={$oc}
|oc2={$oc2}
|oc2=false
|pend={$pend}
|pend=false
]]

SVG header

Module Styles

Inline Styles

Includes

CSS Classes

Page Source