Use Velocity to generate HTML based email

java css velocity

12,563

CSS classes are ignored by email clients. If you are using standalone clients like Outlook Express, divs will also not be recognized (dont depend on float:left).

I suggest you to change your HTML page like -

Drop everything outside the <body>...</body>
Use <table> instead of <div>
Dont use <style> tags to define style-classes, or .css file to load styles. Instead use inline css like style="...." inside the <td> / <table> containers.

Hope this helps you in email template designing.

12,563

Author by

Mahadi Siregar

Updated on June 09, 2022

Comments

Mahadi Siregar about 2 years

I try this tutorials http://www.java2s.com/Code/Java/Velocity/UseVelocitytogenerateHTMLbasedemail.htm but, when i add css, it look like not executed.

<HTML>
<HEAD>
  <TITLE>Pet Store Sale!</TITLE>
  <style type="text/css">
    body    {
            margin: 0 0 0 0;
            padding: 0 0 0 0;
            text-align: center; 
            background-color: #FFF;
            border-top: 3px solid #CCC;
            }


    #container  {
                position: relative;
                width: 860px;
                height: 1600px;
                margin: 84 auto 0 auto;
                padding: 0 0 0 0;
                background-color: #FFF;
                }


    p       {
            font-family: times, Times New Roman, times-roman, georgia, serif;
            color: #444;
            margin: 0 0 0 0;
            padding: 0 0 0 0;
            text-align: center;
            }


    .woodtwo        {
                    font-size: 22px;
                    line-height: 46px;
                    letter-spacing: -1px;
                    }


    .eyebrow        {   
                    font-size: 19px;
                    line-height: 29px;
                    }


    .caps           {
                    font-size: 14px;
                    line-height: 20px;
                    text-transform: uppercase;
                    }


    .copyone        {
                    font-size: 16px;
                    line-height: 20px;
                    }


    #line           {
                    border-bottom: 1px solid #CCC;
                    width: 748px;
                    margin: 10 0 20 56;
                    }



    #break          {
                    height: 30px;
                    }


    a:link          { color: #B95E27; text-decoration: none; } 
    a:visited       { color: #B95E27; text-decoration: none; }
    a:active        { color: #1A69A1; text-decoration: none; } 
    a:hover         { color: #888; text-decoration: none;}


    .grey           { color: #888; }


    .smallcaps      { font-size: 88%; }


</style>
</HEAD>
<BODY>

<div id="container">
    <p class="caps"><a href="">From Pet Store Sale</a></p>
    <div id="line"></div>
    <p class="eyebrow">
        <span class="grey">*</span>T<span class="smallcaps">HANK YOU FOR JOINING </span>P<span class="smallcaps">ET</span> S<span class="smallcaps">TORE</span> S<span class="smallcaps">ALE</span> A<span class="smallcaps">PPLICATION</span><span class="grey">*</span>
    </p>
    <p class="copyone">
        <i>You received this email because your registration process in Pet Store Sale is successful.<br/>
        To Confirm your registration, please visit this link <a href ="$link">Confirmation Link</a>.<br/>
        Your username : $username<br/>
        Password : $password<br/>
        If you have any questions about Application, please send an email to <a href="mailto:[email protected]">[email protected]</a></i> 
        <br><br><b>THANK YOU</b>
    </p>
    <div id="break"></div>

    <p class="woodtwo">
        <a href="">GETTING STARTED</a>
    <div id="line"></div>
    <div id="line"></div>
</div>

</BODY>
</HTML>

i've also tried

<link rel="stylesheet" href="./style/css/emailFormat.css" type="text/css"  media="screen" />

but it not work too. how the right way to add css on to this page. Thank you

Mahadi Siregar about 12 years

whether all the pretty emails that I received are made in this way?
tusar about 12 years

these are ethics of building email templates, which will be working in all email-websites (like gmail.com) and stand-alone clients (like outlook express). but that does not mean every emails you receive follows this.
Nacho almost 8 years

do you know a way to automatically make this changes?