Template:Zone Infobox: Difference between revisions

From Horizon Wiki Mirror
← Older editNewer edit →
imported>Aramachus
Content deleted Content added
imported>Spiffly
updating to include interactive map parameter
imported>Aramachus
fully reworked the template to make it mobile responsive
Line 1: Line 1:
<noinclude>[[Category:Templates|{{PAGENAMEE}}]]</noinclude>
<noinclude>[[Category:Templates|{{PAGENAMEE}}]]</noinclude><includeonly><onlyinclude>
<!-- outer flex container for the entire Zone Infobox -->
{| border="0" width="100%" cellpadding="7" cellspacing="2"
<div style="display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px;">
|BGCOLOR="#eddce7" rowspan="1" colspan="2" width="70%" valign="top"|
<!-- Left part with description, TOC, map and connections-->
<div style="margin:0;background-color:#bc73a1;font-size:120%;font-weight:bold;border:1px solid #bc73a1;text-align:left;color:#000;padding:0.2em 0.4em;">Description</div>
<div style="padding:0.4em 0.2em;">
<div style="flex-grow: 9; flex-basis: 300px; background-color: #eddce7; padding: 8px;">
<!-- inner flex container for the left side to arrange description, TOC, map and connections -->
{{{Description}}}
<div style="display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px;">
<!-- first row: description: full width -->
<div style="flex-grow: 1; flex-basis: 100%;">
<div class="zone-section-header zone-infobox-header">Description</div>
<div class="zone-section-body zone-infobox-body">{{{Description}}}</div>
</div>
</div>
<!-- close first row: description-->
|BGCOLOR="#eddce7" rowspan="3" valign="top" width="30%"|
<!-- second row col 1: TOC and connections: half width-->
<div style="margin:0;background-color:#bc73a1;font-size:120%;font-weight:bold;border:1px solid #bc73a1;text-align:left;color:#000;padding:0.2em 0.4em;">Zone Information</div>
<div style="flex-grow: 99; flex-basis: 200px; style="background-color: #eddce7">
{| style="align:right; width: {{{infoboxwidth|25}}}em; font-size: 90%; text-align: left; border: 1px solid #eddce7;" cellpadding="7"

<div class="zone-section-header zone-infobox-header">Table of Contents</div>
<div class="zone-section-body zone-infobox-body horizontal-list">
{{{ToC}}}</div>

<div class="zone-section-header zone-infobox-header">Connections</div>
<div class="zone-section-body zone-infobox-body suppress-p-margin plain-list">
{{{Connections}}}</div>

</div>
<!-- close second row col 1: TOC and connections -->
<!-- second row col 2: Map-->
<div style="flex-grow: 1; flex-basis: 330px; background-color: #eddce7">

<div class="zone-section-header zone-infobox-header">Interactive Map</div>
<div class="zone-section-body zone-infobox-body"><center>
{{{interactive map}}}
</center></div>

</div>
<!-- close second row col 2: map-->
</div></div>
<!-- close inner flex container and left part: description, TOC, map, connections-->
<!-- Start of right part: zone information -->
<div style="flex-grow: 1; flex-basis: 300px; background-color: #eddce7; padding: 8px;">

{| style="width: 100%; font-size: 0.9rem; text-align: left; border: 1px solid #eddce7;" cellpadding="7" class="zone-infobox-table"
! colspan=2 style="font-size: 1.2rem; | Zone Information
|-
|-
! style="background-color: #bc73a1;" | '''Area Name'''
! style="width: 150px;" | Area Name
| {{{Zone|{{PAGENAME}}}}}
| {{{Zone|{{PAGENAME}}}}}
|-
|-
! Type
! style="background-color: #bc73a1;" | '''Type'''
| {{{Type}}}
| {{{Type}}}
|-
|-
! Maps
! style="background-color: #bc73a1;" | '''Maps'''
| valign="top" | {{{Maps|{{:{{PAGENAME}}/Maps}}}}}
| {{{Maps|{{:{{{Zone|{{PAGENAME}}}}}}/Maps}}}}}
|-
|-
! style="background-color: #bc73a1;"| '''Map Acquisition'''
! Map Acquisition
| {{{Map Acquisition}}}
| {{{Map Acquisition}}}
|-
|-
! style="background-color: #bc73a1;" | '''Miscellaneous'''
! Miscellaneous
| {{{Stats}}}
| {{{Stats}}}
|-
|-
! Hobbies
! style="background-color: #bc73a1;" | '''Hobbies'''
| {{{HELM|<div style="width: min-content;" class="suppress-p-margin">{{:{{{Zone|{{PAGENAME}}}}}/HELM}}</div>}}}
|
{| border="0" width="1%"
|align="left"|{{{HELM|{{:{{PAGENAME}}/HELM}}}}}
|}
|-
|-
! Weather
! style="background-color: #bc73a1;" | '''Weather'''
| {{{Weather|<div style="width: min-content;" class="suppress-p-margin">{{:{{{Zone|{{PAGENAME}}}}}/Weather Icons}}</div>}}}
|
{| border="0" width="1%"
|align="left"|{{{Weather|{{:{{PAGENAME}}/Weather Icons}}}}}
|}
|-
|-
! Region
! style="background-color: #bc73a1;" | '''Region'''
| [[{{{Region}}}]]
| [[{{{Region}}}]]
|-
|-
! style="background-color: #bc73a1;" | '''Expansion'''
! Expansion
| {{{Expansion}}}
| {{{Expansion}}}
|-
|-
! style="background-color: #bc73a1;" | '''Requirements'''
! Requirements
| {{{Requirements}}}
| {{{Requirements}}}
|-
|-
! style="background-color: #bc73a1;" | '''Restrictions'''
! Restrictions
| {{{Restrictions}}}
| {{{Restrictions}}}
|-
|-
! style="background-color: #bc73a1;" | '''Background music'''
! Background music
| {{{BGM|}}}
| {{{BGM|}}}
|-
|-
! Notes
! style="background-color: #bc73a1;" | '''Notes'''
| {{{Notes|None}}}
| {{{Notes|None}}}
|}
|}
</div>
|-
<!-- close right part: zone information-->
|BGCOLOR="#eddce7" valign="top" width="50%"|
</div>
<div style="margin:0;background-color:#bc73a1;font-size:120%;font-weight:bold;border:1px solid #bc73a1;text-align:left;color:#000;padding:0.2em 0.4em;">Table of Contents</div>
<!-- close outer flex container -->
{{{ToC}}}
__NOTOC__{{categorize|{{{1|}}}|<!--
|BGCOLOR="#eddce7" rowspan="2" width="50%" valign="top"|
-->[[Category:Areas]][[Category:{{{Region}}}]]}}
<div style="margin:0;background-color:#bc73a1;font-size:120%;font-weight:bold;border:1px solid #bc73a1;text-align:left;color:#000;padding:0.2em 0.4em;">Interactive Map</div>
</onlyinclude></includeonly>
<div style="padding:0.4em 0.2em;"><center>
==Usage==
{{{interactive map}}}

</center></div>
===Example 1: Valkurm Dunes===
|-
{{Zone Infobox|nc
|BGCOLOR="#eddce7" class="flush-list" valign="top"|
| Zone = Valkurm Dunes
<div style="margin:0;background-color:#bc73a1;font-size:120%;font-weight:bold;border:1px solid #bc73a1;text-align:left;color:#000;padding:0.2em 0.4em;">Connections</div>
| ToC =
{{{Connections}}}
*[[#Involved in Quests/Missions|Quests/Missions]]
|}
*[[#digging|Chocobo Digging]]
__NOTOC__[[Category:Areas]][[Category:{{{Region}}}]]
*[[#fishing|Fishing]]<!--
--><li class="treasurecasket">[[#Treasure Casket|Treasure Casket]]<li>
*[[#weather|Weather]]
*[[#NPCs Found Here|NPCs]]
*[[#Notorious Monsters Found Here|Notorious Monsters]]
*[[#Regular Monsters Found Here|Regular Monsters]]
*[[#Event Monsters Found Here|Event Monsters]]
| Description = This enormous expanse of dunes can be found along the Bhefhel Gulf. While a majority of the surrounding coastline is too shallow for larger sea vessels, one natural harbor does exist. Near this harbor lies the independent port town of [[Selbina]].
[[File:Valkurm-dunes-pic.jpg|300px|center]]
| Connections =
*[[Konschtat Highlands]]: ({{Location Tooltip|area=Valkurm Dunes|pos=M-11}})
*[[Gustav Tunnel]]: ({{Location Tooltip|area=Valkurm Dunes|pos=B-8}})
*[[Lufaise Meadows]]: ({{Location Tooltip|area=Valkurm Dunes|pos=I-9}})
*[[Selbina]]: ({{Location Tooltip|area=Valkurm Dunes|pos=G-9}})
*[[La Theine Plateau]]: ({{Location Tooltip|area=Valkurm Dunes|pos=L-5}})
*[[Dynamis - Valkurm]]: [[Hieroglyphics]] at ({{Location Tooltip|area=Valkurm Dunes|pos=H-7}})
<span class="abyssea"><br>[[Abyssea - Misareaux]] via [[Cavernous Maw]] at ({{Location Tooltip|area=Valkurm Dunes|pos=I-9}})</span>
| Monstrosity = {{Medium}}
| Stats = {{Chocobo}} {{Tractor}} {{Fellow}}
| Region = Zulkheim
| Type = Outdoor
| Maps = {{Zone Tooltip Map|zone=Valkurm Dunes|Map 1}}
| Map Acquisition = [[Map of the San d'Oria Area|Purchase]]
| Restrictions = None
| Requirements = None
| Expansion = Original
}}

===Example 2: Bastok Markets===
{{Zone Infobox|nc
| Zone = Bastok Markets
| interactive map = <FFXIMap mapID=1 width=100% height=300px/>
| ToC = [[#Involved in Quests/Missions|Quests/Missions]] • [[#fishing|Fishing]] • [[#NPCs Found Here|NPCs]] • [[#Area Layout|Area Layout]]
| Description = The main thoroughfare of [[Bastok|The Republic of Bastok]], the markets is home to a wide number of [[:category:architecture|shops]], including the [[:category:goldsmithing|goldsmithing guild]] and the west [[Auction House]] (accessible just off of [[Firewater Circle]]). This is the center of town, and provides access to all of the other sections of Bastok.
[[File:Bastok-markets-pic.jpg|left|320px]]
| Connections =
[[Metalworks]]: {{Tooltip-Connection-Map|map=Bastok-markets.png|size=300|blip=RedBlip|text=H-6|x=60.93|y=36.32}}, {{Tooltip-Connection-Map|map=Bastok-markets.png|blip=RedBlip|text=H-7|x=61.13|y=45.89}}
<br>[[Port Bastok]]: {{Tooltip-Connection-Map|map=Bastok-markets.png|size=300|blip=RedBlip|text=G-3|x=46.48|y=20.50}}
<br>[[Bastok Mines]]: {{Tooltip-Connection-Map|map=Bastok-markets.png|size=300|blip=RedBlip|text=H-13|x=51.36|y=80.07}}
<br>[[South Gustaberg]]: {{Tooltip-Connection-Map|map=Bastok-markets.png|size=300|blip=RedBlip|text=D-11|x=25.78|y=69.72}}
<!--
<br>[[Home Point]] #1: (F-9)
<br>[[Home Point]] #2: (E-7)
<br>[[Home Point]] #3: (I-6)
<br>[[Home Point]] #4: (H-8)
-->
| Stats = None
| Region = Bastok
| Type = City
| HELM = {{Zone Icon|fishing}}
| Weather = None
| Maps = {{Zone Tooltip Map|Map 1|zone=Bastok Markets}}
| Map Acquisition = [[Map of the Bastok Area|Purchase]]
| Restrictions = None
| Requirements = None
| Expansion = Final Fantasy XI
| BGM = "The Republic of Bastok"
}}

Revision as of 19:13, 14 April 2024

Usage

Example 1: Valkurm Dunes

Description
This enormous expanse of dunes can be found along the Bhefhel Gulf. While a majority of the surrounding coastline is too shallow for larger sea vessels, one natural harbor does exist. Near this harbor lies the independent port town of Selbina.
Error creating thumbnail: File missing
Table of Contents
Connections
  • Konschtat Highlands: (M-11
  1. 5555FF; opacity:0.5;">)
  • Gustav Tunnel: (B-8
  1. 5555FF; opacity:0.5;">)
  • Lufaise Meadows: (I-9
  1. 5555FF; opacity:0.5;">)
  • Selbina: (G-9
  1. 5555FF; opacity:0.5;">)
  • La Theine Plateau: (L-5
  1. 5555FF; opacity:0.5;">)
  • Dynamis - Valkurm: Hieroglyphics at (H-7
  1. 5555FF; opacity:0.5;">)


Abyssea - Misareaux via Cavernous Maw at (I-9

  1. 5555FF; opacity:0.5;">)
Interactive Map

{{{interactive map}}}

Zone Information
Area Name Valkurm Dunes
Type Outdoor
Maps
Map Acquisition Purchase
Miscellaneous Able to ride Mounts Able to use Tractor Error creating thumbnail: File missing
Hobbies

Fishing

Error creating thumbnail: File missing

Treasure Casket

Weather

Earth

Fire

Region Zulkheim
Expansion Original
Requirements None
Restrictions None
Background music
Notes None


Example 2: Bastok Markets

Description
The main thoroughfare of The Republic of Bastok, the markets is home to a wide number of shops, including the goldsmithing guild and the west Auction House (accessible just off of Firewater Circle). This is the center of town, and provides access to all of the other sections of Bastok.
Interactive Map
Zone Information
Area Name Bastok Markets
Type City
Maps
Map Acquisition Purchase
Miscellaneous None
Hobbies Fishing
Weather None
Region Bastok
Expansion Final Fantasy XI
Requirements None
Restrictions None
Background music "The Republic of Bastok"
Notes None


Retrieved from "http://horizonwiki.lol/index.php?title=Template:Zone_Infobox&oldid=102535"