Template:Note: Difference between revisions

Browse history interactively

(View all pending changes)

[checked revision]

[pending revision]

← Older edit

Content deleted Content added

VisualWikitext

Inline

Latest revision as of 16:20, 7 April 2026

Template documentation[view] [edit] [history] [purge]

This template is used on many pages and changes may be widely noticed. Test changes in the template's /sandbox or /testcases subpages, or in your own user subpage. Consider discussing changes on the talk page before implementing them.

This template uses TemplateStyles:

Template:Note/styles.css

Usage

{{Note|This is with a blue green background the default}}

Note:

This is with a blue green background the default

{{Note|This is with a better yellower background|reminder-yellow}}

Note:

This is with a better yellower background

{{Note|This is a brown info box the same as used on mediawiki|info}}

This is a brown info box the same as used on mediawiki

{{Note|This is a clean less intrusive info box|info-blue}}

This is a clean less intrusive info box

{{Note|Careful with this action, this is a caution by default in orange|caution}}

Caution:

Careful with this action, this is a caution by default in orange

{{Note|Careful with this action, this is a caution in red if you prefer|caution-red}}

Caution:

Careful with this action, this is a caution in red if you prefer

{{Note|A warning message!|warning}}

Warning:

A warning message!

{{Note||dragons}}

Here be Dragons!

{{Note|Stop, proceed with great caution|dragons|Dragons:}}

Dragons:

Stop, proceed with great caution

{{Note|This is a strong start to my story|elephant}}

This is a strong start to my story

{{Note|You know what is definitely not going to happen|crystalball}}

You know what is definitely not going to happen

{{Note|If I can get you laughing we will all be smarter|clown}}

If I can get you laughing we will all be smarter

{{Note|Let me load you up with expectations|backpack}}

Let me load you up with expectations

{{Note|There is one thing I can never tell you|tension}}

There is one thing I can never tell you

{{Note|Just wait for a long time while I tell you lots and lots and lots of unnecessary details|hourglass}}

Just wait for a long time while I tell you lots and lots and lots of unnecessary details

{{Note|Let me drop some clues for you to follow . . . |breadcrumbs}}

Let me drop some clues for you to follow . . .

Show a Note

Template parameters[Edit template data]
This template prefers inline formatting of parameters.
Parameter		Description	Type	Status
Note Text	`1`	no description Example Some of Einstein's Brain is un-accounted for..	String	required
Icon or Background Color	`2`	Optional Change the Icon or Background Color Example caution, warning, tip, info, info-blue, reminder-yellow, caution-red	String	optional
Option to change leading text	`3`	no description Example Note: Caution: or Warning:	String	optional
Option to change CSS Class	`4`	no description Example back-clear-blue or back-clear-black	String	optional

The above documentation is transcluded from Template:Note/doc.
Editors can experiment in this template's sandbox and testcases pages.
Add categories to the /doc subpage. Subpages of this template.

@@ Line 1: / Line 1: @@
-<onlyinclude><templatestyles src="Note/styles.css" />
+<includeonly><templatestyles src="Note/styles.css" />
 {{#switch: {{{2}}}
  | reminder-green =
-<div style="clear: both;"></div><div class="note {{{4|back-palegreen}}}">
+<div style="clear: both;"></div><div class="note {{{4|back-palegreen}}}"><div style="float: left">[[File:OOjs UI icon lightbulb-yellow.svg|30px]]</div><div style="min-height: 35px;">&nbsp;<div style="flex-grow:0;flex-shrink:0;"><strong>{{{3|Note: }}}</strong>&nbsp;&nbsp;</div><div>{{{1}}}</div></div></div>
-[[File:OOjs UI icon lightbulb-yellow.svg]] &nbsp;'''{{{3|Note: }}}''' {{{1}}}</div>
  | reminder-yellow =
-<div style="clear: both;"></div><div class="note {{{4|back-yellow}}}">
+<div style="clear: both;"></div><div class="note {{{4|back-yellow}}}"><div style="float: left">[[File:OOjs UI icon lightbulb-yellow.svg|30px]]</div><div style="min-height: 35px;">&nbsp;<div style="flex-grow:0;flex-shrink:0;"><strong>{{{3|Note: }}}</strong>&nbsp;&nbsp;</div><div>{{{1}}}</div></div></div>
-[[File:OOjs UI icon lightbulb-yellow.svg]] &nbsp;'''{{{3|Note: }}}''' {{{1}}}</div>
  | caution =
-<div style="clear: both;"></div><div class="note {{{4|back-orange}}}>
+<div style="clear: both;"></div><div class="note {{{4|back-orange}}}><div style="float: left">[[File:OOjs UI icon alert-warning.svg|30px]]</div><div style="min-height: 35px;">&nbsp;<div style="flex-grow:0;flex-shrink:0;"><strong>{{{3|Caution: }}}</strong>&nbsp;&nbsp;</div><div>{{{1}}}</div></div></div>
-[[File:OOjs UI icon alert-warning.svg]] &nbsp;'''{{{3|Caution: }}}''' {{{1}}}</div>
  | caution-red =
-<div style="clear: both;"></div><div class="note {{{4|back-red}}}>
+<div style="clear: both;"></div><div class="note {{{4|back-red}}}><div style="float: left">[[File:OOjs UI icon alert-destructive.svg|30px]]</div><div style="min-height: 35px;">&nbsp;<div style="flex-grow:0;flex-shrink:0;"><strong>{{{3|Caution: }}}</strong>&nbsp;&nbsp;</div><div>{{{1}}}</div></div></div>
-[[File:OOjs UI icon alert-destructive.svg]] &nbsp;'''{{{3|Caution: }}}''' {{{1}}}</div>
  | caution-orange =
-<div style="clear: both;"></div><div class="note {{{4|back-orange}}}>
+<div style="clear: both;"></div><div class="note {{{4|back-orange}}}><div style="float: left">[[File:OOjs UI icon alert-warning.svg|30px]]</div><div style="min-height: 35px;">&nbsp;<div style="flex-grow:0;flex-shrink:0;"><strong>{{{3|Caution: }}}</strong>&nbsp;&nbsp;</div><div>{{{1}}}</div></div></div>
-[[File:OOjs UI icon alert-warning.svg]] &nbsp;'''{{{3|Caution: }}}''' {{{1}}}</div>
  | tip =
-<div style="clear: both;"></div><div class="note {{{4|back-clear-blue}}}>
+<div style="clear: both;"></div><div class="note {{{4|back-clear-blue}}}><div style="float: left">[[File:Customer Service Icon.png||30px]]</div><div style="min-height: 35px;">&nbsp;<div style="flex-grow:0;flex-shrink:0;"><strong>{{{3|Tip: }}}</strong>&nbsp;&nbsp;</div><div>{{{1}}}</div></div></div>
-[[File:Customer Service Icon.png|32px]] &nbsp;'''{{{3|Tip: }}}''' {{{1}}}</div>
  | moved =
-<div style="clear: both;"></div><div class="note {{{4|back-clear-blue}}}>
+<div style="clear: both;"></div><div class="note {{{4|back-clear-blue}}}><div style="float: left">[[File:301redirect.png|100px]]</div><div style="min-height: 35px;">&nbsp;<div style="flex-grow:0;flex-shrink:0;"><strong>{{{3|Moved: }}}</strong>&nbsp;&nbsp;</div><div>{{{1}}}</div></div></div>
-[[File:301redirect.png|100px]] &nbsp;'''{{{3|Moved: }}}''' {{{1}}}</div>
  | warning =
-<div style="clear: both;"></div><div class="note {{{4|back-red}}}>
+<div style="clear: both;"></div><div class="note {{{4|back-red}}}><div style="float: left">[[File:OOjs_UI_icon_notice-destructive.svg|30px]]</div><div style="min-height: 35px;">&nbsp;<div style="flex-grow:0;flex-shrink:0;"><strong>{{{3|Warning: }}}</strong>&nbsp;&nbsp;</div><div>{{{1}}}</div></div></div>
+ | dragons =
-[[File:OOjs_UI_icon_notice-destructive.svg]] &nbsp;'''{{{3|Warning: }}}''' {{{1}}}</div>
+<div style="clear: both;"></div><div class="note {{{4|back-red}}}><div style="float: left">[[File:Dragon.webp|100px]]</div><div style="min-height: 100px;">&nbsp;<div style="flex-grow:0;flex-shrink:0;"><strong>{{{3|Here be Dragons!}}}</strong>&nbsp;&nbsp;</div><div>{{{1}}}</div></div></div>
  | info =
-<div style="clear: both;"></div><div class="note {{{4|back-brown}}}>
+<div style="clear: both;"></div><div class="note {{{4|back-brown}}}><div style="float: left">[[File:OOjs_UI_icon_reference_20_ac6600.svg|30px]]</div><div style="min-height: 35px;">&nbsp;<div style="flex-grow:0;flex-shrink:0;"><strong>{{{3|}}}</strong>&nbsp;&nbsp;</div><div>{{{1}}}</div></div></div>
-[[File:OOjs_UI_icon_reference_20_ac6600.svg]] &nbsp; {{{1}}}</div>
  | info-blue =
-<div style="clear: both;"></div><div class="note {{{4|back-clear-blue}}}>
+<div style="clear: both;"></div><div class="note {{{4|back-clear-blue}}}><div style="float: left">[[File:OOjs UI icon reference-progressive.svg|30px]]</div><div style="min-height: 35px;">&nbsp;<div style="flex-grow:0;flex-shrink:0;"><strong>{{{3|}}}</strong>&nbsp;&nbsp;{{{1}}}</div></div></div>
-[[File:OOjs UI icon reference-progressive.svg]] &nbsp; {{{1}}}</div>
  | legend =
-<div style="clear: both;"></div><div class="note {{{4|back-lightgrey}}}>
+<div style="clear: both;"></div><div class="note {{{4|back-lightgrey}}}><div style="float: left">[[File:OOjs UI icon info.svg.png|35px]]</div><div style="min-height: 35px;">&nbsp;<div style="flex-grow:0;flex-shrink:0;"><strong>{{{3|Legend: }}}</strong>&nbsp;&nbsp;</div><div>{{{1}}}</div></div></div>
-[[File:OOjs UI icon info.svg.png|35px]] &nbsp;'''{{{3|Legend: }}}''' {{{1}}}</div>
  | legend-clear =
-<div style="clear: both;"></div><div class="note {{{4|back-clear-black}}}>
+<div style="clear: both;"></div><div class="note {{{4|back-clear-black}}}><div style="float: left">[[File:OOjs UI icon info.svg.png|35px]]</div><div style="min-height: 35px;">&nbsp;<div style="flex-grow:0;flex-shrink:0;"><strong>{{{3|Legend: }}}</strong>&nbsp;&nbsp;</div><div>{{{1}}}</div></div></div>
-[[File:OOjs UI icon info.svg.png|35px]] &nbsp;'''{{{3|Legend: }}}''' {{{1}}}</div>
  | legend-blue =
-<div style="clear: both;"></div><div class="note {{{4|back-clear-blue}}}>
+<div style="clear: both;"></div><div class="note {{{4|back-clear-blue}}}><div style="float: left">[[File:OOjs UI icon info-progressive.svg.png|35px]]</div><div style="min-height: 35px;">&nbsp;<div style="flex-grow:0;flex-shrink:0;"><strong>{{{3|Legend: }}}</strong>&nbsp;&nbsp;</div><div>{{{1}}}</div></div></div>
+ | elephant =
-[[File:OOjs UI icon info-progressive.svg.png|35px]] &nbsp;'''{{{3|Legend: }}}''' {{{1}}}</div>
+<div style="clear: both;"></div><div class="note {{{4|back-pink}}}><div style="float: left">[[File:pink-elephant.png|35px]]</div><div style="min-height: 35px;">&nbsp;<div style="flex-grow:0;flex-shrink:0;"><strong>{{{3|}}}</strong>&nbsp;&nbsp;{{{1}}}</div></div></div>
+ | clown =
+<div style="clear: both;"></div><div class="note {{{4|back-cyan-sky-boarder}}}><div style="float: left">[[File:clown-icon.png|35px]]</div><div style="min-height: 35px;">&nbsp;<div style="flex-grow:0;flex-shrink:0;"><strong>{{{3|}}}</strong>&nbsp;&nbsp;</div><div>{{{1}}}</div></div></div>
+ | backpack =
+<div style="clear: both;"></div><div class="note {{{4|back-yellow-teal-boarder}}}><div style="float: left">[[File:backpack-icon.jpg|60px]]</div><div style="min-height: 60px;">&nbsp;<div style="flex-grow:0;flex-shrink:0;"><strong>{{{3|&nbsp;}}}</strong>&nbsp;&nbsp;</div><div>{{{1}}}</div></div></div>
+ | tension =
+<div style="clear: both;"></div><div class="note {{{4|back-red}}}><div style="float: left">[[File:tension-icon.png|35px]]</div><div style="min-height: 35px;">&nbsp;<div style="flex-grow:0;flex-shrink:0;"><strong>{{{3|}}}</strong>&nbsp;&nbsp;</div><div>{{{1}}}</div></div></div>
+ | crystalball =
+<div style="clear: both;"></div><div class="note {{{4|back-lavender-purple-boarder}}}><div style="float: left">[[File:crystal-ball-icon.png|35px]]</div><div style="min-height: 35px;">&nbsp;<div style="flex-grow:0;flex-shrink:0;"><strong>{{{3|}}}</strong>&nbsp;&nbsp;</div><div>{{{1}}}</div></div></div>
+ | hourglass =
+<div style="clear: both;"></div><div class="note {{{4|back-green-darkgreen-boarder}}}><div style="float: left">[[File:Hourglass-icon.svg|35px]]</div><div style="min-height: 35px;">&nbsp;<div style="flex-grow:0;flex-shrink:0;"><strong>{{{3|}}}</strong>&nbsp;&nbsp;</div><div>{{{1}}}</div></div></div>
+ | breadcrumbs =
+<div style="clear: both;"></div><div class="note {{{4|back-clear-black}}}><div style="float: left">[[File:breadcrumb-trail.png|100px]]</div><div style="min-height: 35px;">&nbsp;<div style="flex-grow:0;flex-shrink:0;"><strong>{{{3|}}}</strong>&nbsp;&nbsp;</div><div>{{{1}}}</div></div></div>
  | #default =
-<div style="clear: both;"></div><div class="note {{{4|back-palegreen}}}">
+<div style="clear: both;"></div><div class="note {{{4|back-palegreen}}}"><div style="float: left">[[File:OOjs UI icon lightbulb-yellow.svg|30px]]</div><div style="min-height: 35px;">&nbsp;<div style="flex-grow:0;flex-shrink:0;"><strong>{{{3|Note: }}}</strong>&nbsp;&nbsp;</div><div>{{{1}}}</div></div></div>
+}}</includeonly><noinclude>
-[[File:OOjs UI icon lightbulb-yellow.svg]] &nbsp;'''{{{3|Note: }}}''' {{{1}}}</div>
+{{documentation}}</noinclude>
-}}</onlyinclude>
-<noinclude>
-== Usage ==
-<pre>{{Note|This is with a blue green background the default}}</pre>
-{{Note|This is with a blue green background the default}}
-<pre>{{Note|This is with a better yellower background|reminder-yellow}}</pre>
-{{Note|This is with a better yellower background|reminder-yellow}}
-<pre>{{Note|This is a brown info box the same as used on mediawiki|info}}</pre>
-{{Note|This is a brown info box the same as used on mediawiki|info}}
-<pre>{{Note|This is a clean less intrusive info box|info-blue}}</pre>
-{{Note|This is a clean less intrusive info box|info-blue}}
-<pre>{{Note|Careful with this action, this is a caution by default in orange|caution}}</pre>
-{{Note|Careful with this action, this is a caution by default in orange|caution}}
-<pre>{{Note|Careful with this action, this is a caution in red if you prefer|caution-red}}</pre>
-{{Note|Careful with this action, this is a caution in red if you prefer|caution-red}}
-<pre>{{Note|A warning message!|warning}}</pre>
-{{Note|A warning message!|warning}}
-<pre>{{Note|This a a tech support helpful suggestion or tip . . .|tip}}</pre>
-{{Note|This a a tech support helpful suggestion or tip . . .|tip}}
-<templatedata>
-{
-	"params": {
-		"1": {
-			"label": "Note Text",
-			"example": "Some of Einstein's Brain is un-accounted for..",
-			"type": "string",
-			"required": true
-		},
-		"2": {
-                        "label": "Icon or Background Color",
-			"description": "Optional Change the Icon or Background Color",
-			"example": "caution, warning, tip, info, info-blue, reminder-yellow, caution-red",
-			"type": "string"
-		}
-	},
-	"description": "Show a Note",
-	"paramOrder": [
-		"1",
-		"2"
-	],
-	"format": "inline"
-}
-</templatedata>[[Category:AutoDumpContentFromCommons]]</noinclude>