Template:Infobox World: Difference between revisions

Template page
imported>StiefelJackal
m StiefelJackal moved page Template:Template:Infobox World to Template:Infobox World: Forgot to remove prefix.
 
attempt at improving visibility by using defined CSS vars
Line 1: Line 1:
<div class="infobox mw-infobox mw-infobox-right" style="box-sizing: border-box; display:grid; gap: 2px; width: 300px; padding:4px; border-width:1px; border-color:hsl({{{hue|177}}}deg 60% 30% / 65%); background-color:hsl({{{hue|177}}}deg 80% 90% / 35%); float:right;grid-template-areas: {{{gridTemplateAreas|'header' 'misc'}}};" role="article">
<div class="infobox mw-infobox mw-infobox-right" style="box-sizing: border-box; display:grid; gap: 2px; width: 300px; padding:4px; border-width:1px; border-color: var(--border-color-base); background-color: var(--background-color-quiet--active); float:right;grid-template-areas: {{{gridTemplateAreas|'header' 'misc'}}};" role="article">
<!-- Header (Title and Image) -->
<!-- Header (Title and Image) -->
<div style="display:grid; row-gap:4px; grid-area: header;" role="header">
<div style="display:grid; row-gap:4px; grid-area: header;" role="header">
<div style="font-size: 1.05rem; background-color: hsl({{{hue|177}}}deg 80% 60% / 70%); padding: 4px; text-align: center;"><strong>{{SUBPAGENAME}}</strong></div>
<div style="font-size: 1.05rem; background-color: var(--background-color-icon--active); padding: 4px; text-align: center;"><strong>{{SUBPAGENAME}}</strong></div>
[[File:Worlds_Everything_Icon.png|225px|center|A placeholder image for the world]]
[[File:Worlds_Everything_Icon.png|225px|center|A placeholder image for the world]]
</div>
</div>
Line 8: Line 8:
<!-- Misc Info -->
<!-- Misc Info -->
<div style="display:grid; gap:inherit; grid-area: misc;grid-template-columns: 50% 50%;justify-content: space-evenly;" role="region">
<div style="display:grid; gap:inherit; grid-area: misc;grid-template-columns: 50% 50%;justify-content: space-evenly;" role="region">
<div style="box-sizing: border-box; background-color: hsl({{{hue|177}}}deg 80% 60% / 70%); padding: 2px 4px; border-radius: 4px 0 0 4px"><strong>Created By</strong></div>
<div style="box-sizing: border-box; background-color: var(--background-color-icon--active); padding: 2px 4px; border-radius: 4px 0 0 4px"><strong>Created By</strong></div>
<div style="box-sizing: border-box; background-color: hsl({{{hue|177}}}deg 80% 60% / 35%); padding: 2px 4px; border-radius: 0 4px 4px 0">{{{createdBy|Unknown}}}</div>
<div style="box-sizing: border-box; background-color: var(--background-color-icon--active); padding: 2px 4px; border-radius: 0 4px 4px 0">{{{createdBy|Unknown}}}</div>
<div style="box-sizing: border-box; background-color: hsl({{{hue|177}}}deg 80% 60% / 70%); padding: 2px 4px; border-radius: 4px 0 0 4px"><strong>Published On</strong></div>
<div style="box-sizing: border-box; background-color: var(--background-color-icon--active); padding: 2px 4px; border-radius: 4px 0 0 4px"><strong>Published On</strong></div>
<div style="box-sizing: border-box; background-color: hsl({{{hue|177}}}deg 80% 60% / 35%); padding: 2px 4px; border-radius: 0 4px 4px 0">{{{publishedOn|Unknown}}}</div>
<div style="box-sizing: border-box; background-color: var(--background-color-icon--active); padding: 2px 4px; border-radius: 0 4px 4px 0">{{{publishedOn|Unknown}}}</div>
<div style="box-sizing: border-box; background-color: hsl({{{hue|177}}}deg 80% 60% / 70%); padding: 2px 4px; border-radius: 4px 0 0 4px"><strong>Last Updated</strong></div>
<div style="box-sizing: border-box; background-color: var(--background-color-icon--active); padding: 2px 4px; border-radius: 4px 0 0 4px"><strong>Last Updated</strong></div>
<div style="box-sizing: border-box; background-color: hsl({{{hue|177}}}deg 80% 60% / 35%); padding: 2px 4px; border-radius: 0 4px 4px 0">{{{lastUpdated|Unknown}}}</div>
<div style="box-sizing: border-box; background-color: var(--background-color-icon--active); padding: 2px 4px; border-radius: 0 4px 4px 0">{{{lastUpdated|Unknown}}}</div>
<div style="box-sizing: border-box; background-color: hsl({{{hue|177}}}deg 80% 60% / 70%); padding: 2px 4px; border-radius: 4px 0 0 4px"><strong>Tags</strong></div>
<div style="box-sizing: border-box; background-color: var(--background-color-icon--active); padding: 2px 4px; border-radius: 4px 0 0 4px"><strong>Tags</strong></div>
<div style="box-sizing: border-box; background-color: hsl({{{hue|177}}}deg 80% 60% / 35%); padding: 2px 4px; border-radius: 0 4px 4px 0">{{{tags|None}}}</div>
<div style="box-sizing: border-box; background-color: var(--background-color-icon--active); padding: 2px 4px; border-radius: 0 4px 4px 0">{{{tags|None}}}</div>
</div>
</div>
</div>
</div>
<!-- END -->
<!-- END -->
</div>
</div>

Revision as of 19:00, 3 March 2024

Infobox World
A placeholder image for the world
A placeholder image for the world
Created By
Unknown
Published On
Unknown
Last Updated
Unknown
Tags
None