Notifications
I have just implemented this for a client and anyone who might like to do this can continue reading this post. I will try as much as possible to explain the process and make it easy for anyone to implement.
What to edit?
Your Mail Templates.
Where?
- In your admin backend, go to your "Settings", hover and locate "Mail Templates"
- Click that and you will be face-to-face with all your mail templates.
- The templates are inside "Choose Message".
- By default, the first you will see is called "Header (Non-Member)".
- The message body (underneath) shows the content of the "Header" template.
* If you select another message, for instance, the second one in the drop-down, "Footer (Non-Member)" you will see its content underneath too, different from the Header.
* About the fifth message in the drop-down, depending on the number of plugins installed, is the contact message. It has the following content:
[header] [sender_title] has sent you a message using the contact page: Email : [sender_email] Message: [message][error_report] [footer]
Noticed the texts in the square brackets?
They are the placeholders that do the magic in your mails.
SE use them to represent the dynamic data that you want to use in your mails.
For instance, the content above will automagically generate something like this:
Hello,
Wale Alabi has sent you a message using the contact page:
Email : mymail@mail.com
Message: Testing out the contact page
Best Regards,
Your Social Community
Note that you can now change any text you like to reflect your true message and the represent the true concept of your project... just be careful of not tampering with the square templates. You cannot change those.
Anything else, you can change!
Ok, now, so how do you customize the look.
I have very limited css skills and I deeply wish CSS gurus out-here will come around and help the community improve upon this little effort to make it better for everyone of us, but until that happens, if you are ok with using this, here we go:
<div style="background: #00AEFF; width: 700px; pisition: relative; padding: 0px; margin: 0px; border: 3px dashed white;">
<table style="width: 680px; height: 240px;" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="text-align: center; width: 690px;" align="center" valign="top">
<div style="width: 650px; background: #ffffff; margin: 25px; text-align: left;">
<table cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="padding-left: 22px;"> </td>
<td>
<p style="text-align: left;"><strong>[header]</strong></p>
</td>
</tr>
<tr style="width: 80%; padding: 5px;" valign="top">
<td style="padding-left: 13px; padding-right: 21px;"><img src="[sender_photo]" alt="" width="80" height="80"></td>
<td>
<div style="color: #000000;"><strong>[sender_title]</strong> has added you as a friend. <br><br>Please click the following link to sign in and confirm this friendship request:<br><br>https://[host][object_link]<br><br>[footer]</div>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
<tr>
<td style="width: 680px;">
<div style="clear: both; width: 80%;">
<div style="float: left; padding: 5px; color: #ffffff; margin-left: 25px; font-size: 11px;">Message has been sent to . | <a style="font-size: 11px; text-decoration: none; color: #ffffff; font-weight: bold;" href="[unsubscribe_url]">Unsubscribe</a> | <a style="font-size: 11px; text-decoration: none; color: #ffffff; font-weight: bold;" href="[contact_url]">Contact</a></div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
The above lines of code generated this:
To replicate it yourself, all you have to do is copy the code above and paste into your template.
But no, dont paste the code into the main edit box, first locate the "Source code" button, then paste the code there.
Press ok, then start editing from the main edit box.
Replace and readjust the texts as you like.
This sample code already has the picture of the "subject" of the activity baked-in, but you cant see it from the text box, except in the source code.
But dont worry, only edit edit the visible part of the text as you like.
To change the colors, you will have to use the source code, find the color you want and replace it.
Lastly, to take care of those mails that have no subject/object relationship, for instance, where the owner is regenerating his password...in this case, you wont need pictures to show up.
The code below takes care of the picture cell and makes sure the message is flat and levelled-up:
<div style="background: #00AEFF; width: 700px; pisition: relative; padding: 0px; margin: 0px; border: 3px dashed white;">
<table style="width: 680px; height: 240px;" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="text-align: center; width: 690px;" align="center" valign="top">
<div style="width: 650px; background: #ffffff; margin: 25px; text-align: left;">
<table cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="padding-left: 22px;"> </td>
<td>
<p><strong><br>[header]<br></strong></p>
</td>
</tr>
<tr style="width: 80%; padding: 5px;" valign="top">
<td style="padding-left: 13px; padding-right: 21px;"> </td>
<td>
<div style="color: #000000;">You have requested to reset your password because you have forgotten your password. <br><br>If you did not request this, please ignore it. It will expire in 24 hours. To reset your password, please click the following link:<br><br>https://[host][object_link]<br><br>[footer]</div>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
<tr>
<td style="width: 680px;">
<div style="clear: both; width: 80%;">
<div style="float: left; padding: 5px; color: #ffffff; margin-left: 25px; font-size: 11px;">Message has been sent to [email]. | <a style="font-size: 11px; text-decoration: none; color: #ffffff; font-weight: bold;" href="[unsubscribe_url]">Unsubscribe</a> | <a style="font-size: 11px; text-decoration: none; color: #ffffff; font-weight: bold;" href="[contact_url]">Contact</a></div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
Like this:
Thats it!
Now I am not all that articulate and I know for sure, I might have left something out or muddled something up for you, but I will do my best to clarify any question below.
Thanks!
And yes, lets keep helping each other!
Long live SE!!!
Great tips! 
Love it Wale!
I did this awhile ago but completely changed my templates to be more professional looking. You wouldn't recognize them if they were sent to you, but they accomplish the same thing as the desired action suggests.
