Template:Notice: Difference between revisions

From The Reed and Rite
mNo edit summary
mNo edit summary
Line 28: Line 28:
| {{notice|text=This is a notice.}}
| {{notice|text=This is a notice.}}
|-  
|-  
! colspan="2" style="text-align: center;" | <span style="font-size: 115%;">Add a Heading</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%;">'''Note:''' If you wish for the main text to be bold, surround your <code>text=</code> input with triple apostrophes. (<code><nowiki>'''INPUT'''</nowiki></code>)</span></span></div>
! colspan="2" style="text-align: center;" | <span style="font-size: 115%;">Add a Heading</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 main text to be bold, surround your <code>text=</code> input with triple apostrophes. (<code><nowiki>'''INPUT'''</nowiki></code>)</span></span></div>
|-
|-
! width=30%|You Type
! width=30%|You Type
Line 50: Line 50:
| {{notice|text=This notice's width is 100%.|width=100%}}{{notice|text=This notice's width is 50%.|width=50%}}
| {{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: 115%;">Adjust Alignment</span><br><span style="font-weight: normal;">By default, the notice will be centered on the page or in the container where it is used.<br>You can adjust its alignment by passing <code>align=</code> with either the value <code>LEFT</code> or <code>RIGHT</code>. </span>
! colspan="2" style="text-align: center;" | <span style="font-size: 115%;">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 in 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
! width=30%|You Type
Line 61: Line 61:
| {{notice|text=A left aligned notice.|align=left}}{{notice|text=A right aligned notice.|align=right}}
| {{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: 115%;">Adjust Color</span><br><span style="font-weight: normal;">By default, the notice will have a light gray background with a gray border.<br>You can adjust its background color by passing <code>color=</code> with a color value in one of three forms:<br><div style="text-align: left; display: inline-block;">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>)<div><span style="font-size: 90%;">'''Note:''' By adding a color value, the border is removed.<span></span>
! colspan="2" style="text-align: center;" | <span style="font-size: 115%;">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>)<span style="font-size: 90%;"><br><br>'''Note:''' By adding a color value, the border is removed.<span></span></div>
|-
|-
! width=30%|You Type
! width=30%|You Type
Line 72: Line 72:
| {{notice|text=A light green notice.|color=#bdcca1}}
| {{notice|text=A light green notice.|color=#bdcca1}}
|-  
|-  
! colspan="2" style="text-align: center;" | <span style="font-size: 115%;">Add a Border</span><br><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>.<br>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%;">'''Note:''' You can find further details on HTML borders [https://coding-help.fandom.com/wiki/Borders here].</span></span>
! colspan="2" style="text-align: center;" | <span style="font-size: 115%;">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
! width=30%|You Type
Line 83: Line 83:
| {{notice|text=A notice with a blue border.|border=1px solid blue}}
| {{notice|text=A notice with a blue border.|border=1px solid blue}}
|-  
|-  
! colspan="2" style="text-align: center;" | <span style="font-size: 115%;">Prevent Dismissal</span><br><span style="font-weight: normal;">By default, notices have an "x" in the top right corner that, if clicked, will make the notice disappear.<span style="font-size: 115%;">'''*'''</span><br>You can pass <code>dismiss=no</code> to hide the "x", preventing the option to hide the notice.<br>To unhide any notices you may have previously dismissed, select "Reset Notices" from the Tools menu.<br><br><span style="font-size: 115%;">'''*'''</span><span style="font-size: 90%;">Only users who are logged in have the ability to dismiss notices.<br>Anonymous users (i.e., not logged in) cannot dismiss notices, regardless if <code>dismiss=no</code> is passed.</span></span>
! colspan="2" style="text-align: center;" | <span style="font-size: 115%;">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.<span style="font-size: 115%;">'''*'''</span> 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.<br><br><span style="font-size: 115%;">'''*'''</span><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
! width=30%|You Type
Line 94: Line 94:
| {{notice|text=This notice is not dismissible.|dismiss=no}}
| {{notice|text=This notice is not dismissible.|dismiss=no}}
|-  
|-  
! colspan="2" style="text-align: center;" | <span style="font-size: 115%;">Clear Other Elements</span><br><span style="font-weight: normal;">Explanation</span>
! colspan="2" style="text-align: center;" | <span style="font-size: 115%;">Clear Other Elements</span><br><div style="text-align: left;"><span style="font-weight: normal;">Explanation</span></div>
|-
|-
! width=30%|You Type
! width=30%|You Type

Revision as of 23:26, 24 April 2025

Description

This template is a parent template that helps build Notice Templates. It is not intended to be used on its own, but rather to be used to help build other derivative templates.

Usage

Text Only
The only required parameter for this template is text=, which will populate the template with your input.
You Type You Get
{{notice
|text=This is a notice.
}}
×
This is a notice.
Add a Heading
You have the option to also add a bold header by passing header=.

Note: If you wish for the main text to be bold, surround your text= input with triple apostrophes. ('''INPUT''')
You Type You Get
{{notice
|header=This is a header.
|text=This is the regular text.
}}
×
This is a header.
This is the regular text.
Adjust Width
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 width= and defining the width as either a percentage (e.g., 80%) or a pixel width (e.g., 300px).
You Type You Get
{{notice
|text=This notice's width is 100%.
|width=100%
}}
×
This notice's width is 100%.
×
This notice's width is 50%.
Adjust Alignment
By default, the notice will be centered on the page or in the container where it is used. You can adjust its alignment by passing align= with either the value LEFT or RIGHT.
You Type You Get
{{notice
|text=A left/right aligned notice.
|align=LEFT/RIGHT
}}
×
A left aligned notice.
×
A right aligned notice.
Adjust Color
By default, the notice will have a light gray background with a gray border. You can adjust its background color by passing color= with a color value in one of three forms:
1. A Named HTML Color (e.g., red)
2. A hex color code (e.g., #ff0000 )
3. An RGB/RGBA value (e.g., rgb(255, 0, 0))

Note: By adding a color value, the border is removed.
You Type You Get
{{notice
|text=A light green notice.
|color=#bdcca1
}}
×
A light green notice.
Add a Border
It is preferred to have notices display without a border, however you can add a border by passing border=. Your input should follow the standard HTML border format of SIZE PATTERN COLOR, e.g., 1px solid blue.

Note: You can find further details on HTML borders here.
You Type You Get
{{notice
|text=A notice with a blue border.
|border=1px solid blue
}}
×
A notice with a blue border.
Prevent Dismissal
By default, notices have an "x" in the top right corner that, if clicked, will make the notice disappear.* You can pass dismiss=no 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.

*Only users who are logged in have the ability to dismiss notices. Anonymous users (i.e., not logged in) cannot dismiss notices, regardless if dismiss=no is passed.
You Type You Get
{{notice
|text=This notice is not dismissible.
|dismiss=no
}}
This notice is not dismissible.
Clear Other Elements
Explanation
You Type You Get
Without using clear=yes.
{{quote}}{{notice
|text=This notice is not using "clear=yes".
}}
“

A thing someone said. ”

—Who Said It
×
This notice is not using clear=yes.
Using clear=yes.
{{quote}}{{notice
|text=This notice is using "clear=yes".
|clear=yes
}}
“

A thing someone said. ”

—Who Said It
×
This notice is using clear=yes.

Derivative Templates