[TUTORIAL] How to customize your emails

DogHam · April 2013

Hi, I searched a lot but didnt' found nothing.

But finaly I found the solution!

This is a little "HowTo"

But you should know, I don't speak english very well, so please don't laught about me

Step one

Open your Filezilla or other FTP software to archive this file "aplications/dashboard/locale/en-CA/definitions.php"

Step two

Now copy the file and open with PHP editor like "Notepad ++, Dreamviewer, etc"

Step three

Find this:
$Definition['EmailConfirmEmail'] = 'here is some text';
Here you can replace what you want. But don't forget the confirmation link!

I don't know all definitions for email, so please post other definitions

You can make a HTML email!

You can make it on the easy way or hard.

Easy way

You can search in your email for a HTML email.

In google chrome, you can see the source code. Right click on the header and Inspect Element.

In the tab Elements you can move your mouse up and down, and you will see, the webpage will mark blue. Search the whole email. Click on that and Copy as HTML.

Now you can open Dreamviewer and paste the HTML code into a empty Document.

If you click on "Design" tab in Dreamviewer, you can make your changes without writing code.

Then, copy the Code (do not copy this:

` <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Untitled Document

`

You don't need it.

Insert like here

$Definition['EmailConfirmEmail'] = ' <body>Your code';

Now the hard way

For this I made a videotutorial. At the end of the video you can see how to paste the code in Definitions.php

https://www.youtube.com/watch?v=LnwzQ8_VaUY

I hope, I could help you!

x00 · April 2013

just a slight change

in conf/ create a file called locale-email.php

<?php if (!defined('APPLICATION')) exit();

$Definition['EmailConfirmEmail'] = 'your email code';

this makes it update friendly.

x00 · April 2013

Aslo external images are often blocked for privacy reasons. Embedded images can result is higher spam score, and don't always work.

Aslo work on getting size down. Email, isn't really supposed be a browser experience.

You can create that gradient in css, and use a serif font for the Name an tagline. It doesn’t have to be exactly the same, it just has to be comparable.

DogHam · April 2013

Thank you @x00!

Yes, images are blocked but maybe somebody want it

Do you know all definitions? Could you post it here?

x00 · April 2013

Images not really necessary and you want it to gracefully degrade, try this

<html>
<head>
<style>
.Header{
background: #2fa218; /* Old browsers */
background: -moz-linear-gradient(top, rgba(61,211,31,1) 0%, rgba(39,63,6,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(61,211,31,1)), color-stop(100%,rgba(39,63,6,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(61,211,31,1) 0%,rgba(39,63,6,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(61,211,31,1) 0%,rgba(39,63,6,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(61,211,31,1) 0%,rgba(39,63,6,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(61,211,31,1) 0%,rgba(39,63,6,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3dd31f', endColorstr='#273f06',GradientType=0 ); /* IE6-9 */
height:250px;
color:#000000;
font-size:5em;
font-family:Serif;
text-align:center;
padding:20px;
}
big{
font-size:1.2em;
}
small{
font-size:0.4em;
color:#deffde;
}
.Title{
font-family:Georgia;
text-align:left;
background: #2fa218;
color:#deffde;
font-size:1.9em;
padding:10px;
}
.Content{
font-family:Georgia;
text-align:left;
color;#000000;
font-size:0.9em;
padding:30px 10px;
}
.Footer{
font-family:Georgia;
text-align:left;
background: #2fa218;
color:#deffde;
font-size:1em;
padding:10px;
}
</style>
</head>
<body>
<div class="Header">
<div><big>M</big>ONEY <big>T</big>ALK <big>F</big>ORUM</div>
<div><small>SOME TAG LINE THAT IS LONG ENOUGH</small></div>
</div>
<div class="Title">Registration was Successful</div>
<div class= "Content">Some test content</div>
<div class= "Footer">&nbsp;</div>
</body>
</html>

This will have more support across browsers. Being too tricksy in email can backfire, it was never really designed for html, keep thing simple.

DogHam · April 2013

http://www.colorzilla.com/gradient-editor/

Can I ask you how do you make this box with code inside?

x00 · April 2013

this has most of the definitions (not addons)

https://www.transifex.com/projects/p/vanilla/resources/

if you are doing a full translation, create a proper locale pack (see docs).

hgtonight · April 2013

This is awesome! If you want to document on the wiki, that would be great!

I agree that email is intended to be more content that style. I don't think a header image is overkill though.

Thanks again for the walkthrough, @DogHam

DogHam · April 2013

I don't know how to write in documents

DogHam · April 2013

@x00 the option with gradient don't work for me
I get error in definitions.php because this: `
It's in the gradient css style.
I don't know how to fix that, but it's not important.

x00 · April 2013

you need to escape all ' on php single quoted strings.

http://php.net/manual/en/language.types.string.php

you could use Herdoc

$Definition['EmailConfirmEmail'] = <<<EOT
<html>
<head>
<style>
.Header{
background: #2fa218; /* Old browsers */
background: -moz-linear-gradient(top, rgba(61,211,31,1) 0%, rgba(39,63,6,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(61,211,31,1)), color-stop(100%,rgba(39,63,6,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(61,211,31,1) 0%,rgba(39,63,6,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(61,211,31,1) 0%,rgba(39,63,6,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(61,211,31,1) 0%,rgba(39,63,6,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(61,211,31,1) 0%,rgba(39,63,6,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3dd31f', endColorstr='#273f06',GradientType=0 ); /* IE6-9 */
height:250px;
color:#000000;
font-size:5em;
font-family:Serif;
text-align:center;
padding:20px;
}
big{
font-size:1.2em;
}
small{
font-size:0.4em;
color:#deffde;
}
.Title{
font-family:Georgia;
text-align:left;
background: #2fa218;
color:#deffde;
font-size:1.9em;
padding:10px;
}
.Content{
font-family:Georgia;
text-align:left;
color;#000000;
font-size:0.9em;
padding:30px 10px;
}
.Footer{
font-family:Georgia;
text-align:left;
background: #2fa218;
color:#deffde;
font-size:1em;
padding:10px;
}
</style>
</head>
<body>
<div class="Header">
<div><big>M</big>ONEY <big>T</big>ALK <big>F</big>ORUM</div>
<div><small>SOME TAG LINE THAT IS LONG ENOUGH</small></div>
</div>
<div class="Title">Registration was Successful</div>
<div class= "Content">Some test content</div>
<div class= "Footer">&nbsp;</div>
</body>
</html>
EOT;

Just remember you must have a newline before EOF; and there can't be any indent before it.

x00 · April 2013

You might want to divide up the content to keep it dry.

$Definition['EmailTemplate'] = <<<EOT
<html>
<head>
<style>
.Header{
background: #2fa218; /* Old browsers */
background: -moz-linear-gradient(top, rgba(61,211,31,1) 0%, rgba(39,63,6,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(61,211,31,1)), color-stop(100%,rgba(39,63,6,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(61,211,31,1) 0%,rgba(39,63,6,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(61,211,31,1) 0%,rgba(39,63,6,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(61,211,31,1) 0%,rgba(39,63,6,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(61,211,31,1) 0%,rgba(39,63,6,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3dd31f', endColorstr='#273f06',GradientType=0 ); /* IE6-9 */
height:250px;
color:#000000;
font-size:5em;
font-family:Serif;
text-align:center;
padding:20px;
}
big{
font-size:1.2em;
}
small{
font-size:0.4em;
color:#deffde;
}
.Title{
font-family:Georgia;
text-align:left;
background: #2fa218;
color:#deffde;
font-size:1.9em;
padding:10px;
}
.Content{
font-family:Georgia;
text-align:left;
color;#000000;
font-size:0.9em;
padding:30px 10px;
}
.Footer{
font-family:Georgia;
text-align:left;
background: #2fa218;
color:#deffde;
font-size:1em;
padding:10px;
}
</style>
</head>
<body>
<div class="Header">
<div><big>M</big>ONEY <big>T</big>ALK <big>F</big>ORUM</div>
<div><small>SOME TAG LINE THAT IS LONG ENOUGH</small></div>
</div>
<div class="Title">{EmailTitle}</div>
<div class= "Content">{EmailContent}</div>
<div class= "Footer">&nbsp;</div>
</body>
</html>
EOT;

Then do each email definition.

$Definition['EmailConfirmEmail'] = FormatString(
    $Definition['EmailTemplate'],
    array(
      'EmailTitle' => 'Registration was successful',
      'EmailContent' => 'Congratulations you are now registered!'
    )
);

x00 · April 2013

There is actually important bits in the original code remember to include e.g.

$Definition['EmailConfirmEmail'] = FormatString(
    $Definition['EmailTemplate'],
    array(
      'EmailTitle' => 'Confirm your account',
      'EmailContent' => 
          'You need to confirm your email address before you can continue.'.
          'Please confirm your email address by clicking on the following link:'.
          '{/entry/emailconfirm,exurl,domain}/{User.UserID,rawurlencode}/{EmailKey,rawurlencode}'
    )
);

DogHam · April 2013

Thank you you made it great.
I tryed it with your source code. I will receive a plain text email. No style, nothing.
This is what it deliver:

<html>
<head>
<style>
.Header
big
small
.Title
.Content
.Footer
</style>
</head>
<body>
<div class="Header">
<div><big>M</big>ONEY <big>T</big>ALK <big>F</big>ORUM</div>
<div><small>SOME TAG LINE THAT IS LONG ENOUGH</small></div>
</div>
<div class="Title">Registration was Successful</div>
<div class= "Content">Some test content</div>
<div class= "Footer">&nbsp;</div>
</body>
</html>

I will keep html code with tables. it's working.
But thank you for help!

x00 · April 2013

hmm... this is down to FormatString removing between {} there is a way to escape this

$Definition['EmailTemplate'] = <<<EOT
<html>
<head>
<style>
.Header{{}{}
background: #2fa218; /* Old browsers */
background: -moz-linear-gradient(top, rgba(61,211,31,1) 0%, rgba(39,63,6,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(61,211,31,1)), color-stop(100%,rgba(39,63,6,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(61,211,31,1) 0%,rgba(39,63,6,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(61,211,31,1) 0%,rgba(39,63,6,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(61,211,31,1) 0%,rgba(39,63,6,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(61,211,31,1) 0%,rgba(39,63,6,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3dd31f', endColorstr='#273f06',GradientType=0 ); /* IE6-9 */
height:250px;
color:#000000;
font-size:5em;
font-family:Serif;
text-align:center;
padding:20px;
}
big{{}{}
font-size:1.2em;
}
small{{}{}
font-size:0.4em;
color:#deffde;
}
.Title{{}{}
font-family:Georgia;
text-align:left;
background: #2fa218;
color:#deffde;
font-size:1.9em;
padding:10px;
}
.Content{{}{}
font-family:Georgia;
text-align:left;
color;#000000;
font-size:0.9em;
padding:30px 10px;
}
.Footer{{}{}
font-family:Georgia;
text-align:left;
background: #2fa218;
color:#deffde;
font-size:1em;
padding:10px;
}
</style>
</head>
<body>
<div class="Header">
<div><big>M</big>ONEY <big>T</big>ALK <big>F</big>ORUM</div>
<div><small>SOME TAG LINE THAT IS LONG ENOUGH</small></div>
</div>
<div class="Title">{EmailTitle}</div>
<div class= "Content">{EmailContent}</div>
<div class= "Footer">&nbsp;</div>
</body>
</html>
EOT;

then

$Definition['EmailConfirmEmail'] = FormatString(
$Definition['EmailTemplate'],
array(
'EmailTitle' => 'Confirm your account',
'EmailContent' =>
'You need to confirm your email address before you can continue.'.
'Please confirm your email address by clicking on the following link:'.
'{/entry/emailconfirm,exurl,domain}/{User.UserID,rawurlencode}/{EmailKey,rawurlencode}'
)
);

This is double escaped so make sure you are doing with EmailTemplate if you are just using EmailConfirmEmail it sould be single escaped {{} not {{}{}

DogHam · April 2013

Thank you I will try

gohunter · November 2014

@x00 said:
just a slight change

in conf/ create a file called locale-email.php
<?php if (!defined('APPLICATION')) exit();

$Definition['EmailConfirmEmail'] = 'your email code';
this makes it update friendly.

@x00‌ D‌o I have to point to the new file or is it supposed to overwrite automatically with the definition? Just did as it is, and no change at all.

peregrine · November 2014

try conf/locale.php possibly. since locale.php is no longer overwritten by upgrades.

when modifying locales or adding locale files - always clear the ini files in the /cache folder - for best results.

to see if you are reading the files you think you are reading for locales.

look at the contents of

cache/locale_map.ini

if your locale file is not listed you are not reading it !

so if the cache/locale_map.ini

has this

****cache/locale_map.ini ****

0 = "public_html/forum/locales/something/definitions.php"

and you are wondering why your definitions in conf/locale.php are not being read, it is because you need to delete the cache/locale_map.ini

it need to have something like this.... with the word "/conf/locale.php"

5 = "/something/something/conf/locale.php"

then you know vanilla is looking at that file.

you can always test if definitions to see if it is a problem with reading locale.php or a problem with the definition with a simple definition. to your conf/locale.php

$Definition['Howdy, Stranger!'] = "Greetings Earthling!";

then

it will change to

and you know your locale.php is being read and all your definitions added will work, provided the left hand side is correct.

http://vanillaforums.org/discussion/26597/tutorial-how-to-change-wording-how-to-change-text-how-to-change-language-how-to-change-locale

[TUTORIAL] How to customize your emails

Comments