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: @@
-{{#if: {{{1|}}} | {{#switch: {{{1|}}}
+<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]]
-|doc={{#vardefine:icon|Doctag.png}}{{#vardefine:bg|#78787E}}{{#vardefine:iconbg|#9D9DA8}}{{#vardefine:textcolor|#C9C9D3}}
-|content={{#vardefine:icon|Contenttag.png}}{{#vardefine:tbg|#6E7174}}{{#vardefine:contenticonbg|#90969B}}{{#vardefine:textcolor|#C2C8CD}}
+== Purpose & Usage ==
-|step={{#vardefine:icon|Steptag.png}}{{#vardefine:bg|#737A77}}{{#vardefine:iconbg|#97A39E}}{{#vardefine:textcolor|#C5D1CC}}
+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.
-}}
-<div title="{{{3}}}" {{#ifeq:{{{4|}}}|-|class="tag disable"|class="tag"}} style="background-color:{{#var:bg}}; width:{{{2}}}px;">
+<pre>{{Tag|bg|bd|tx|text}}</pre>
-<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>
+== Examples ==
-</div>
+===Default Call===
-}}<noinclude>
+'''Code:'''
-<pre>
+<pre>some text {{Tag|text=TAG}} some text</pre>
-{{Tag|tag|width|bgcolor|border color|left bgcolor|text|text color}}
+'''Result:'''
-{{Tag|tag|width|text|enable}}
+some text {{Tag|text=TAG}} some text
-tag = doc, content, step
+<br>
-text = Text in right portion
+<hr>
-enable = blank for enable, - for disable
+<br>
-</pre>
+'''Code:'''
+<pre>some text {{Tag|bg=mpurple|bd=magent|tx=hl|text=TAG}} some text</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:'''
+some text {{Tag|bg=yellow|bd=purple|tx=dim|text=Long Tag}} some text
+== See Also ==
+<!--
+[[:RELATED TEMPLATE NAME AND ARGUMENTS]]
+-->
+None
 </noinclude>
-{{#css:
-.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;
-}
-.tag span {
-	font-weight: bold;
-	padding: 0;
-	margin: 0;
-}
-}}