Template:Marker: Difference between revisions
From The Fifth City Wiki
m Hannah moved page User:Hannah/Sandbox/map-template/marker-template to Template:Marker |
Can't properly get rid of the scrollbar issue afaik so minimize it as much as possible |
||
(10 intermediate revisions by 2 users not shown) | |||
Line 1: | Line 1: | ||
<div | <includeonly><div | ||
style = " | style = " | ||
/* Allow hover events to pass through */ | /* Allow hover events to pass through */ | ||
Line 6: | Line 6: | ||
/* Move marker on map */ | /* Move marker on map */ | ||
position: absolute; | position: absolute; | ||
transform: translate({{{x|0}}}%, {{{y|0}}}%); | transform: translate(calc({{{x|0}}}% * 4), calc({{{y|0}}}% * 4)); | ||
/* Transformation percentages take into account | /* Transformation percentages take into account | ||
Line 13: | Line 13: | ||
a percentage of the parent element's size, | a percentage of the parent element's size, | ||
this element must have the same size. */ | this element must have the same size. */ | ||
width: 100%; | width: calc(100% / 4); | ||
height: 100%; | height: calc(100% / 4); | ||
" | " | ||
class = "frontOnChildHover" | class = "frontOnChildHover" | ||
Line 30: | Line 30: | ||
Marker top flair | Marker top flair | ||
--><div style = " | -->{{#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 | Marker | ||
-->{{#if:{{{link|}}}|{{!((}}{{{link}}}{{!}}}}<div style = " | -->{{#if:{{{link|{{{name}}}}}}|{{!((}}{{{link|{{#replace:{{{name}}}|<br>|_}}}}}{{!}}}}<div style = " | ||
/* ~*Style*~ */ | /* ~*Style*~ */ | ||
text-align: center; | |||
font-family: 'Roboto Slab', Georgia, Times, serif; | font-family: 'Roboto Slab', Georgia, Times, serif; | ||
font-size: 0.85cqw; | |||
color: #fff; | color: #fff; | ||
text-shadow: 0 0 | text-shadow: 0 0 .25cqw #000; | ||
background-color: rgb(111, 133, 134); | background-color: rgb(111, 133, 134); | ||
padding: | padding: .2cqw .4cqw; | ||
border: | border: .1cqw solid #fff; | ||
border-radius: | border-radius: .2cqw; | ||
box-shadow: | box-shadow: 0 0 .3cqw 0 rgb(111, 133, 134); | ||
" | " | ||
>{{{name|Unnamed Marker}}}</div>{{#if:{{{link|}}}|{{))!}}}}<!-- | >{{{name|Unnamed Marker}}}</div>{{#if:{{{link|{{{name}}}}}}|{{))!}}}}<!-- | ||
Marker bottom flair | Marker bottom flair | ||
--><div style = " | -->{{#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 | Tooltip | ||
--><div class = "tooltip" style = " | --><div class = "tooltip" style = " | ||
{{#if:{{{ | {{#if:{{{1|{{{image|{{{header|}}}}}}}}}||display: none;}} <!-- Hide tooltip if it has no contents --> | ||
width: | |||
<!-- If the content contains text, use a set width. Otherwise, fit-content --> | |||
{{#if:{{{1|}}} | |||
|width: 25cqw; | |||
|width: fit-content; | |||
}} | |||
transform: | transform: | ||
translate(- | 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 */ | scale({{#expr:1/{{{scale|0.75}}}}}) /* Undo scaling applied by marker to tooltip */ | ||
; | ; | ||
Line 82: | Line 96: | ||
text-align: left; | text-align: left; | ||
padding: 10px; | 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. |