Template:Message/box

Template documentation

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	text|title=}}
Common use	text|title=|bgcolor=|bdcolor=|width=|image=|float=}}}}
All parameters	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}}
Box
Parameter	What you write	What you see
class	Class set to messagebox text|class=text}}	Class set to messagebox text
bgcolor	CSS colour name|bgcolor=magenta}}	CSS colour name
	Hex colour code|bgcolor=#FF00FF}}	Hex colour code
	Mozilla colour value|bgcolor=mozsand}}	Mozilla colour value
bdcolor	CSS colour name|bdcolor=magenta}}	CSS colour name
	Hex colour code|bdcolor=#FF00FF}}	Hex colour code
	Mozilla colour value|bdcolor=mozcoal}}	Mozilla colour value
width	Percentage|width=45%}}	Percentage
	Pixels|width=97px}}	Pixels
style	Styled box|style=text-decoration:overline;font-family: fantasy, cursive, Serif;height: 75px;}}	Styled box
Image
Parameter	What you write	What you see
image	Custom image|image=Green check.png}}	Custom image
imgwidth	Larger image|image=Green check.png|imgwidth=75}}	Larger image
float	Floating to the right|float=right}}	Floating to the right
	Not floating|float=none}}	Not floating
imgalt	← Alt text set to "Olle"|imgalt=Olle}}	← Alt text set to "Olle"
imglink	← Internal wikilink|imglink=L10n:Teams:sv-SE/en}}	← Internal wikilink
	← URL|imglink=http://www.strindbergandhelium.com/}}	← URL
Text
Parameter	What you write	What you see
1	You ''can'' '''use''' <sup>wiki</sup> <big>markup</big>}}	You can use wiki markup
title	title=This is the message title|This is the message text}}	This is the message title This is the message text
fgcolor	CSS colour name|fgcolor=magenta}}	CSS colour name
	Hex colour code|fgcolor=#FF00FF}}	Hex colour code
	Mozilla colour value|fgcolor=mozred}}	Mozilla colour value
talign	Right-aligned text|talign=right}}	Right-aligned text
	Centered text|talign=center}}	Centered text
tdir	متن خود را|tdir=rtl}}	متن خود را
	متن خود را|tdir=rtl|float=right}}	متن خود را

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.