Template:Notice: Difference between revisions

Latest revision as of 16:01, 19 January 2024

Template documentationedit documentation

Use this meta template to build standardized and mobile-friendly notices.

Usage

Basic

The following wikitext:

{{Notice|Text of the notice.}}

will produce:

While the following:

{{Notice|Title of the notice.|Text of the notice.}}

will produce:

Full

The following wikitext:

{{Notice
| border-color = #aaf
| image = Closed Book Icon.svg
| image-size = 80px
| image-link = Appropedia:Books
| image-alt = Appropedia book
| logo = Appropedia.png
| logo-size = 80px
| logo-link = Welcome to Appropedia
| logo-alt = Appropedia logo
| title = Title of the notice.
| text = Text of the notice.
| foot = Foot of the notice.
}}

will produce:

Template data

Use this meta template to build notices.

Template parameters
This template prefers block formatting of parameters.
Parameter		Description	Type	Status
Title	`title` `1`	Title of the notice. Example This page needs additional references.	String	suggested
Text	`text` `2`	Text of the notice Example You can help Appropedia by editing this page and adding some references.	Content	suggested
Foot	`foot`	Small text at the bottom of the notice. Example Remove this notice after references have been added.	String	optional
Image	`image`	Main image of the notice Default Commons-emblem-notice.svg Example Appropedia.png	File	optional
Image size	`image-size`	Size of the image Default x40px Example 80px	String	optional
Image link	`image-link`	Page to link from the image Example Welcome to Appropedia	Page name	optional
Image alternative text	`image-alt`	Alternative text of the image, for screen readers and vision-impaired people Example Appropedia logo	String	optional
Logo	`logo`	Logo of the notice Example Appropedia.png	File	optional
Logo size	`logo-size`	Size of the logo Default x40px Example 80px	String	optional
Logo link	`logo-link`	Page to link from the logo Example Appropedia:Books	Page name	optional
Logo alternative text	`logo-alt`	Alternative text of the logo, for screen readers and vision-impaired people Example Appropedia logo	String	optional
Border color	`border-color`	Color of the border Example red	String	optional
Class	`class`	Extra CSS class of the notice Example custom-class	String	optional
Category	`category`	Name of the category (without the "Category:" prefix) where to add all content pages with this notice (only works for pages in the main namespace) Example Solar cookers	String	optional

@@ Line 1: / Line 1: @@
-{| cellspacing="0" align="center" cellpadding="5" style="margin-bottom: {{{margin-bottom|1em}}}; width: {{{width}}}; background-color: {{{background-color}}}; border: 2px solid {{{border-color}}}; text-align: center; border-radius:{{{radius}}}px;"
+<div class="template-notice noprint navigation-not-searchable {{{class|}}}" style="border-color: {{{border-color|}}}">
-| style="padding: 4pt; line-height: 1.25em;" |
+	<div class="template-notice-image">{{#if:{{{image|}}}|{{#if:{{EXISTS|File:{{PAGENAME:{{{image}}}}}}}|[[File:{{PAGENAME:{{{image}}}}}|{{{image-size|x40px}}}|link={{{image-link|}}}|alt={{{image-alt|}}}]]|{{{image}}}}}|[[File:Commons-emblem-notice.svg|{{{image-size|x40px}}}|link={{{image-link|}}}|alt={{{image-alt|}}}]]}}</div>
-|-
+	<div class="template-notice-content">{{#if:{{{title|{{{2|}}}}}}|
-!<big><big>{{{headline}}}</big></big>
+		<span class="template-notice-title">{{{title|{{{1}}}}}}</span>{{#if:{{{text|{{{2|}}}}}}|
-|-
+		<span class="template-notice-text">{{{text|{{{2}}}}}}</span>}}|
-|{{{content}}}
+		<div class="template-notice-text">{{{text|{{{1}}}}}}</div>}}{{#if:{{{foot|}}}|
+		<div class="template-notice-foot">{{{foot}}}</div>}}{{#if:{{{title|}}}|{{#if:{{{text|}}}{{{foot|}}}|
-|} <noinclude>
+		<span class="template-notice-more">Read more...</span>}}}}
+	</div>{{#if:{{{logo|}}}|
-==Usage==
+	<div class="template-notice-logo">{{#if:{{EXISTS|File:{{PAGENAME:{{{logo}}}}}}}|[[File:{{PAGENAME:{{{logo}}}}}|{{{logo-size|x40px}}}|link={{{logo-link|}}}|alt={{{logo-alt|}}}]]|{{{logo}}}}}</div>}}
+</div><usescript src="TemplateNotice.js" /><templatestyles src="Notice/styles.css" />{{#if:{{{category|}}}|{{#if:{{NAMESPACE}}||[[Category:{{{category}}}]]}}}}<noinclude>{{Documentation}}</noinclude>
-The [[Help:Notices]] page has detailed help (including for the {{tl|slim notice}} option). The following is a brief version.
-Use this template to create one-off notices, or use to create a notice template for a specific purpose.
-E.g. for a box with square corners
-<pre>{{notice
-|width=80%
-|background-color=Wheat
-|border-color=SaddleBrown
-|radius=0
-|headline=Blah blah
-|content=Yabba dabba doo
-}}
-</pre>
-creates:
-{{notice
-|width=80%
-|background-color=Wheat
-|border-color=SaddleBrown
-|radius=0
-|headline=Blah blah
-|content=Yabba dabba doo
-}}
-You can also create a box with rounded corners, e.g.:
-<pre>{{notice
-|width=80%
-|background-color=#E3E4FA
-|border-color=#993399
-|radius=10
-|headline=Hello!
-|content=Join us - why not?
-}}
-</pre>
-creates:
-{{notice
-|width=80%
-|background-color=#E3E4FA
-|border-color=#993399
-|radius=10
-|headline=Hello!
-|content=Join us - why not?
-}}
-(If you leave out the "radius" term, it seems to default to a box with square corners, but it seems like good practice to always use the parameters, as in other cases it breaks the template.)
-== Choosing colors ==
-Choose your colors from a "palette" such as the table at [[Wikipedia:Web colors#X11 color names]].
-Note that you can use hex codes for colors such as #F3F2E0, as in this example:
-<pre>{{notice
-|width=80%
-|background-color=#F3F2E0
-|border-color=#B5B380
-|headline=Blah blah
-|content=Yabba dabba doo}}
-</pre>
-See [[Help:Notices]] for more examples of colors.
-== See also ==
-*[[Help:Notices]]
-[[Category:Notice templates]]
-</noinclude>