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.

 

 

The main files you will need to edit is these:-

 

 

\app\Plugin\Mail\View\Layouts\Emails\html

 

default.ctp

 

The only information you need from this file are these lines of code below:-

 

 

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.

 

 

Open the file basic.html in a HTML editor like Notepad++

 

 

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.

 

 

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.

 

 

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:-

 

 

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...')?>

 

<?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;?>/users/profile">

<?php echo Configure::read('core.site_name')?></a> <?php echo __('and change your email setting.')?>

 

 

 

 

 

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

 

 

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.

 

 

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>

 

 

• Copy & Paste all the code from the basic.html file
• Into the default.ctp
• Save
• Upload
• Test

Thats about it!

 

 

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.