System email campaign

In group: Community Design & Support
Hi guys this is how you template your system emails to suit your website theme. Now there is a little coding involved to achieve this but once none it will pimp your emails like the professionals.

No not like the 1970's UK crime-action television drama series. No my name is not George Cowley and I'M not the controller from CI5 (Criminal Intelligence 5). Joking over, lets begin.
 
This example will be just a basic idea of what you can do.
 
The main files you will need to edit is these:-
 
Step 1.
 
\app\Plugin\Mail\View\Layouts\Emails\html
 
default.ctp
 
The only information you need from this file are these lines of code below:-
 
<?php echo Configure::read('core.site_name'); ?>
 
<?php echo $content_for_layout; ?>
 
<?php echo __('This is an automated generated email. Please do not respond to it.')?><br />
 
<?php echo __('If you don\'t want to receive these emails in the future, please visit')?> <a href="<?php echo FULL_BASE_URL . $this->request->base;?>">
 
<?php echo Configure::read('core.site_name')?></a> <?php echo __('and change your email setting.')?>
 
Step 2.
 
Next you will need a HTML5 responsive template. Here is a good resource to get you going.
 
 
You can download all of the templates from the above link. We will only be using the basic.html file for this topic. But play about with them to get an idea of what you can do.
 
Step 3.
 
Open the file basic.html in a HTML editor like Notepad++
 
Step 4.
 
Copy all the code in the basic.html file and then following the link below:-
 
 
Paste all the code from the basic.html file into the text area.
 
Click the Make It Inline button.
 
What this will do is custom the code so the CSS is inline for the email template.
 
Step 5.
 
Now copy & paste the code from the text area back into the same file and delete all the code in the <style></style> including the <style></style> tags.
 
Now just give it a test in the browser and it should still look the same.
 
Step 6.
 
At line 25 change the image code to this:-
 
<a href="<?php echo FULL_BASE_URL . $this->request->base;?>/"><img src="<?php echo FULL_BASE_URL . $this->request->base;?>/favicon114x114.png" alt="<?php echo Configure::read('core.site_name'); ?>" style="outline-style:none;text-decoration:none;-ms-interpolation-mode:bicubic;width:auto;max-width:100%;float:left;clear:both;display:block;"></a>
 
You will need to make a logo 114x114 in the png format and add to the root directory:-
 
\app\webroot
 
Name it this:-
 
favicon114x114.png
 
At line 28 you need to change the word Basic to:-
 
<?php echo Configure::read('core.site_name'); ?>
 
Delete line 54 as you will not need this at this point in time.
 
At the new line 54 you need to change the text Phasellus...etc. to whatever you want. I would use a little welcome message like so:-
 
<?php echo __('We hope you will make some great friends in our community that will last a life time...')?>
 
At line 55 you need to change the text Phasellus...etc. to:-
 
<?php echo $content_for_layout; ?>
 
 
At line 72 you need to change the text Phasellus...etc. to:-
 
<?php echo __('This is an automated generated email. Please do not respond to it.')?><br />
<?php echo __('If you don\'t want to receive these emails in the future, please visit')?> <a href="<?php echo FULL_BASE_URL . $this->request->base;?>/users/profile">
<?php echo Configure::read('core.site_name')?></a> <?php echo __('and change your email setting.')?>
 
Thats the main code sorted from the default.ctp file.
 
Step 7.
 
 
Social Links:-
 
Now its time to add your social links:-
 
At line 95 change the # link for facebook to you facebook link:-
 
<a href="#"
 
The same for these lines for Twitter line 105 and Google+ line 115
 
Contact details:-
 
Now its time to add your contact detail links:-
 
Either delete line 132 if ou have no contact number or edit the phone number.
 
Edit line 133 or line 132 if you deleted line 132 lol... To you email address.
 
Footer options:-
 
Next is the footer options:-
 
Line 152 for Terms, Privacy & Unsubscribe code added for you below:-
 
                              <p style="text-align:center;color:#222222;font-family:'Helvetica', 'Arial', sans-serif;font-weight:normal;padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;margin-top:0;margin-right:0;margin-left:0;font-size:14px;line-height:19px;margin-bottom:10px;" ><a href="<?php echo FULL_BASE_URL . $this->request->base;?>/pages/terms-of-service" style="color:#2ba6cb;text-decoration:none;" >Terms</a> | <a href="<?php echo FULL_BASE_URL . $this->request->base;?>/pages/privacy-policy" style="color:#2ba6cb;text-decoration:none;" >Privacy</a> | <a href="<?php echo FULL_BASE_URL . $this->request->base;?>/users/profile" style="color:#2ba6cb;text-decoration:none;" >Unsubscribe</a></p>
 
 
Step 8.
  • Copy & Paste all the code from the basic.html file
  • Into the default.ctp
  • Save
  • Upload
  • Test
Thats about it!
 
Now if you know your logo location you can also add this to you email template. Ask if you need help.
 
This is just a basic idea but so much more can be add. Promo's, events, etc. - don't forget to mess around with the colours and styling. Then add it to the CSS inliner, but don't add the php until after you style the page first or it will strip the php down to escaped tags.
 
Posted in on 03/02/16 at 20:09
Comments (3)
Mike  
Thank you Eddie, saved for futur use
Robert  
can you post some screenshots with this?
No login
Login or register to post your comment
Cookies on mooCommunity - Social Networking Script.
This site uses cookies to store your information on your computer.