Editing Template:Marker

From The Fifth City Wiki
Warning: You are not logged in. Your IP address will be publicly visible if you make any edits. If you log in or create an account, your edits will be attributed to your username, along with other benefits.

The edit can be undone. Please check the comparison below to verify that this is what you want to do, and then publish the changes below to finish undoing the edit.

Latest revision Your text
Line 1: Line 1:
<includeonly><div
<div
     style = "
     style = "
        /* Allow hover events to pass through */
         position: relative;
        pointer-events: none;
         left: {{{x}}}%;
       
        top: {{{y}}}%;
        /* Move marker on map */
         width: fit-content;
         position: absolute;
         transform: scale({{{scale|1}}});
         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 = "frontOnChildHover"
     class = "hastooltip"
><!--
><!--
  --><div style = "
  --><div><!--
        pointer-events: all; /* Allow pointer events again */
     --><div style = "
        width: fit-content; /* Shrink to fit only the marker */
            image-rendering: pixelated;
        transform:
            position: relative;
            translate(-50%, -50%) /* Center marker */
            top: 3px;
            scale({{{scale|0.75}}}) /* Scale marker based on variable */
            width: fit-content;
        ;
            margin-left: auto;
    "
            margin-right: auto;
    class = "hastooltip hoverChild"
        ">[[File:Border-fanciness-top.png]]</div><!--
    ><!--
     --><div style = "
       
        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-family: 'Roboto Slab', Georgia, Times, serif;
            font-size: 0.85cqw;
             color: #fff;
             color: #fff;
             text-shadow: 0 0 .25cqw #000;
             text-shadow: 0 0 4px #000;
             background-color: rgb(111, 133, 134);
             background-color: rgb(111, 133, 134);
             padding: .2cqw .4cqw;
             padding: 4px 6px;
             border: .1cqw solid #fff;
             border: 1px solid #fff;
             border-radius: .2cqw;
             border-radius: 4px;
             box-shadow: 0 0 .3cqw 0 rgb(111, 133, 134);
             box-shadow: 0px 0px 5px 0px rgb(111, 133, 134);
         "
         ">{{{name|Unnamed Marker}}}</div><!--
        >{{{name|Unnamed Marker}}}</div>{{#if:{{{link|{{{name}}}}}}|{{))!}}}}<!--
     --><div style = "
       
            image-rendering: pixelated;
        Marker bottom flair
            position: relative;
     -->{{#switch:{{{flair|fallenlondon}}}
            bottom: 7px;
        |fallenlondon =
            width: fit-content;
            <div style = "
            margin-left: auto;
                image-rendering: pixelated;
            margin-right: auto;
               
        ">[[File:Border-fanciness-bottom.png]]</div><!--
                /* Move flair up a tad */
--></div><!--
                position: relative;
--><div class = "tooltip" style = "width: 30vw; transform: translateX(-15vw); text-align: left; padding: 10px; transform: scale(calc(1/{{{scale|1}}}));">
                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>
Please note that all contributions to The Fifth City Wiki are considered to be released under the Creative Commons Attribution-ShareAlike (see The Fifth City Wiki:Copyrights for details). If you do not want your writing to be edited mercilessly and redistributed at will, then do not submit it here.
You are also promising us that you wrote this yourself, or copied it from a public domain or similar free resource. Do not submit copyrighted work without permission!

To edit this page, please answer the question that appears below (more info):

Cancel Editing help (opens in new window)
Preview page with this template

Templates used on this page:

Retrieved from "https://thefifthcity.wiki/wiki/Template:Marker"