Notification Box

Template example: Notification box

To emphasize text passages, it is common to use a type of notifcation box.

In this example, we create a notification box that can be used to show a warning, a tip or a note:

The color of the box and the box label change automatically depending on the type of box a user selects.

Creating the template

1. Create the page Template:Box Note
2. Add the template content and save the page:

   <div class="infobox {{{boxtype}}}">
   <span class="boxlabel">
   {{#switch: {{{boxtype}}}
    | note = Note:
    | tip = Tip:
    | warning = Warning:
    | #default = Note:
   }}
   </span>
   {{{Note text}}}
   </div>
   

   
   

What this code does:

• The container (<div>...</div>) is used for styling the box. It has the style classes infobox and {{{boxtype}}}. The boxtype parameter provides the actual value the user chooses when using the template.
• The <span>...</span> contains the label for the box. It displays the label for the box type the user chooses. It has the style class boxlabel which is used to format the label.
• {{{Note text}}} is the placeholder for the actual text the user creates on a particular page.

To make it easy for users to insert and use this template in visual editing mode, we include a <templatedata> section in the template. It uis wrapped in a ... tag to ensure that this part of the template is not transcluded in the target page that uses the actual template. This template sections function is to describe the parameters of the template. It also populates the form for visual editing:

<noinclude>
<templatedata>
{
	"params": {
		"boxtype": {
			"description": "Possible values: note, tip, warning",
			"example": "note",
			"type": "string",
			"default": "note",
			"required": true
		},
		"Note text": {}
	},
	"description": "To add standard infoboxes such as notes or related links to a page"
}
</templatedata>
</noinclude>

What this code does:

• It lists the two parameters (boxtype and Note text), separated by a comma.
• It lists the parameter objects (optional): description, example, type, etc. For a full ist of template data objects, see www.mediawiki.org/wiki/Extension:TemplateData#Param_object
• It describes the purpose of the template (description) so that users can distinguish it from similar templates.

Creating the template styles

dgdfg

Using the template

dfgdfg