Template:Marker: Difference between revisions
From The Fifth City Wiki
m Fix translation |
Can't properly get rid of the scrollbar issue afaik so minimize it as much as possible |
||
| (5 intermediate revisions by 2 users not shown) | |||
| 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 | ||
| Line 48: | Line 51: | ||
text-align: center; | text-align: center; | ||
font-family: 'Roboto Slab', Georgia, Times, serif; | font-family: 'Roboto Slab', Georgia, Times, serif; | ||
font-size: | 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: .4cqw | padding: .2cqw .4cqw; | ||
border: .1cqw solid #fff; | border: .1cqw solid #fff; | ||
border-radius: . | border-radius: .2cqw; | ||
box-shadow: 0 0 . | box-shadow: 0 0 .3cqw 0 rgb(111, 133, 134); | ||
" | " | ||
>{{{name|Unnamed Marker}}}</div>{{#if:{{{link|{{{name}}}}}}|{{))!}}}}<!-- | >{{{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:{{{1|}}}||display: none;}} <!-- Hide tooltip if it has no contents --> | {{#if:{{{1|{{{image|{{{header|}}}}}}}}}||display: none;}} <!-- Hide tooltip if it has no contents --> | ||
width: 25cqw; | |||
<!-- If the content contains text, use a set width. Otherwise, fit-content --> | |||
{{#if:{{{1|}}} | |||
|width: 25cqw; | |||
|width: fit-content; | |||
}} | |||
transform: | transform: | ||
translate(calc(- | 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 85: | Line 97: | ||
padding: 10px; | padding: 10px; | ||
"><!-- | "><!-- | ||
-->{{#if:{{{image|}}}|[[File:{{{image|}}}|right]]}}<!-- | -->{{#if:{{{header|}}}|[[File:{{{header|}}}]]}}<!-- | ||
-->{{{1}}}<!-- | -->{{#if:{{{image|}}}|<div style = "width: 12.5cqw; clear: right; float: right">[[File:{{{image|}}}|right]]</div>}}<!-- | ||
-->{{{1|}}}<!-- | |||
--></div><!-- | --></div><!-- | ||
--></div> | --></div> | ||
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. |
