Template:Message/box/doc: Difference between revisions

From MozillaWiki
Jump to navigation Jump to search
(Created page with "{{Documentation subpage}} __NOTOC__ ==Usage== {{tl|message/box}} displays a custom made message box. ==Parameters== {| class="wikitable" |- ! Parameter !! Description |- | <c...")
 
(→‎class: Corr.)
 
(24 intermediate revisions by the same user not shown)
Line 1: Line 1:
{{Documentation subpage}}
{{Documentation subpage}}
__NOTOC__
==Usage==
==Usage==
{{tl|message/box}} displays a custom made message box.
{{tl|message/box}} displays a custom made message box, just as {{tl|message}}, but with some added options:
* message title
* maximum box width
* image float
* custom image alt text
* custom image link (default: no link)
* text alignment
* text direction
* Mozilla colours available for the background and border
* Mozilla colours available for the foreground


The two default colours for the background and the border, [[Template:Color/Mozilla/sand_start|''sand start'']] and [[Template:Color/Mozilla/sand|''sand'']] respectively, are set in accordance with the [https://www.mozilla.org/en-US/styleguide/identity/mozilla/color/ Mozilla style guide]. These two and the remaining Mozilla colours have been given their own values for easy use.
__TOC__
==Parameters==
==Parameters==
{| class="wikitable"
There are 14 parameters in total, 1 unnamed and 13 named, none of which is required for the template to work. Some parameters will affect other parameters or CSS properties if entered, or if set to a specific value. Read the descriptions of the parameters below to learn about these cases.
 
;<big>List of parameters</big>
{| class="wikitable" style="background-color: white;"
|-
! colspan="4" | Template parameters
|-
! Element !! Parameter !! Description !! Default value
|-
| rowspan="5" | Box || {{code|class}} || CSS class amendment || {{samp|''null''}}
|-
| {{code|bgcolor}} || Background colour || style="background-color: #f6f4ec;" | {{samp|#f6f4ec}}
|-
| {{code|bdcolor}} || Border colour || style="background-color: #d7d3c8;" | {{samp|#d7d3c8}}
|-
| {{code|width}} || Box width || {{samp|none}}
|-
|-
! Parameter !! Description
| {{code|style}} || Additional CSS styling || {{samp|''null''}}
|-
|-
| <code>class</code> || Custom CSS class amendment
| rowspan="5" | Image || {{code|image}} || Image shown in the box || {{samp|Idea.png}} [[File:Idea.png|25px|alt=|link=]]
|-
|-
| <code>bgcolor</code> || Background colour
| {{code|imgwidth}} || Image width || {{samp|35}} (px)
|-
|-
| <code>bdcolor</code> || Border colour
| {{code|float}} || Image float || {{samp|left}}
|-
|-
| <code>fgcolor</code> || Foreground (text) colour
| {{code|imgalt}} || Image alt text || {{samp|''image file name''}}
|-
|-
| <code>image</code> || Image to be shown in the box
| {{code|imglink}} || Image link || {{samp|''empty''}}
|-
|-
| <code>imgwidth</code> || Image width (in pixels)
| rowspan="5" | Text || {{code|1}} ''(unnamed)'' || Message text || {{samp|''null''}}
|-
|-
| <code>width</code> || Box width (in percent of available width)
| {{code|title}} || Messagebox title (header) || {{samp|''null''}}
|-
|-
| <code>style</code> || Custom CSS styling
| {{code|fgcolor}} || Foreground (text) colour || {{samp|black}}
|-
| {{code|talign}} || Text alignment || {{samp|left}}
|-
| {{code|tdir}} || Text direction || {{samp|ltr}}
|}
|}


;<big>Copy-paste templates</big>
;<big>Copy-paste templates</big>
{| class="wikitable"
{| class="wikitable" style="background-color: white;"
|-
! Size !! Template code
|-
| Basic || {{tlc|message/box|''text''|title{{=}}}}
|-
| Common use || {{tlc|message/box|''text''|title{{=}}|bgcolor{{=}}|bdcolor{{=}}|width{{=}}|image{{=}}|float{{=}}}}}}
|-
| All parameters || {{tlc|message/box|''text''|title{{=}}|class{{=}}|bgcolor{{=}}|bdcolor{{=}}|width{{=}}|style{{=}}|image{{=}}|imgwidth{{=}}|float{{=}}|imgalt{{=}}|imglink{{=}}|fgcolor{{=}}|talign{{=}}|tdir{{=}}}}
|}
 
===Box parameters===
====class====
;<big>Class</big>
A custom [[Wikipedia:Cascading Style Sheets|CSS]] class to append to the box's default class {{samp|messagebox}}.
 
If you, for exampl0e, set the value to {{samp|german}}, the resulting {{tag|div|o}} attribute will be {{tag|div|o|params=class="messagebox german"}}.
 
The default value is {{samp|''null''}}.
 
;<big>Usage</big>
* {{tlc|message/box|class{{=}}class name}}
 
====bgcolor====
;<big>Background colour</big>
The background colour of the box, defined as a Mozilla colour value (see the table below), a CSS colour name (e.g. {{samp|white}}) or a hexadecimal colour code (e.g. {{samp|#ffffff}} for white).
 
The default value is {{samp|#f6f4ec}}&nbsp; (Mozilla colour "[[Template:Color/Mozilla/sand_start|''sand (gradient start)'']]").
 
;<big>Usage</big>
* {{tlc|message/box|bgcolor{{=}}colour code/value}}
 
;<big>Available values</big>
{| class="wikitable" style="background-color: white;"
|-
! style="width:1.75em;" | !! Value !! Hex !! Comment
|-
| style="background-color: #f6f4ec;" | || {{samp|lmozsand}} || {{samp|#f6f4ec}} || '''Default'''
|-
| style="background-color: #d7d3c8;" | || {{samp|mozsand}} || {{samp|#d7d3c8}} ||
|-
| style="background-color: #ea3b28;" | || {{samp|lmozred}} || {{samp|#ea3b28}} ||
|-
| style="background-color: #c13832;" | || {{samp|mozred}} ||{{samp|#c13832}} ||
|-
| style="background-color: #4d4e53;" | || {{samp|mozcoal}} || {{samp|#4d4e53}} ||
|-
| style="text-align: center;" | HEX || Any hex colour value || {{samp|#RRGGBB}} ||
|-
| style="text-align: center;" | CSS || Any CSS colour name ||  ||
|}
 
====bdcolor====
;<big>Border colour</big>
The border colour of the box, defined as a Mozilla colour value (see the table below), a CSS colour name (e.g. {{samp|black}}) or a hexadecimal colour code (e.g. {{samp|#000000}} for black).
 
The default value is {{samp|#d7d3c8}}&nbsp; (Mozilla colour "[[Template:Color/Mozilla/sand|''sand'']]").
 
;<big>Usage</big>
* {{tlc|message/box|bdcolor{{=}}colour code/value}}
 
;<big>Available values</big>
{| class="wikitable" style="background-color: white;"
|-
! style="width:1.75em;" | !! Value !! Hex !! Comment
|-
| style="background-color: #f6f4ec;" | || {{samp|lmozsand}} || {{samp|#f6f4ec}} ||
|-
| style="background-color: #d7d3c8;" | || {{samp|mozsand}} || {{samp|#d7d3c8}} || '''Default'''
|-
| style="background-color: #ea3b28;" | || {{samp|lmozred}} || {{samp|#ea3b28}} ||
|-
| style="background-color: #c13832;" | || {{samp|mozred}} ||{{samp|#c13832}} ||
|-
| style="background-color: #4d4e53;" | || {{samp|mozcoal}} || {{samp|#4d4e53}} ||
|-
| style="text-align: center;" | HEX || Any hex colour value || {{samp|#RRGGBB}} ||
|-
| style="text-align: center;" | CSS || Any CSS colour name ||  ||
|}
 
====width====
;<big>Box width</big>
You can define the maximum width of the message box in pixels, or as a percentage of the available width.
 
The default value is {{samp|none}}.
 
;<big>Comment</big>
* When defining the message box width, enter the numerical value and the unit ({{samp|%}} or {{samp|px}}) as one word, i.e without any spaces, e.g. {{samp|60%}} or {{samp|350px}}.
 
;<big>Usage</big>
* {{tlc|message/box|width{{=}}numerical value and unit}}
 
====style====
;<big>CSS styling</big>
Optional CSS properties with corresponding values. This parameter specifies the style used by the entire message box.
 
The default value is {{samp|''null''}}.
 
;<big>Comments</big>
* Properties have to be enetered without quotation marks ({{samp|"…"}}) but with the ending semicolon ({{samp|;}}).
* Don't define properties that already are regulated by other parameters in this template.
 
;<big>Usage</big>
* {{tlc|message/box|style{{=}}prop1:value1; prop2:value2;}}
 
===Image parameters===
====image====
;<big>Image</big>
You can choose a custom image to be used in the template, by using the ''image'' parameter. By default, the image is displayed on the left side inside the box, to the left of the text.
 
The default image is {{samp|Idea.png}} ([[:File:Idea.png]]).
 
;<big>Comments</big>
* The image must previously have been uploaded to MozillaWiki. See {{category|Icons}} or the MozillaWiki [[Special:ListFiles|file list]].
* When defining an image, don't include the namespace ({{samp|File:}}). That is inserted automatically.
 
;<big>Usage</big>
* {{tlc|message/box|image{{=}}name.ext}}
 
====imgwidth====
;<big>Image width</big>
The width of the used image (in pixels), defined as a numerical value.
 
The default value is {{samp|35}}.
 
;<big>Comments</big>
* When defining the image width, don't include the unit ({{samp|px}}). That is inserted automatically.
* The image width affects the margin of the box, allowing it to float without getting covered by text.
 
;<big>Usage</big>
* {{tlc|message/box|imgwidth{{=}}numerical value}}
 
====float====
;<big>Image float</big>
You can change the image's float to floating on the right-hand side, or to no float at all.
 
The default value is {{samp|left}}.
 
;<big>Comment</big>
* Setting the float value to {{samp|right}} affects the left- and right-hand margins of the box, shifting them to give the image the space it needs on the right (so it doesn't get covered by text), and allowing extra space for the text on the left.
 
;<big>Usage</big>
* {{tlc|message/box|float{{=}}float value}}
 
;<big>Available values</big>
{| class="wikitable" style="background-color: white;"
|-
|-
! Size !! Code
! Value !! style="width:15em;" | Comment
|-
|-
| Basic || <code><nowiki>{{message/box|''text''}}</nowiki></code>
| {{samp|left}} || <div style="float:left;">[[File:Idea.png|25px|alt=|link=]]</div> <div>'''Default'''</div>
|-
|-
| Common use || <code><nowiki>{{message/box|''text'' |bgcolor= |bdcolor= |image= |width= }}</nowiki></code>
| {{samp|right}} || <div style="float:right;">[[File:Idea.png|25px|alt=|link=]]</div> <div>Image floats to the right</div>
|-
|-
| All parameters || <code><nowiki>{{message/box|''text'' |class= |bgcolor= |bdcolor= |fgcolor= |image= |imgwidth= |width= |style= }}</nowiki></code>
| {{samp|none}} || <div style="float:none;">[[File:Idea.png|25px|alt=|link=]]</div> <div>No floating, image treated <br>as a separate block</div>
|}
|}
===Mandatory parameter===
====Text====
;<big>1</big>
Custom text string, wiki-formatting can be used. The parameter is unnamed, so no parameter name needs to be entered.


Note:
====imgalt====
* If this parameter is left out, its name in the template code, "<code><nowiki>{{{1}}}</nowiki></code>", will be displayed.
;<big>Image alt text</big>
By default, the image's alt text is the same as the image's name, e.g. "{{samp|Idea.png}}" for the default image. But it is possible to specify a custom alt text using this parameter.


;Usage:
;<big>Usage</big>
* <code><nowiki>{{message/box|''text''}}</nowiki></code>
* {{tlc|message/box|imgalt{{=}}custom text}}


===Optional parameters===
====imglink====
====Class====
;<big>Image link</big>
;<big>class</big>
By default, the image link is disabled, but it is possible to specify a custom link with this parameter.
A custom [[Wikipedia:Cascading Style Sheets|CSS]] class to append to the box's default class <code>messagebox</code>, e.g. <code>messagebox ''small''</code>.


;Usage:
The default value is {{samp|''null''}}.
* <code><nowiki>{{message/box|1|class=class name}}</nowiki></code>


====Colours====
;<big>Comments</big>
;<big>bgcolor</big>
* When entering an internal wikilink, don't include the brackets ({{samp|<nowiki>[[…]]</nowiki>}}). Example: {{samp|L10n:Home Page}}
The background colour of the box, defined as a CSS colour name (e.g. <code>white</code>) or a hexadecimal colour code, e.g. <code>#ffffff</code> for white. The default colour is <code>#f9f6b7</code>.
* When entering an URL, include the protocol ({{samp|http://}}, {{samp|https://}}, etc.). Example: {{samp|<nowiki>https://www.mozilla.org/sv-SE/</nowiki>}}


;Usage:
;<big>Usage</big>
* <code><nowiki>{{message/box|1|bgcolor=CSS/hex colour}}</nowiki></code>
* {{tlc|message/box|imglink{{=}}wikilink/URL}}


;<big>bdcolor</big>
===Text parameters===
The border colour of the box, defined as a CSS colour name (e.g. <code>black</code>) or a hexadecimal colour code, e.g. <code>#000000</code> for black. The default colour is <code>#c4c295</code>.
====1 (unnamed)====
;<big>Message text</big>
Custom text string, wiki-formatting can be used. The parameter is unnamed, so no parameter name needs to be entered.


;Usage:
The default value is {{samp|''null''}}, but without defining this parameter, i.e. including a message, the template is more or less useless as a message box.
* <code><nowiki>{{message/box|1|bdcolor=CSS/hex colour}}</nowiki></code>


;<big>fgcolor</big>
;<big>Usage</big>
The foreground colour of the box (i.e. text colour), defined as a CSS colour name (e.g. <code>black</code>) or a hexadecimal colour code (e.g. <code>#000000</code> for black). The default colour is <code>black</code>.
* {{tlc|message/box|custom text}}


;Usage:
====title====
* <code><nowiki>{{message/box|1|fgcolor=CSS/hex colour}}</nowiki></code>
;<big>Message title</big>
Custom text string, output in bold and larger text-size. The message text will be displayed one line beneath the title.


====Image====
The default value is {{samp|''null''}}.
;<big>image</big>
You can choose a specific image to use for the template by using the ''image'' parameter. The image is displayed on the left side in the box, to the left of the text. The default image is <code>Idea.png</code> ([[:File:Idea.png]]).


Notes:
;<big>Usage</big>
* When defining an image, don't include the namespace (<code>File:</code> or <code>Image:</code>). That is inserted automatically.
* {{tlc|message/box|title{{=}}custom text}}
* The image's alt text is the same as the image's name. Thus, the default is "<code>Idea.png</code>".


;Usage:
====fgcolor====
* <code><nowiki>{{message/box|1|image=name.ext}}</nowiki></code>
;<big>Foreground colour</big>
The foreground colour of the box (i.e. text colour), defined as a Mozilla colour value (see the table below), a CSS colour name (e.g. {{samp|black}}) or a hexadecimal colour code (e.g. {{samp|#000000}} for black).


;<big>imgwidth</big>
The default colour is {{samp|black}} (i.e the CSS name value).
The width of the used image (in pixels). The default value is <code>35</code>.


Note:
;<big>Usage</big>
* When defining the image width, don't include the unit (<code>px</code> or <code>pixels</code>). That is inserted automatically.
* {{tlc|message/box|fgcolor{{=}}colour code/value}}


;Usage:
;<big>Available values</big>
* <code><nowiki>{{message/box|1|imgwidth=number value}}</nowiki></code>
{| class="wikitable" style="background-color: white;"
|-
! style="width:1.75em;" | !! Value !! Hex
|-
| style="background-color: #f6f4ec;" | || {{samp|lmozsand}} || {{samp|#f6f4ec}}
|-
| style="background-color: #d7d3c8;" | || {{samp|mozsand}} || {{samp|#d7d3c8}}
|-
| style="background-color: #ea3b28;" | || {{samp|lmozred}} || {{samp|#ea3b28}}
|-
| style="background-color: #c13832;" | || {{samp|mozred}} ||{{samp|#c13832}}
|-
| style="background-color: #4d4e53;" | || {{samp|mozcoal}} || {{samp|#4d4e53}}
|-
| style="text-align: center;" | HEX || Any hex colour value || {{samp|#RRGGBB}}
|-
| style="text-align: center;" | CSS || Any CSS colour name ||
|}
 
====talign====
;<big>Text alignment</big>
The alignment of the text, defined using CSS values.
 
The default value is {{samp|left}}.
 
;<big>Usage</big>
* {{tlc|message/box|talign{{=}}alignment value}}
 
;<big>Available values</big>
{| class="wikitable" style="background-color: white;"
|-
! Value !! style="width:15em;" | Comment
|-
| {{samp|left}} || style="text-align:left;" | '''Default'''
|-
| {{samp|right}} || style="text-align:right;" | Right-aligned
|-
| {{samp|center}} || style="text-align:center;" | Center-aligned
|}


====Box width====
====tdir====
;<big>width</big>
;<big>Text direction</big>
You can define the maximum width of the message box (in percent of the available width). The default value is <code>100</code>.
The direction of the text, defined using CSS values.


Note:
The default value is {{samp|ltr}}.
* When defining the message box width, don't include the unit (<code>%</code>). That is inserted automatically.


;Usage:
;<big>Comments</big>
* <code><nowiki>{{message/box|1|width=number value}}</nowiki></code>
* Only use this parameter if you need to enter a message in a language, in which written text runs from the right to the left, e.g. Arabic, Persian or Hebrew.
* If you use this parameter, '''do not''' also use the parameter {{para|talign}}! It is preset for {{para|tdir|rtl}}.
** Setting the direction value to {{samp|rtl}} will impose the following property change:
**# {{para|talign}}: the text will be set to {{samp|right}}, making the text right-aligned.


====CSS styling====
;<big>Usage</big>
;<big>style</big>
* {{tlc|message/box|tdir{{=}}direction value}}
Optional CSS properties with corresponding values may be defined, without quotation marks <code>" "</code> but with the ending semicolons <code>;</code>. The parameter specifies the style used by the entire message box.


;Usage:
;<big>Available values</big>
* <code><nowiki>{{message/box|1|style=prop1:value1; prop2:value2;}}</nowiki></code>
{| class="wikitable" style="background-color: white;"
|-
! Value !! style="width:15em;" | Comment
|-
| {{samp|ltr}} || style="text-align:left; direction:ltr;" | '''Default'''
|-
| {{samp|rtl}} || style="text-align:right; direction:rtl;" | {{bdi|كتب النص من اليمين إلى اليسار}}
|}


==Examples==
==Examples==
===Correct use===
===Correct use===
{| class="wikitable"
{| class="wikitable" style="background-color: white;"
|-
! colspan="3" | <h4>General</h4>
|-
! Parameter !! What you write !! What you see
|-
| No parameters || {{tlc|message/box}} || {{message/box}}
|-
| colspan="3" |
|-
! colspan="3" | <h4>Box</h4>
|-
|-
! Parameter !! What you write !! What you see
! Parameter !! What you write !! What you see
|-
|-
| <code>1</code> || <code><nowiki>{{message/box|You ''can'' '''use''' <sup>wiki</sup> <big>markup</big>}}</nowiki></code> || {{message/box|You ''can'' '''use''' <sup>wiki</sup> <big>markup</big>}}
| {{code|class}} || {{tlc|message/box|Class set to {{samp|messagebox text}}|class{{=}}text}} || {{message/box|Class set to {{samp|messagebox text}}|class=text}}
|-
|-
| <code>class</code> || <code><nowiki>{{message/box|Custom text|class=text}}</nowiki></code> || {{message/box|Custom text|class=text}}
| rowspan="3" | {{code|bgcolor}} || {{tlc|message/box|CSS colour name|bgcolor{{=}}magenta}} || {{message/box|CSS colour name|bgcolor=magenta}}
|-
|-
| rowspan="2" | <code>bgcolor</code> || <code><nowiki>{{message/box|Custom text|bgcolor=white}}</nowiki></code> || {{message/box|Custom text|bgcolor=white}}
| {{tlc|message/box|Hex colour code|bgcolor{{=}}#FF00FF}} || {{message/box|Hex colour code|bgcolor=#FF00FF}}
|-
|-
| <code><nowiki>{{message/box|Custom text|bgcolor=#ffffff}}</nowiki></code> || {{message/box|Custom text|bgcolor=#ffffff}}
| {{tlc|message/box|Mozilla colour value|bgcolor{{=}}mozsand}} || {{message/box|Mozilla colour value|bgcolor=mozsand}}
|-
|-
| rowspan="2" | <code>bdcolor</code> || <code><nowiki>Custom text|bdcolor=black}}</nowiki></code> || {{message/box|Custom text|bdcolor=black}}
| rowspan="3" | {{code|bdcolor}} || {{tlc|message/box|CSS colour name|bdcolor{{=}}magenta}} || {{message/box|CSS colour name|bdcolor=magenta}}
|-
|-
| <code><nowiki>{{message/box|Custom text|bdcolor=#000000}}</nowiki></code> || {{message/box|Custom text|bdcolor=#000000}}
| {{tlc|message/box|Hex colour code|bdcolor{{=}}#FF00FF}} || {{message/box|Hex colour code|bdcolor=#FF00FF}}
|-
|-
| rowspan="2" | <code>fgcolor</code> || <code><nowiki>{{message/box|Custom text|fgcolor=green}}</nowiki></code> || {{message/box|Custom text|fgcolor=green}}
| {{tlc|message/box|Mozilla colour value|bdcolor{{=}}mozcoal}} || {{message/box|Mozilla colour value|bdcolor=mozcoal}}
|-
|-
| <code><nowiki>{{message/box|Custom text|fgcolor=#008000}}</nowiki></code> || {{message/box|Custom text|fgcolor=#008000}}
| rowspan="2" | {{code|width}} || {{tlc|message/box|Percentage|width{{=}}45%}} || {{message/box|Percentage|width=45%}}
|-
|-
| <code>image</code> || <code><nowiki>{{message/box|Custom text|image=Green check.png}}</nowiki></code> || {{message/box|Custom text|image=Green check.png}}
| {{tlc|message/box|Pixels|width{{=}}97px}} || {{message/box|Pixels|width=97px}}
|-
|-
| <code>imgwidth</code> || <code><nowiki>{{message/box|Custom text|image=Green check.png|imgwidth=75}}</nowiki></code> || {{message/box|Custom text|image=Green check.png|imgwidth=75}}
| {{code|style}} || {{tlc|message/box|Styled box|style{{=}}text-decoration:overline;font-family: fantasy, cursive, Serif;height: 75px;}} || {{message/box|Styled box|style=text-decoration:overline;font-family: fantasy, cursive, Serif;height: 75px;}}
|-
|-
| <code>width</code> || <code><nowiki>{{message/box|Custom text|width=25}}</nowiki></code> || {{message/box|Custom text|width=25}}
| colspan="3" |
|-
|-
| <code>style</code> || <code><nowiki>{{message/box|Custom text|style=text-align:right;}}</nowiki></code> || {{message/box|Custom text|style=text-align:right;}}
! colspan="3" | <h4>Image</h4>
|}
|-
 
! Parameter !! What you write !! What you see
===Incorrect use===
|-
{| class="wikitable"
| {{code|image}} || {{tlc|message/box|Custom image|image{{=}}Green check.png}} || {{message/box|Custom image|image=Green check.png}}
|-
| {{code|imgwidth}} || {{tlc|message/box|Larger image|image{{=}}Green check.png|imgwidth{{=}}75}} || {{message/box|Larger image|image=Green check.png|imgwidth=75}}
|-
| rowspan="2" | {{code|float}} || {{tlc|message/box|Floating to the right|float{{=}}right}} || {{message/box|Floating to the right|float=right}}
|-
| {{tlc|message/box|Not floating|float{{=}}none}} || {{message/box|Not floating|float=none}}
|-
| {{code|imgalt}} || {{tlc|message/box|&amp;larr; Alt text set to "{{samp|Olle}}"|imgalt{{=}}Olle}} || {{message/box|&larr; Alt text set to "{{samp|Olle}}"|imgalt=Olle}}
|-
| rowspan="2" | {{code|imglink}} || {{tlc|message/box|&amp;larr; Internal wikilink|imglink{{=}}L10n:Teams:sv-SE/en}} || {{message/box|&larr; Internal wikilink|imglink=L10n:Teams:sv-SE/en}}
|-
| {{tlc|message/box|&amp;larr; URL|imglink{{=}}{{nowiki|http://www.strindbergandhelium.com/}}}} || {{message/box|&larr; URL|imglink=http://www.strindbergandhelium.com/}}
|-
| colspan="3" |
|-
! colspan="3" | <h4>Text</h4>
|-
! Parameter !! What you write !! style="width:300px;" | What you see
|-
| {{code|1}} || {{tlc|message/box|{{nowiki|You ''can'' '''use''' <sup>wiki</sup> <big>markup</big>}}}} || {{message/box|You ''can'' '''use''' <sup>wiki</sup> <big>markup</big>}}
|-
| {{code|title}} || {{tlc|message/box|title{{=}}This is the message title|This is the message text}} || {{message/box|title=This is the message title|This is the message text}}
|-
| rowspan="3" | {{code|fgcolor}} || {{tlc|message/box|CSS colour name|fgcolor{{=}}magenta}} || {{message/box|CSS colour name|fgcolor=magenta}}
|-
| {{tlc|message/box|Hex colour code|fgcolor{{=}}#FF00FF}} || {{message/box|Hex colour code|fgcolor=#FF00FF}}
|-
| {{tlc|message/box|Mozilla colour value|fgcolor{{=}}mozred}} || {{message/box|Mozilla colour value|fgcolor=mozred}}
|-
| rowspan="2" | {{code|talign}} || {{tlc|message/box|Right-aligned text|talign{{=}}right}} || {{message/box|Right-aligned text|talign=right}}
|-
| {{tlc|message/box|Centered text|talign{{=}}center}} || {{message/box|Centered text|talign=center}}
|-
|-
! Example case !! What you write !! What you see (error)
| rowspan="2" | {{code|tdir}} || {{tlc|message/box|متن خود را|tdir{{=}}rtl}} || {{message/box|متن خود را|tdir=rtl}}
|-
|-
| No&nbsp;parameter || <code><nowiki>{{message/box}}</nowiki></code> || {{message/box}}
| {{tlc|message/box|متن خود را|tdir{{=}}rtl|float{{=}}right}} || {{message/box|متن خود را|tdir=rtl|float=right}}
|}
|}


==See also==
==See also==
* {{tl|message}} – the same as <code><nowiki>{{message/box}}</nowiki></code>, minus the option to define the width of the box and some other tweaks.
* {{tl|message}} – the same as {{tlc|message/box}}, minus the option to define the width of the box and some other tweaks.
* {{tl|admon}} – four types of message boxes for various situations, based upon the template <code><nowiki>{{message}}</nowiki></code>.
* {{tl|admon}} – four types of message boxes for various situations, based upon the template {{tlf|message}}.
* {{tl|label}} – strong message box for incredibly important messages. Use only if absolutely necessary.
* {{tl|label}} – strong message box for incredibly important messages. Use only if absolutely necessary.


Latest revision as of 20:32, 29 January 2015

Edit-copy green.svg
This is a documentation subpage for Template:Message/box.
It contains usage information, categories and other content that is not part of the original template page.

Usage

{{message/box}} displays a custom made message box, just as {{message}}, but with some added options:

  • message title
  • maximum box width
  • image float
  • custom image alt text
  • custom image link (default: no link)
  • text alignment
  • text direction
  • Mozilla colours available for the background and border
  • Mozilla colours available for the foreground

The two default colours for the background and the border, sand start and sand respectively, are set in accordance with the Mozilla style guide. These two and the remaining Mozilla colours have been given their own values for easy use.

Parameters

There are 14 parameters in total, 1 unnamed and 13 named, none of which is required for the template to work. Some parameters will affect other parameters or CSS properties if entered, or if set to a specific value. Read the descriptions of the parameters below to learn about these cases.

List of parameters
Template parameters
Element Parameter Description Default value
Box class CSS class amendment null
bgcolor Background colour #f6f4ec
bdcolor Border colour #d7d3c8
width Box width none
style Additional CSS styling null
Image image Image shown in the box Idea.png
imgwidth Image width 35 (px)
float Image float left
imgalt Image alt text image file name
imglink Image link empty
Text 1 (unnamed) Message text null
title Messagebox title (header) null
fgcolor Foreground (text) colour black
talign Text alignment left
tdir Text direction ltr
Copy-paste templates
Size Template code
Basic {{message/box|text|title=}}
Common use {{message/box|text|title=|bgcolor=|bdcolor=|width=|image=|float=}}}}
All parameters {{message/box|text|title=|class=|bgcolor=|bdcolor=|width=|style=|image=|imgwidth=|float=|imgalt=}}

Box parameters

class

Class

A custom CSS class to append to the box's default class messagebox.

If you, for exampl0e, set the value to german, the resulting <div> attribute will be <div class="messagebox german">.

The default value is null.

Usage
  • {{message/box|class=class name}}

bgcolor

Background colour

The background colour of the box, defined as a Mozilla colour value (see the table below), a CSS colour name (e.g. white) or a hexadecimal colour code (e.g. #ffffff for white).

The default value is #f6f4ec  (Mozilla colour "sand (gradient start)").

Usage
  • {{message/box|bgcolor=colour code/value}}
Available values
Value Hex Comment
lmozsand #f6f4ec Default
mozsand #d7d3c8
lmozred #ea3b28
mozred #c13832
mozcoal #4d4e53
HEX Any hex colour value #RRGGBB
CSS Any CSS colour name

bdcolor

Border colour

The border colour of the box, defined as a Mozilla colour value (see the table below), a CSS colour name (e.g. black) or a hexadecimal colour code (e.g. #000000 for black).

The default value is #d7d3c8  (Mozilla colour "sand").

Usage
  • {{message/box|bdcolor=colour code/value}}
Available values
Value Hex Comment
lmozsand #f6f4ec
mozsand #d7d3c8 Default
lmozred #ea3b28
mozred #c13832
mozcoal #4d4e53
HEX Any hex colour value #RRGGBB
CSS Any CSS colour name

width

Box width

You can define the maximum width of the message box in pixels, or as a percentage of the available width.

The default value is none.

Comment
  • When defining the message box width, enter the numerical value and the unit (% or px) as one word, i.e without any spaces, e.g. 60% or 350px.
Usage
  • {{message/box|width=numerical value and unit}}

style

CSS styling

Optional CSS properties with corresponding values. This parameter specifies the style used by the entire message box.

The default value is null.

Comments
  • Properties have to be enetered without quotation marks ("…") but with the ending semicolon (;).
  • Don't define properties that already are regulated by other parameters in this template.
Usage
  • {{message/box|style=prop1:value1; prop2:value2;}}

Image parameters

image

Image

You can choose a custom image to be used in the template, by using the image parameter. By default, the image is displayed on the left side inside the box, to the left of the text.

The default image is Idea.png (File:Idea.png).

Comments
  • The image must previously have been uploaded to MozillaWiki. See Category:Icons or the MozillaWiki file list.
  • When defining an image, don't include the namespace (File:). That is inserted automatically.
Usage
  • {{message/box|image=name.ext}}

imgwidth

Image width

The width of the used image (in pixels), defined as a numerical value.

The default value is 35.

Comments
  • When defining the image width, don't include the unit (px). That is inserted automatically.
  • The image width affects the margin of the box, allowing it to float without getting covered by text.
Usage
  • {{message/box|imgwidth=numerical value}}

float

Image float

You can change the image's float to floating on the right-hand side, or to no float at all.

The default value is left.

Comment
  • Setting the float value to right affects the left- and right-hand margins of the box, shifting them to give the image the space it needs on the right (so it doesn't get covered by text), and allowing extra space for the text on the left.
Usage
  • {{message/box|float=float value}}
Available values
Value Comment
left
Default
right
Image floats to the right
none
No floating, image treated
as a separate block

imgalt

Image alt text

By default, the image's alt text is the same as the image's name, e.g. "Idea.png" for the default image. But it is possible to specify a custom alt text using this parameter.

Usage
  • {{message/box|imgalt=custom text}}

imglink

Image link

By default, the image link is disabled, but it is possible to specify a custom link with this parameter.

The default value is null.

Comments
  • When entering an internal wikilink, don't include the brackets ([[…]]). Example: L10n:Home Page
  • When entering an URL, include the protocol (http://, https://, etc.). Example: https://www.mozilla.org/sv-SE/
Usage
  • {{message/box|imglink=wikilink/URL}}

Text parameters

1 (unnamed)

Message text

Custom text string, wiki-formatting can be used. The parameter is unnamed, so no parameter name needs to be entered.

The default value is null, but without defining this parameter, i.e. including a message, the template is more or less useless as a message box.

Usage
  • {{message/box|custom text}}

title

Message title

Custom text string, output in bold and larger text-size. The message text will be displayed one line beneath the title.

The default value is null.

Usage
  • {{message/box|title=custom text}}

fgcolor

Foreground colour

The foreground colour of the box (i.e. text colour), defined as a Mozilla colour value (see the table below), a CSS colour name (e.g. black) or a hexadecimal colour code (e.g. #000000 for black).

The default colour is black (i.e the CSS name value).

Usage
  • {{message/box|fgcolor=colour code/value}}
Available values
Value Hex
lmozsand #f6f4ec
mozsand #d7d3c8
lmozred #ea3b28
mozred #c13832
mozcoal #4d4e53
HEX Any hex colour value #RRGGBB
CSS Any CSS colour name

talign

Text alignment

The alignment of the text, defined using CSS values.

The default value is left.

Usage
  • {{message/box|talign=alignment value}}
Available values
Value Comment
left Default
right Right-aligned
center Center-aligned

tdir

Text direction

The direction of the text, defined using CSS values.

The default value is ltr.

Comments
  • Only use this parameter if you need to enter a message in a language, in which written text runs from the right to the left, e.g. Arabic, Persian or Hebrew.
  • If you use this parameter, do not also use the parameter |talign! It is preset for |tdir=rtl.
    • Setting the direction value to rtl will impose the following property change:
      1. |talign: the text will be set to right, making the text right-aligned.
Usage
  • {{message/box|tdir=direction value}}
Available values
Value Comment
ltr Default
rtl كتب النص من اليمين إلى اليسار

Examples

Correct use

General

Parameter What you write What you see
No parameters {{message/box}}
Idea.png

Box

Parameter What you write What you see
class {{message/box|Class set to messagebox text|class=text}}
Idea.png
Class set to messagebox text
bgcolor {{message/box|CSS colour name|bgcolor=magenta}}
Idea.png
CSS colour name
{{message/box|Hex colour code|bgcolor=#FF00FF}}
Idea.png
Hex colour code
{{message/box|Mozilla colour value|bgcolor=mozsand}}
Idea.png
Mozilla colour value
bdcolor {{message/box|CSS colour name|bdcolor=magenta}}
Idea.png
CSS colour name
{{message/box|Hex colour code|bdcolor=#FF00FF}}
Idea.png
Hex colour code
{{message/box|Mozilla colour value|bdcolor=mozcoal}}
Idea.png
Mozilla colour value
width {{message/box|Percentage|width=45%}}
Idea.png
Percentage
{{message/box|Pixels|width=97px}}
Idea.png
Pixels
style {{message/box|Styled box|style=text-decoration:overline;font-family: fantasy, cursive, Serif;height: 75px;}}
Idea.png
Styled box

Image

Parameter What you write What you see
image {{message/box|Custom image|image=Green check.png}}
Green check.png
Custom image
imgwidth {{message/box|Larger image|image=Green check.png|imgwidth=75}}
Green check.png
Larger image
float {{message/box|Floating to the right|float=right}}
Idea.png
Floating to the right
{{message/box|Not floating|float=none}}
Idea.png
Not floating
imgalt {{message/box|&larr; Alt text set to "Olle"|imgalt=Olle}}
Olle
← Alt text set to "Olle"
imglink {{message/box|&larr; Internal wikilink|imglink=L10n:Teams:sv-SE/en}}
Idea.png
← Internal wikilink
{{message/box|&larr; URL|imglink=http://www.strindbergandhelium.com/}}
Idea.png
← URL

Text

Parameter What you write What you see
1 {{message/box|You ''can'' '''use''' <sup>wiki</sup> <big>markup</big>}}
Idea.png
You can use wiki markup
title {{message/box|title=This is the message title|This is the message text}}
Idea.png
This is the message title
This is the message text
fgcolor {{message/box|CSS colour name|fgcolor=magenta}}
Idea.png
CSS colour name
{{message/box|Hex colour code|fgcolor=#FF00FF}}
Idea.png
Hex colour code
{{message/box|Mozilla colour value|fgcolor=mozred}}
Idea.png
Mozilla colour value
talign {{message/box|Right-aligned text|talign=right}}
Idea.png
Right-aligned text
{{message/box|Centered text|talign=center}}
Idea.png
Centered text
tdir {{message/box|متن خود را|tdir=rtl}}
Idea.png
متن خود را
{{message/box|متن خود را|tdir=rtl|float=right}}
Idea.png
متن خود را

See also

  • {{message}} – the same as {{message/box}}, minus the option to define the width of the box and some other tweaks.
  • {{admon}} – four types of message boxes for various situations, based upon the template {{message}}.
  • {{label}} – strong message box for incredibly important messages. Use only if absolutely necessary.


Retrieved from "https://wiki.mozilla.org/index.php?title=Template:Message/box/doc&oldid=1051470"