Template:Notice: Difference between revisions
mNo edit summary |
m Changed asterisk in "Prevent Dismissal" section to a superscript number. |
||
| (108 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
<includeonly> | <includeonly> | ||
{{#if: {{{clear|}}} | <div style="clear: both;"></div> }} | {{#if: {{{clear|}}} | <div style="clear: both;"></div> }}<!-- | ||
<div {{#if:{{{id|}}}|id="{{{id}}}"}} class="notice hide-for-print {{{class|curved}}} {{#if:{{{dismiss|}}}|{{#ifeq:{{{dismiss}}}|no||dismissible | --><div {{#if:{{{id|}}}|id="{{{id}}}"}} class="notice hide-for-print {{{class|curved}}} {{#if:{{{dismiss|}}}|{{#ifeq:{{{dismiss}}}|no||maybe-dismissible}}|maybe-dismissible}}" style="width: {{#if:{{{width|}}}|{{{width}}}|65%}};<!-- | ||
{{#switch:{{{align|center}}}|left=margin: 0.3em 0.3em 0.3em 0;|right=margin: 0.3em 0 0.3em auto;|#default=margin: 0.3em auto;}}; | -->{{#switch:{{{align|center}}}|left=margin: 0.3em 0.3em 0.3em 0;|right=margin: 0.3em 0 0.3em auto;|#default=margin: 0.3em auto;}};<!-- | ||
padding: 0.5em; text-align: center; font-size: {{{font-size|1em}}}; {{{style}}}; | -->padding: 0.5em; text-align: center; font-size: {{{font-size|1em}}}; {{{style}}};<!-- | ||
{{#if: {{{color|}}} | background-color: {{{color}}}; {{#if: {{{border|}}} | border: {{{border}}}; }} | border: 1px solid | -->{{#if: {{{color|}}} | background-color: {{{color}}}; {{#if: {{{border|}}} | border: {{{border}}}; }} | background-color: #EAEBEF; {{#if: {{{border|}}} | border: {{{border}}}; | border: 1px solid #A2A7AF; }}}}"> | ||
"> | <div style="position: relative;"><!-- | ||
<div style="position: relative;"> | -->{{#if:{{{dismiss|}}}|{{#ifeq:{{{dismiss}}}|no||<div class="dismiss-button user-only-dismiss" style="position: absolute; top: -1.05rem; right: -0.25rem; cursor: pointer; padding: 5px; font-size: 21px;">×</div>}}|<div class="dismiss-button user-only-dismiss" style="position: absolute; top: -1.05rem; right: -0.25rem; cursor: pointer; padding: 5px; font-size: 21px;">×</div>}}<!-- | ||
{{#if:{{{dismiss|}}}|{{#ifeq:{{{dismiss}}}|no||<div class="dismiss-button" style="position: absolute; top: - | -->{{#if:{{{header|}}}|<div class="notice-main-text" style="font-weight:bold;">{{{header}}}</div>}}<!-- | ||
{{#if:{{{ | --><div class="{{#if:{{{header|}}}|hide-for-multinotice|notice-main-text}}" style="white-space: normal;">{{{text}}}</div><!-- | ||
<div class="{{#if:{{{ | --></div><!-- | ||
</div> | --></div> | ||
</div> | |||
</includeonly><noinclude> | </includeonly><noinclude> | ||
== Description == | |||
This template is a parent template that helps build [[:Help:Templates#Notices|Notice Templates]]. It is not intended to be used on its own, but rather to be used to help build other [[:Template:Notice#Derivative Templates|derivative templates]]. | |||
== | == Usage == | ||
{| style="width: 100%; text-align: left; margin: auto;" class="wikitable" | |||
{{{ | |- | ||
! colspan="2" style="text-align: center;" | <span style="font-size: 125%;">Text Only</span><br><div style="text-align: left;"><span style="font-weight: normal;">The only required parameter for this template is <code>text=</code>, which will populate the template with your input.</span></div> | |||
{{ | |- | ||
! width=38%|You Type | |||
{{ | !You Get | ||
|- style="text-align: center;" | |||
== | | <pre>{{notice|text=This is a notice.}}</pre> | ||
| {{notice|text=This is a notice.}} | |||
|- | |||
! colspan="2" style="text-align: center;" | <span style="font-size: 125%;">Add a Bold Header</span><br><div style="text-align: left;"><span style="font-weight: normal;">You have the option to also add a bold header by passing <code>header=</code>.<br><span style="font-size: 90%;"><br>'''Note:''' If you wish for the regular text to be bold, surround your <code>text=</code> input with triple apostrophes. (<code><nowiki>'''INPUT'''</nowiki></code>)</span></span></div> | |||
|- | |||
<code>< | ! width=30%|You Type | ||
!You Get | |||
| | |- style="text-align: left;" | ||
| | | <pre>{{notice | ||
}} | |header=This is a header. | ||
</ | |text=This is the regular text. | ||
}}</pre> | |||
| {{notice|header=This is a header.|text=This is the regular text.}} | |||
|- | |||
{{notice|style=background-color: | ! colspan="2" style="text-align: center;" | <span style="font-size: 125%;">Adjust Width</span><br><div style="text-align: left;"><span style="font-weight: normal;">By default, the width of the notice will be 65% the width of the page or container where it is used. You can adjust this value by passing <code>width=</code> and defining the width as either a percentage (preferred), e.g., <code>80%</code>, or a pixel width, e.g., <code>300px</code>.</span></div> | ||
| | |- | ||
| | ! width=30%|You Type | ||
}} | !You Get | ||
|- style="text-align: left;" | |||
| <pre>{{notice | |||
|text=This notice's width is 100%. | |||
|width=100% | |||
< | }}</pre> | ||
| {{notice|text=This notice's width is 100%.|width=100%}}{{notice|text=This notice's width is 50%.|width=50%}} | |||
| | |- | ||
}} | ! colspan="2" style="text-align: center;" | <span style="font-size: 125%;">Adjust Alignment</span><br><div style="text-align: left;"><span style="font-weight: normal;">By default, the notice will be centered on the page or within the container where it is used. You can adjust its alignment by passing <code>align=</code> with either the value <code>LEFT</code> or <code>RIGHT</code>.</span></div> | ||
</ | |- | ||
! width=30%|You Type | |||
!You Get | |||
| | |- style="text-align: left;" | ||
| <pre>{{notice | |||
|text=A left/right aligned notice. | |||
|align=LEFT/RIGHT | |||
}}</pre> | |||
| {{notice|text=A left aligned notice.|align=left}}{{notice|text=A right aligned notice.|align=right}} | |||
|- | |||
! colspan="2" style="text-align: center;" | <span style="font-size: 125%;">Adjust Color</span><br><div style="text-align: left;"><span style="font-weight: normal;">By default, the notice will have a light gray background with a gray border. You can adjust its background color by passing <code>color=</code> with a color value in one of three forms:<br>1. A [https://htmlcolorcodes.com/color-names/ Named HTML Color] (e.g., <code>red</code>)<br>2. A [https://www.color-hex.com hex color code] (e.g., <code>#ff0000</code>)<br>3. An [https://rgbcolorpicker.com RGB/RGBA value] (e.g., <code>rgb(255, 0, 0)</code>)<br><br>Adding a value not following one of the forms above will cause the background color to be transparent. Please select a shade of color light enough that the black text remains legible.<span style="font-size: 90%;"><br><br>'''Note:''' By adding a color value, the border is removed.<span></span></div> | |||
|- | |||
! width=30%|You Type | |||
!You Get | |||
|- style="text-align: left;" | |||
| <pre>{{notice | |||
|text=A light green notice. | |||
|color=#bdcca1 | |||
}}</pre> | |||
| {{notice|text=A light green notice.|color=#bdcca1}} | |||
|- | |||
! colspan="2" style="text-align: center;" | <span style="font-size: 125%;">Add a Border</span><br><div style="text-align: left;"><span style="font-weight: normal;">'''It is preferred to have notices display without a border''', however you can add a border by passing <code>border=</code>. Your input should follow the standard HTML border format of <code>SIZE PATTERN COLOR</code>, e.g., <code>1px solid blue</code>.<br><span style="font-size: 90%;"><br>'''Note:''' You can find further details on HTML borders [https://coding-help.fandom.com/wiki/Borders here].</span></span></div> | |||
|- | |||
! width=30%|You Type | |||
!You Get | |||
|- style="text-align: left;" | |||
| <pre>{{notice | |||
|text=A notice with a blue border. | |||
|border=1px solid blue | |||
}}</pre> | |||
| {{notice|text=A notice with a blue border.|border=1px solid blue}} | |||
|- | |||
! colspan="2" style="text-align: center;" | <span style="font-size: 125%;">Prevent Dismissal</span><br><div style="text-align: left;"><span style="font-weight: normal;">By default, notices have an "'''x'''" in the top right corner that, if clicked, will make the notice disappear.<sup>1</sup> You can pass <code>dismiss=no</code> to hide the "'''x'''", preventing the option to hide the notice. To unhide any notices you may have previously dismissed, select "Reset Notices" from the Tools menu in the upper, right hand corner of the page.<br><br>1. <span style="font-size: 90%;">Only users who are logged in have the ability to dismiss notices. Anonymous users (i.e., not logged in) cannot dismiss notices, regardless if <code>dismiss=no</code> is passed.</span></span></div> | |||
|- | |||
! width=30%|You Type | |||
!You Get | |||
|- style="text-align: left;" | |||
| <pre>{{notice | |||
|text=This notice is not dismissible. | |||
|dismiss=no | |dismiss=no | ||
}}</pre> | |||
| {{notice|text=This notice is not dismissible.|dismiss=no}} | |||
|- | |||
! colspan="2" style="text-align: center;" | <span style="font-size: 125%;">Clear Other Elements</span><br><div style="text-align: left;"><span style="font-weight: normal;">On very rare occasions, a notice may overlap with other elements present on the page. You can prevent this by passing <code>clear=yes</code>. '''This parameter should only be used as a last resort as passing it may give unexpected or undesired results. Instead, try adjusting using the width or alignment parameters or adding a line break between the notice template and the other element(s).'''</span></div> | |||
|- | |||
! width=30%|You Type | |||
!You Get | |||
|- | |||
| colspan="2" style="text-align: center;" | '''Without using <code>clear=yes</code>.''' | |||
|- style="text-align: left;" | |||
| <pre>{{quote}}{{notice | |||
|text=This notice is not using "clear=yes". | |||
}}</pre> | |||
| {{quote | |||
|A thing someone said. | |||
|Who Said It | |||
|width=250px | |||
|align=left | |||
}}{{notice | |||
|text=This notice is '''not''' using <code>clear=yes</code>. | |||
}} | }} | ||
|- | |||
:''' | | colspan="2" style="text-align: center;" | '''Using <code>clear=yes</code>.''' | ||
|- style="text-align: left;" | |||
{{ | | <pre>{{quote}}{{notice | ||
| | |text=Using "clear=yes". | ||
| | |clear=yes | ||
| | }}</pre> | ||
| {{quote | |||
|A thing someone said. | |||
|Who Said It | |||
|width=250px | |||
|align=left | |align=left | ||
}}{{notice|text=Using <code>clear=yes</code>.|clear=yes}} | |||
}}{{ | |} | ||
| | |||
| | |||
| | |||
== | == Derivative Templates == | ||
{{for|Special:WhatLinksHere/{{FULLPAGENAME}}|a full listing|here}} | {{for|Special:WhatLinksHere/{{FULLPAGENAME}}|a full listing|here}} | ||
{{Special:WhatLinksHere/{{FULLPAGENAME}}|namespace=10}} | {{Special:WhatLinksHere/{{FULLPAGENAME}}|namespace=10}} | ||
[[Category: Notices]] | [[Category: Notices]] | ||