Template:Marker: Difference between revisions
From The Fifth City Wiki
create map marker start template |
Can't properly get rid of the scrollbar issue afaik so minimize it as much as possible |
||
| (32 intermediate revisions by 2 users not shown) | |||
| Line 1: | Line 1: | ||
<div | <includeonly><div | ||
style = " | style = " | ||
/* Allow hover events to pass through */ | |||
pointer-events: none; | |||
transform: translate(calc( | /* Move marker on map */ | ||
width: | position: absolute; | ||
transform: translate(calc({{{x|0}}}% * 4), calc({{{y|0}}}% * 4)); | |||
/* Transformation percentages take into account | |||
the size of the current element rather than | |||
the parent element. So, to translate based on | |||
a percentage of the parent element's size, | |||
this element must have the same size. */ | |||
width: calc(100% / 4); | |||
height: calc(100% / 4); | |||
" | " | ||
class = " | class = "frontOnChildHover" | ||
><!-- | ><!-- | ||
-->[[File:{{{ | --><div style = " | ||
pointer-events: all; /* Allow pointer events again */ | |||
width: fit-content; /* Shrink to fit only the marker */ | |||
transform: | |||
translate(-50%, -50%) /* Center marker */ | |||
scale({{{scale|0.75}}}) /* Scale marker based on variable */ | |||
; | |||
" | |||
class = "hastooltip hoverChild" | |||
><!-- | |||
Marker top flair | |||
-->{{#switch:{{{flair|fallenlondon}}} | |||
|fallenlondon = | |||
<div style = " | |||
image-rendering: pixelated; | |||
/* Move flair down a tad */ | |||
position: relative; | |||
top: 3px; | |||
/* Center it */ | |||
width: fit-content; | |||
margin-left: auto; | |||
margin-right: auto; | |||
">[[File:Border-fanciness-top.png|link=]]</div> | |||
| }}<!-- | |||
Marker | |||
-->{{#if:{{{link|{{{name}}}}}}|{{!((}}{{{link|{{#replace:{{{name}}}|<br>|_}}}}}{{!}}}}<div style = " | |||
/* ~*Style*~ */ | |||
text-align: center; | |||
font-family: 'Roboto Slab', Georgia, Times, serif; | |||
font-size: 0.85cqw; | |||
color: #fff; | |||
text-shadow: 0 0 .25cqw #000; | |||
background-color: rgb(111, 133, 134); | |||
padding: .2cqw .4cqw; | |||
border: .1cqw solid #fff; | |||
border-radius: .2cqw; | |||
box-shadow: 0 0 .3cqw 0 rgb(111, 133, 134); | |||
" | |||
>{{{name|Unnamed Marker}}}</div>{{#if:{{{link|{{{name}}}}}}|{{))!}}}}<!-- | |||
Marker bottom flair | |||
-->{{#switch:{{{flair|fallenlondon}}} | |||
|fallenlondon = | |||
<div style = " | |||
image-rendering: pixelated; | |||
/* Move flair up a tad */ | |||
position: relative; | |||
bottom: 7px; | |||
/* Center it */ | |||
width: fit-content; | |||
margin-left: auto; | |||
margin-right: auto; | |||
">[[File:Border-fanciness-bottom.png|link=]]</div> | |||
| }}<!-- | |||
Tooltip | |||
--><div class = "tooltip" style = " | |||
{{#if:{{{1|{{{image|{{{header|}}}}}}}}}||display: none;}} <!-- Hide tooltip if it has no contents --> | |||
<!-- If the content contains text, use a set width. Otherwise, fit-content --> | |||
{{#if:{{{1|}}} | |||
|width: 25cqw; | |||
|width: fit-content; | |||
}} | |||
transform: | |||
translate(calc(-16.66cqw * {{{scale|0.75}}}), calc(-200% * (0.85 - {{{scale|0.75}}}))) | |||
scale({{#expr:1/{{{scale|0.75}}}}}) /* Undo scaling applied by marker to tooltip */ | |||
; | |||
text-align: left; | |||
padding: 10px; | |||
"><!-- | |||
-->{{#if:{{{header|}}}|[[File:{{{header|}}}]]}}<!-- | |||
-->{{#if:{{{image|}}}|<div style = "width: 12.5cqw; clear: right; float: right">[[File:{{{image|}}}|right]]</div>}}<!-- | |||
-->{{{1|}}}<!-- | |||
--></div><!-- | |||
--></div> | |||
</div> | |||
</includeonly> | |||
<noinclude>{{documentation}}</noinclude> | |||
Latest revision as of 19:24, 17 July 2025
| Template documentation follows |
|---|
| Note: the template above may sometimes be partially or fully invisible. |
| Visit Template:Marker/doc to edit this documentation. (How does this work?) |
Usage[edit]
See Map for usage details. Tooltips will not show up on hover unless there is text in the tooltip.
Properties[edit]
| Parameter name | Mandatory? | Description | Example value |
|---|---|---|---|
| name | X | Text that appears inside the marker, as a label. This is different from the text that appears when hovering over the marker, which would be wikitext placed between the {{Marker}} and {{MarkerEnd}} templates. | Flute Street |
| link | A wiki page that clicking on the marker links to. Defaults to name. To remove a link, just set this parameter as empty.
|
Jack-of-Smiles | |
| flair | Values: {fallenlondon, Default: fallenlondon.With | ||
| image | A portrait thumbnail in the tooltip, aligned to the right. | Snowflake.png | |
| header | A landscape header image in the tooltip, which takes up the full width. | Wolfstack.png | |
| x | X | The horizontal position of the marker, as a percentage where 0% represents the left side of the map and 100% represents the right side. | 72.1 |
| y | X | The vertical position of the marker, as a percentage where 0% represents the top side of the map and 100% represents the bottom side. | 21.8 |
| scale | Adjusts the scale of the marker. Defaults to 0.75x size (0.5 ~ 1 is usually a good range). | 0.5 | |
| {{1}} | (First unnamed parameter) Wikitext to be shown inside the tooltip. If you want to add an image, consider the image or header parameters instead.
|
Just get 3200 scraps and trade them with the [[Relickers|Shivering Relicker]]. You could do this multiple times before any other source was available. |
