HackerOne users: Testing against this community violates our program's Terms of Service and will result in your bounty being denied.

[TUTORIAL] How to customize your emails

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!

Comments

  • 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.

    grep is your friend.

  • 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.

    grep is your friend.

  • Thank you @x00!

    Yes, images are blocked but maybe somebody want it :)

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

  • x00x00 MVP
    edited 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.

    grep is your friend.

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

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

  • 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).

    grep is your friend.

  • hgtonighthgtonight ∞ · New Moderator

    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

    Search first

    Check out the Documentation! We are always looking for new content and pull requests.

    Click on insightful, awesome, and funny reactions to thank community volunteers for their valuable posts.

  • I don't know how to write in documents :D

  • @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.

  • 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.

    grep is your friend.

  • x00x00 MVP
    edited 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!'
        )
    );
    

    grep is your friend.

  • x00x00 MVP
    edited 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}'
        )
    );
    

    grep is your friend.

  • DogHamDogHam
    edited 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!

  • x00x00 MVP
    edited 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 {{}{}

    grep is your friend.

  • Thank you I will try :)

  • @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.

  • peregrineperegrine MVP
    edited 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

    I may not provide the completed solution you might desire, but I do try to provide honest suggestions to help you solve your issue.

Sign In or Register to comment.