Template:Compass icon - Revision history

76561197969631737: Added color switch for paths

2026-07-26T03:21:25Z

Added color switch for paths

← Older revision		Revision as of 03:21, 26 July 2026
Line 1:		Line 1:
	<includeonly><span class="cc-compass-icon" style="--instance-path-color: #88ba5c; --instance-size: {{#switch: {{{size\|sm}}}\|xs=16\|sm=32\|md=64\|lg=96\|xl=128}}px; --instance-inner-size: {{#switch: {{{size\|sm}}}\|xs=13\|sm=26\|md=52\|lg=78\|xl=104}}px;"><!--		<includeonly><span class="cc-compass-icon" style="--instance-path-color: {{#switch: {{{path\|}}}\|Notoriety=#88ba5c\|Empire=#e6573f\|Seafaring=#5782cf\|Wealth=#d844b8\|default=transparent}};
			--instance-size: {{#switch: {{{size\|sm}}}\|xs=16\|sm=32\|md=64\|lg=96\|xl=128}}px;
			--instance-inner-size: {{#switch: {{{size\|sm}}}\|xs=13\|sm=26\|md=52\|lg=78\|xl=104}}px;"><!--
	--><!--		--><!--
	-->[[File:{{{1}}}\|		-->[[File:{{{1}}}\|

76561197969631737: now using site CSS, including instance variables. adjusted inner sizes

2026-07-26T03:18:22Z

now using site CSS, including instance variables. adjusted inner sizes

← Older revision		Revision as of 03:18, 26 July 2026
Line 1:		Line 1:
	<includeonly><span style="~~display: inline~~-~~block;~~		<includeonly><span class="cc-compass-icon" style="--instance-path-color: #88ba5c; --instance-size: {{#switch: {{{size\|sm}}}\|xs=16\|sm=32\|md=64\|lg=96\|xl=128}}px; --instance-inner-size: {{#switch: {{{size\|sm}}}\|xs=13\|sm=26\|md=52\|lg=78\|xl=104}}px;"><!--
	~~width~~: {{#~~switch: {{{~~size~~\|sm}}}\|xs=16\|sm=32\|md=64\|lg=96\|xl=128}}px;~~		--><!--
	~~height~~: {{#switch: {{{size\|sm}}}\|xs=16\|sm=32\|md=64\|lg=96\|xl=128}}px;
	~~border~~-~~radius: 50%;~~
	~~border~~: {{#switch: {{{size\|sm}}}\|xs=~~0.5~~\|sm=~~1.5~~\|md=3\|lg=4\|xl=5}}px
	~~solid {{#switch: {{{path\|}}}\|Notoriety=#88BA5C\|Empire=#D45642\|Seafaring=#5D98FF\|Wealth=#CB54AE\|#default=transparent}};~~
	~~line-height: 0~~;"><!--
	--~~><span style="display: inline-block;~~
	~~width: {{#switch: {{{size\|sm}}}\|xs=14.5\|sm=30\|md=59\|lg=88\|xl=118}}px;~~
	~~height: {{#switch: {{{size\|sm}}}\|xs=14.5\|sm=30\|md=59\|lg=88\|xl=118}}px;~~
	~~border-radius: 50%; overflow: hidden;~~
	~~border: {{#switch: {{{size\|sm}}}\|xs=0.5\|sm=1.5\|md=3\|lg=4\|xl=5}}px~~
	~~solid #e6ae56;"~~><!--
	-->[[File:{{{1}}}\|		-->[[File:{{{1}}}\|
	x{{#switch: {{{size\|sm}}}\|xs=15\|sm=~~29.5~~\|md=59\|lg=88\|xl=~~119~~}}px		x{{#switch: {{{size\|sm}}}\|xs=13\|sm=26\|md=52\|lg=78\|xl=104}}px
	]]~~</span>~~</span></includeonly><noinclude>		]]</span></includeonly><noinclude>

	Generates a gold circular border around the specified icon, mimicking how it appears on the Compass.		Generates a gold circular border around the specified icon, mimicking how it appears on the Compass.

76561197969631737: Generates a circular border around an icon with an optional Principle Path–colored highlight, as it appears on the Compass

2026-07-19T15:49:18Z

Generates a circular border around an icon with an optional Principle Path–colored highlight, as it appears on the Compass

New page

<includeonly><span style="display: inline-block;
width: {{#switch: {{{size|sm}}}|xs=16|sm=32|md=64|lg=96|xl=128}}px;
height: {{#switch: {{{size|sm}}}|xs=16|sm=32|md=64|lg=96|xl=128}}px;
border-radius: 50%;
border: {{#switch: {{{size|sm}}}|xs=0.5|sm=1.5|md=3|lg=4|xl=5}}px
solid {{#switch: {{{path|}}}|Notoriety=#88BA5C|Empire=#D45642|Seafaring=#5D98FF|Wealth=#CB54AE|#default=transparent}};
line-height: 0;"><span style="display: inline-block;
width: {{#switch: {{{size|sm}}}|xs=14.5|sm=30|md=59|lg=88|xl=118}}px;
height: {{#switch: {{{size|sm}}}|xs=14.5|sm=30|md=59|lg=88|xl=118}}px;
border-radius: 50%; overflow: hidden;
border: {{#switch: {{{size|sm}}}|xs=0.5|sm=1.5|md=3|lg=4|xl=5}}px
solid #e6ae56;">[[File:{{{1}}}|
x{{#switch: {{{size|sm}}}|xs=15|sm=29.5|md=59|lg=88|xl=119}}px
]]</span></span></includeonly><noinclude>

Generates a gold circular border around the specified icon, mimicking how it appears on the Compass.

== Usage ==

{|class=wikitable
! Parameter !! Purpose
|-
| filename || the filename, including the extension, of the icon to place inside the border
|-
| <code>path=</code> || an optional Principle Path to which the item is associated, for easier location by readers. May be omitted to skip the outside highlight. Use any of following values:
* Notoriety
* Empire
* Seafaring
* Wealth
|-
| <code>size=</code> || the size of the icon, from any of the standard sizes:
* <code>xs</code>
* <code>sm</code> - default
* <code>md</code>
* <code>lg</code>
* <code>xl</code>
|}

=== Examples ===

<pre>{{Compass icon|T ICO resource plank.png|path=Notoriety|size=xs}}</pre>
{{Compass icon|T ICO resource plank.png|path=Notoriety|size=xs}}

<pre>{{Compass icon|T ICO resource plank.png|path=Empire|size=sm}}</pre>
{{Compass icon|T ICO resource plank.png|path=Empire|size=sm}}

<pre>{{Compass icon|T ICO resource plank.png|path=Seafaring|size=md}}</pre>
{{Compass icon|T ICO resource plank.png|path=Seafaring|size=md}}

<pre>{{Compass icon|T ICO resource plank.png|path=Wealth|size=lg}}</pre>
{{Compass icon|T ICO resource plank.png|path=Wealth|size=lg}}

<pre>{{Compass icon|T ICO resource plank.png|size=xl}}</pre>
{{Compass icon|T ICO resource plank.png|size=xl}}

[[Category: Icon templates]]
</noinclude>