Template:Tag: Difference between revisions

Latest revision as of 18:25, September 20, 2021

Purpose & Usage

Create tags to use as indicators where appropriate (DO NOT overuse this!). This template makes use of custom CSS classes to display theme-friendly colors. Reference the Site Color Pallet for CSS classes.

{{Tag|bg|bd|tx|text}}

Examples

Default Call

Code:

some text {{Tag|text=TAG}} some text

Result: some text TAG some text

Code:

some text {{Tag|bg=mpurple|bd=magent|tx=hl|text=TAG}} some text

Result: some text TAG some text

Code:

some text {{Tag|bg=yellow|bd=purple|tx=dim|text=Long Tag}} some text

Result: some text Long Tag some text

@@ Line 1: / Line 1: @@
-<includeonly>{{#css:
+<includeonly><span class="{{{bg|blue}}}bg {{{bd|yellow}}}bd {{{tx|hl}}}tx px-1" style="cursor:default; border-radius:2px; width:auto; border: 2px solid transparent; text-align:center; font-family: Montserrat,sans-serif!important">'''''{{{text}}}'''''</span></includeonly><noinclude>__NOTOC__ [[Category:Formatting Templates]]
-.tag {
-	margin: 0;
-	padding: 0;
-	height: 18px;
-	border: 1px solid #2B2B2B;
-}
-.tag.disable {
-	opacity: 0.5;
-}
-.tagicon {
-	float: left;
-	width: 20px;
-	height: 18px;
-	text-align: center;
-	border-right: 1px solid #2B2B2B;
-}
-.tagtext {
-	float: left;
-	padding: 0 2px;
-	line-height: 1.4em;
-	cursor: default;
-}
-.tag span {
-	font-weight: bold;
-	padding: 0;
-	margin: 0;
-}
-}}{{#if: {{{1|}}}|{{#switch: {{{1|}}}|doc={{#vardefine:icon|Doctag.png}}{{#vardefine:bg|#7F7B74}}{{#vardefine:iconbg|#A8A295}}{{#vardefine:textcolor|#D4CEC2}}|content={{#vardefine:icon|Contenttag.png}}{{#vardefine:bg|#6D717B}}{{#vardefine:iconbg|#8B92A2}}{{#vardefine:textcolor|#BFC5D0}}|step={{#vardefine:icon|Steptag.png}}{{#vardefine:bg|#606E6E}}{{#vardefine:iconbg|#7A9191}}{{#vardefine:textcolor|#B6C8C8}}}}<div {{#ifeq:{{{5|}}}|-|class="tag disable" title="{{{4}}}"|class="tag" title="{{{4}}}"}} style="background-color:{{#var:bg}}; width:{{{2}}}px;"><div class="tagicon" style="background-color:{{#var:iconbg}};">[[File:{{#var:icon}}|frameless|link=]]</div><div class="tagtext"><span style="color:{{#var:textcolor}};">{{{3}}}</span></div></div>}}</includeonly><noinclude>__NOTOC__[[Category:Formatting Templates]][[Category:STEP]]
 == Purpose & Usage ==
-Used on mod pages for flags.
+Create tags to use as indicators where appropriate (DO NOT overuse this!). This template makes use of custom CSS classes to display theme-friendly colors. Reference the [[Project:SiteColorPallet|Site Color Pallet]] for CSS classes.
-<pre>
-{{Tag|type|width|tagText|tooltip|[-]}}
+<pre>{{Tag|bg|bd|tx|text}}</pre>
-type = 'doc', 'content', 'step'
-width = CSS width specification
-text = Tag text
-tooltip = Short description for tooltip when mouse-over.
-[-] = blank for enable, - for disable
-</pre>
 == Examples ==
+===Default Call===
+'''Code:'''
+<pre>some text {{Tag|text=TAG}} some text</pre>
+'''Result:'''
+some text {{Tag|text=TAG}} some text
+<br>
+<hr>
+<br>
 '''Code:'''
-<pre>{{Tag|doc|125|DESCRIPTION|TestingToolTip|}}
+<pre>some text {{Tag|bg=mpurple|bd=magent|tx=hl|text=TAG}} some text</pre>
-{{Tag|content|125|SCRIPT|TestingToolTip|-}}</pre>
+'''Result:'''
+some text {{Tag|bg=mpurple|bd=magent|tx=hl|text=TAG}} some text
+<br>
+<hr>
+<br>'''Code:'''
+<pre>some text {{Tag|bg=yellow|bd=purple|tx=dim|text=Long Tag}} some text</pre>
 '''Result:'''
-{{Tag|doc|125|DESCRIPTION|TestingToolTip|}}
+some text {{Tag|bg=yellow|bd=purple|tx=dim|text=Long Tag}} some text
-{{Tag|content|125|SCRIPT|TestingToolTip|-}}
 == See Also ==
 <!--
-*[[:RELATED TEMPLATE NAME AND ARGUMENTS]]
+[[:RELATED TEMPLATE NAME AND ARGUMENTS]]
 -->
 None
 </noinclude>