Email layout

done
Notification emails can be customized directly in the wiki. Administrators can change the overall email layout and add custom content to notification emails by editing the corresponding mail template pages.

Email notification templates

Three mail templates control the layout and content of notification emails:

Template	Purpose
`MediaWiki:Wrapper.mail`	Defines the overall email structure and styling, including the logo.
`MediaWiki:SingleNotification.mail`	Defines the content of individual notification emails.
`MediaWiki:DigestNotification.mail`	Defines the content of digest notification emails.

The wrapper surrounds the content provided by the notification templates. The {{{content}}} placeholder in the wrapper specifies where the notification content appears.
Customizing the templates requires administrator access and knowledge of wikitext, HTML, and CSS.

Example of a sent individual notification email

YouTube: Notifications template (4:11 min.)

Customize the email wrapper

The MediaWiki:Wrapper.mail page defines the outer structure and styling of notification emails. Use this template to customize elements such as the logo, background color, and content spacing.

Email template with the outer wrapper and notification content

Email notification template

The page displays a preview of the current email layout. Edit the page in source editing mode to change the layout.
The wrapper uses HTML container elements to surround the {{{content}}} placeholder. The notification templates provide the content that appears at this position.

ImportantDo not remove the {{{content}}} placeholder. The wrapper requires this placeholder to insert notification content.

The HTML head element contains metadata and normally does not require changes.
The body element defines properties such as the background color and content spacing. Other HTML elements define the email structure, including the logo, content area, and footer.

Customize the logo

The wrapper can reference the wiki logo with the {{logo}} variable:

<img src="{{logo}}" alt="MyCompany logo"/>

To use another image, replace the src value with the base64-encoded image data. For example:

<img src="data:image/jpeg;base64,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" alt="MyCompany logo"/>

To obtain the base64 encoding of an image:

Open Chrome Developer Tools.
Open the Sources tab.
Locate the image file.
Copy the base64-encoded image data.
Use the encoded data as the value of the src attribute.

Sources tab of Chrome Developer Tools showing base64-encoded image data

Base64 encoding

Keep the content placeholder

The wrapper must contain the {{{content}}} placeholder. This placeholder determines where the notification content appears in the email. For example:

{{{content}}}

Do not remove or replace this placeholder when customizing the wrapper.

Customize notification content

The notification templates define the content that the wrapper displays.

Individual notification emails

The MediaWiki:SingleNotification.mail template defines individual notification emails. These emails are sent immediately after a triggering event.
Because the template is used for different types of notifications, avoid replacing the default notification content. Additional content can be added around the existing content.
For example, administrator contact information can be added between the HTML div containers. This places the additional information above the footer.

Source view of the SingleNotification template with additional custom text

SingleNotification custom text

To add custom text:

Open MediaWiki:SingleNotification.mail in source editing mode.
Locate the position where the additional content should appear.
Add the required HTML or wikitext.
Save the page.

Additional text can also be provided through a system message. This allows the text to appear in the language configured in the recipient's preferences.
After saving the changes, the updated template appears in the email preview.

Email template preview showing customized notification content

Customized notification email

Security errorLinks in the email preview can cause a security error when selected. This does not affect links in the actual notification emails.

Digest notification emails

The MediaWiki:DigestNotification.mail template defines the content of digest notification emails.

Test notification email templates

Administrators can test changes to notification email templates with Special:NotificationTester.

Open Special:NotificationTester.
Follow the instructions on the page to test the notification template changes.