Template:Biome: Difference between revisions

Revision as of 19:07, 17 August 2026

Usage

{{Biome
|name=Birch Forest
|protected={{ResourceList|1=Birch Wood|1icon1=Birch Log.png}}
|other={{ResourceList|1=Dandelion|1icon1=Dandelion.png}}
}}

Renders a single biome pane for use on "Biomes and Resources"-style pages, or on any article (e.g. a continent article) that needs to show a biome's protected and other resources. Styling lives in Template:Biome/styles.css.

Only name is required. Both the icon (<name> Icon.png) and the backdrop image (<name>.jpg, falling back to <name>.png) are auto-detected from the biome name via file-existence checks, so a normal call only needs name, protected and other. If neither backdrop file exists, the pane renders as a flat light card instead.

Parameters

Parameter	Description
`name`	Biome display name. Also used to auto-detect the icon and backdrop filenames.
`icon`	Overrides the auto-detected icon filename (no `File:` prefix). Set to `none` to suppress the icon entirely (e.g. for a non-biome-specific entry with no matching icon file).
`image`	Overrides the auto-detected backdrop filename directly (no `File:` prefix), for the rare case it doesn't follow the `<name>.jpg`/`<name>.png` convention.
`protected`	Wikitext for the "Protected Resources" chips — normally a Template:ResourceList call.
`other`	Wikitext for the "Other Resources" chips, same format as `protected`.

@@ Line 1: / Line 1: @@
-<includeonly>{{#if:{{{image|}}}
+<includeonly><templatestyles src="Template:Biome/styles.css" />{{#if:{{{image|}}}
-|<div style="width:260px;max-width:100%;border-radius:8px;overflow:hidden;border:1px solid #4a4030;background:#1c1712;box-shadow:0 1px 3px rgba(0,0,0,.2);"><div style="position:relative;line-height:0;height:108px;overflow:hidden;">[[File:{{{image}}}|260px|link=|alt=]]<div style="position:absolute;inset:0;background:rgba(8,6,3,.58);"></div><div style="position:absolute;left:0;right:0;bottom:0;padding:.4em .6em .35em;"><div style="font-weight:700;font-size:1em;color:#ffffff;text-shadow:0 1px 4px rgba(0,0,0,.9);line-height:1.3;">{{#ifeq:{{{icon|{{{name}}} Icon.png}}}|none|{{{name}}}|<span style="display:inline-flex;align-items:center;gap:.35em;">[[File:{{{icon|{{{name}}} Icon.png}}}|20px|link=]]<span>{{{name}}}</span></span>}}</div></div></div><div style="background:#1c1712;padding:.55em .7em .65em;">{{#if:{{{protected|}}}|<div style="font-size:.7em;font-weight:700;color:#f0cf8e;text-transform:uppercase;letter-spacing:.04em;margin:.45em 0 .25em;">Protected Resources</div><div style="display:flex;flex-wrap:wrap;gap:.3em;">{{{protected}}}</div>}}{{#if:{{{other|}}}|<div style="font-size:.7em;font-weight:700;color:#f0cf8e;text-transform:uppercase;letter-spacing:.04em;margin:.45em 0 .25em;">Other Resources</div><div style="display:flex;flex-wrap:wrap;gap:.3em;">{{{other}}}</div>}}</div></div>
+|<div class="loka-biome-card loka-biome-card--dark"><div class="loka-biome-backdrop">[[File:{{{image}}}|260px|link=|alt=]]<div class="loka-biome-scrim"></div><div class="loka-biome-title-overlay"><div class="loka-biome-title">{{#ifeq:{{{icon|{{{name}}} Icon.png}}}|none|{{{name}}}|<span class="loka-biome-title-inner">[[File:{{{icon|{{{name}}} Icon.png}}}|20px|link=]]<span>{{{name}}}</span></span>}}</div></div></div><div class="loka-biome-body">{{#if:{{{protected|}}}|<div class="loka-biome-label">Protected Resources</div><div class="loka-biome-row">{{{protected}}}</div>}}{{#if:{{{other|}}}|<div class="loka-biome-label">Other Resources</div><div class="loka-biome-row">{{{other}}}</div>}}</div></div>
 |{{#ifexist:File:{{{name}}}.jpg
-|<div style="width:260px;max-width:100%;border-radius:8px;overflow:hidden;border:1px solid #4a4030;background:#1c1712;box-shadow:0 1px 3px rgba(0,0,0,.2);"><div style="position:relative;line-height:0;height:108px;overflow:hidden;">[[File:{{{name}}}.jpg|260px|link=|alt=]]<div style="position:absolute;inset:0;background:rgba(8,6,3,.58);"></div><div style="position:absolute;left:0;right:0;bottom:0;padding:.4em .6em .35em;"><div style="font-weight:700;font-size:1em;color:#ffffff;text-shadow:0 1px 4px rgba(0,0,0,.9);line-height:1.3;">{{#ifeq:{{{icon|{{{name}}} Icon.png}}}|none|{{{name}}}|<span style="display:inline-flex;align-items:center;gap:.35em;">[[File:{{{icon|{{{name}}} Icon.png}}}|20px|link=]]<span>{{{name}}}</span></span>}}</div></div></div><div style="background:#1c1712;padding:.55em .7em .65em;">{{#if:{{{protected|}}}|<div style="font-size:.7em;font-weight:700;color:#f0cf8e;text-transform:uppercase;letter-spacing:.04em;margin:.45em 0 .25em;">Protected Resources</div><div style="display:flex;flex-wrap:wrap;gap:.3em;">{{{protected}}}</div>}}{{#if:{{{other|}}}|<div style="font-size:.7em;font-weight:700;color:#f0cf8e;text-transform:uppercase;letter-spacing:.04em;margin:.45em 0 .25em;">Other Resources</div><div style="display:flex;flex-wrap:wrap;gap:.3em;">{{{other}}}</div>}}</div></div>
+|<div class="loka-biome-card loka-biome-card--dark"><div class="loka-biome-backdrop">[[File:{{{name}}}.jpg|260px|link=|alt=]]<div class="loka-biome-scrim"></div><div class="loka-biome-title-overlay"><div class="loka-biome-title">{{#ifeq:{{{icon|{{{name}}} Icon.png}}}|none|{{{name}}}|<span class="loka-biome-title-inner">[[File:{{{icon|{{{name}}} Icon.png}}}|20px|link=]]<span>{{{name}}}</span></span>}}</div></div></div><div class="loka-biome-body">{{#if:{{{protected|}}}|<div class="loka-biome-label">Protected Resources</div><div class="loka-biome-row">{{{protected}}}</div>}}{{#if:{{{other|}}}|<div class="loka-biome-label">Other Resources</div><div class="loka-biome-row">{{{other}}}</div>}}</div></div>
 |{{#ifexist:File:{{{name}}}.png
-|<div style="width:260px;max-width:100%;border-radius:8px;overflow:hidden;border:1px solid #4a4030;background:#1c1712;box-shadow:0 1px 3px rgba(0,0,0,.2);"><div style="position:relative;line-height:0;height:108px;overflow:hidden;">[[File:{{{name}}}.png|260px|link=|alt=]]<div style="position:absolute;inset:0;background:rgba(8,6,3,.58);"></div><div style="position:absolute;left:0;right:0;bottom:0;padding:.4em .6em .35em;"><div style="font-weight:700;font-size:1em;color:#ffffff;text-shadow:0 1px 4px rgba(0,0,0,.9);line-height:1.3;">{{#ifeq:{{{icon|{{{name}}} Icon.png}}}|none|{{{name}}}|<span style="display:inline-flex;align-items:center;gap:.35em;">[[File:{{{icon|{{{name}}} Icon.png}}}|20px|link=]]<span>{{{name}}}</span></span>}}</div></div></div><div style="background:#1c1712;padding:.55em .7em .65em;">{{#if:{{{protected|}}}|<div style="font-size:.7em;font-weight:700;color:#f0cf8e;text-transform:uppercase;letter-spacing:.04em;margin:.45em 0 .25em;">Protected Resources</div><div style="display:flex;flex-wrap:wrap;gap:.3em;">{{{protected}}}</div>}}{{#if:{{{other|}}}|<div style="font-size:.7em;font-weight:700;color:#f0cf8e;text-transform:uppercase;letter-spacing:.04em;margin:.45em 0 .25em;">Other Resources</div><div style="display:flex;flex-wrap:wrap;gap:.3em;">{{{other}}}</div>}}</div></div>
+|<div class="loka-biome-card loka-biome-card--dark"><div class="loka-biome-backdrop">[[File:{{{name}}}.png|260px|link=|alt=]]<div class="loka-biome-scrim"></div><div class="loka-biome-title-overlay"><div class="loka-biome-title">{{#ifeq:{{{icon|{{{name}}} Icon.png}}}|none|{{{name}}}|<span class="loka-biome-title-inner">[[File:{{{icon|{{{name}}} Icon.png}}}|20px|link=]]<span>{{{name}}}</span></span>}}</div></div></div><div class="loka-biome-body">{{#if:{{{protected|}}}|<div class="loka-biome-label">Protected Resources</div><div class="loka-biome-row">{{{protected}}}</div>}}{{#if:{{{other|}}}|<div class="loka-biome-label">Other Resources</div><div class="loka-biome-row">{{{other}}}</div>}}</div></div>
-|<div style="width:260px;max-width:100%;box-sizing:border-box;background:#faf7f0;border:1px solid #d8cfb8;border-radius:8px;padding:.6em .7em;box-shadow:0 1px 3px rgba(0,0,0,.1);"><div style="font-weight:700;font-size:1em;color:#1f1c16;border-bottom:1px solid #e5ddc8;padding-bottom:.3em;margin-bottom:.2em;">{{#ifeq:{{{icon|{{{name}}} Icon.png}}}|none|{{{name}}}|<span style="display:inline-flex;align-items:center;gap:.35em;">[[File:{{{icon|{{{name}}} Icon.png}}}|20px|link=]]<span>{{{name}}}</span></span>}}</div>{{#if:{{{protected|}}}|<div style="font-size:.7em;font-weight:700;color:#9c6b2e;text-transform:uppercase;letter-spacing:.04em;margin:.45em 0 .25em;">Protected Resources</div><div style="display:flex;flex-wrap:wrap;gap:.3em;">{{{protected}}}</div>}}{{#if:{{{other|}}}|<div style="font-size:.7em;font-weight:700;color:#9c6b2e;text-transform:uppercase;letter-spacing:.04em;margin:.45em 0 .25em;">Other Resources</div><div style="display:flex;flex-wrap:wrap;gap:.3em;">{{{other}}}</div>}}</div>
+|<div class="loka-biome-card loka-biome-card--light"><div class="loka-biome-title loka-biome-title--light">{{#ifeq:{{{icon|{{{name}}} Icon.png}}}|none|{{{name}}}|<span class="loka-biome-title-inner">[[File:{{{icon|{{{name}}} Icon.png}}}|20px|link=]]<span>{{{name}}}</span></span>}}</div>{{#if:{{{protected|}}}|<div class="loka-biome-label loka-biome-label--light">Protected Resources</div><div class="loka-biome-row">{{{protected}}}</div>}}{{#if:{{{other|}}}|<div class="loka-biome-label loka-biome-label--light">Other Resources</div><div class="loka-biome-row">{{{other}}}</div>}}</div>
 }}
 }}
@@ Line 19: / Line 19: @@
 </pre>
-Renders a single biome pane for use on "Biomes and Resources"-style pages, or on any article (e.g. a continent article) that needs to show a biome's protected and other resources.
+Renders a single biome pane for use on "Biomes and Resources"-style pages, or on any article (e.g. a continent article) that needs to show a biome's protected and other resources. Styling lives in [[Template:Biome/styles.css]].
 Only <code>name</code> is required. Both the icon (<code>&lt;name&gt; Icon.png</code>) and the backdrop image (<code>&lt;name&gt;.jpg</code>, falling back to <code>&lt;name&gt;.png</code>) are auto-detected from the biome name via file-existence checks, so a normal call only needs <code>name</code>, <code>protected</code> and <code>other</code>. If neither backdrop file exists, the pane renders as a flat light card instead.