1

I'm trying to create an email template in HTML. I originally did all the styling as an internal style - enter image description here

But later found out that styling must be done as inline css.

My creation looks fine in the editor but once I send the actual email it has basically no styling.

Here it is in the editor:- enter image description here

This is what it looks like when sent:- enter image description here

So what must I do to get the styling to work?

Here's the HTML :-

Apprenticeship Review

<div class="grid-container" style="display: grid; grid-template-columns: 200px auto 200px; grid-gap: 10px; background-color: #d3d3d3; padding: 5px">
    <div class="item1" style="background-color: rgba(255, 255, 255, 0.8); text-align: center; padding: 20px 0; font-size: 20px;">
        Review Date:
    </div>


    <div class="item2" style="background-color: rgba(255, 255, 255, 0.8); text-align: center; padding: 20px 0; font-size: 20px;">
        {!Apprenticeship_Review__c.Date_of_Review__c}
    </div>


    <div class="Space" style="">
    </div>


    <div class="item3" style="background-color: rgba(255, 255, 255, 0.8); text-align: center; padding: 20px 0; font-size: 20px;">
        Review ID:
    </div>


    <div class="item4" style="background-color: rgba(255, 255, 255, 0.8); text-align: center; padding: 20px 0; font-size: 20px;">
        {!Apprenticeship_Review__c.Name}
    </div>


    <div class="Space" style="">
    </div>
</div>


<div class="grid-container" style="display: grid; grid-template-columns: 200px auto 200px; grid-gap: 10px; background-color: #d3d3d3; padding: 5px">
    <div class="item5" style="background-color: rgba(255, 255, 255, 0.8); text-align: center; padding: 20px 0; font-size: 20px;">
        Learner Name:
    </div>


    <div class="item6" style="background-color: rgba(255, 255, 255, 0.8); text-align: center; padding: 20px 0; font-size: 20px;">
        {!Apprenticeship_Review__c.Apprentice_Name__c}
    </div>


    <div class="item7" style="background-color: rgba(255, 255, 255, 0.8); text-align: center; padding: 20px 0; font-size: 20px;">
        Expected End Date:
    </div>


    <div class="item8" style="background-color: rgba(255, 255, 255, 0.8); text-align: center; padding: 20px 0; font-size: 20px;">
        Apprenticeships:
    </div>


    <div class="item9" style="background-color: rgba(255, 255, 255, 0.8); text-align: center; padding: 20px 0; font-size: 20px;">
        {!Apprenticeship_Review__c.Apprenticeship_Title__c}
    </div>


    <div class="item10" style="background-color: rgba(255, 255, 255, 0.8); text-align: center; padding: 20px 0; font-size: 20px;">
        ENDDATE
    </div>


    <div class="item11" style="background-color: rgba(255, 255, 255, 0.8); text-align: center; padding: 20px 0; font-size: 20px;">
        Reviewer Name:
    </div>


    <div class="item12" style="background-color: rgba(255, 255, 255, 0.8); text-align: center; padding: 20px 0; font-size: 20px;">
        {!Apprenticeship_Review__c.Review_Carried_Out_By__c}
    </div>


    <div class="Space" style="">
    </div>


    <div class="item13" style="background-color: rgba(255, 255, 255, 0.8); text-align: center; padding: 20px 0; font-size: 20px;">
        Employer:
    </div>


    <div class="item14" style="background-color: rgba(255, 255, 255, 0.8); text-align: center; padding: 20px 0; font-size: 20px;">
        {!Apprenticeship_Review__c.Employer__c}
    </div>


    <div class="Space" style="">
    </div>


    <div class="item15" style="background-color: rgba(255, 255, 255, 0.8); text-align: center; padding: 20px 0; font-size: 20px;">
        Review Type:
    </div>


    <div class="item16" style="background-color: rgba(255, 255, 255, 0.8); text-align: center; padding: 20px 0; font-size: 20px;">
        {!Apprenticeship_Review__c.Review_Type__c}
    </div>


    <div class="Space" style="">
    </div>


    <div class="item17" style="background-color: rgba(255, 255, 255, 0.8); text-align: center; padding: 20px 0; font-size: 20px;">
        Review Location:
    </div>


    <div class="item18" style="background-color: rgba(255, 255, 255, 0.8); text-align: center; padding: 20px 0; font-size: 20px;">
        {!Apprenticeship_Review__c.Review_Location__c}
    </div>


    <div class="item19" style="background-color: rgba(255, 255, 255, 0.8); text-align: center; padding: 20px 0; font-size: 20px;">
        Other Location:
    </div>


    <div class="item20" style="background-color: rgba(255, 255, 255, 0.8); text-align: center; padding: 20px 0; font-size: 20px;">
        Portfolio Location:
    </div>


    <div class="item21" style="background-color: rgba(255, 255, 255, 0.8); text-align: center; padding: 20px 0; font-size: 20px;">
        {!Apprenticeship_Review__c.Portfolio_Location__c}
    </div>


    <div class="item22" style="background-color: rgba(255, 255, 255, 0.8); text-align: center; padding: 20px 0; font-size: 20px;">
        {!Apprenticeship_Review__c.Review_Location__c}
    </div>
</div>


<h1>Signatures</h1>


<div class="SingleRow" style="text-align: center; font-size: 20px; display: grid; grid-template-columns: auto; grid-gap: 10px; background-color: #d3d3d3; padding: 5px;">
    <div class="item1" style="text-align: center; font-size: 20px; display: grid; grid-template-columns: auto; grid-gap: 5px; background-color: rgba(255, 255, 255, 0.8); padding: 5px;">
        <b>Signatures: Please note the above information may be shared with contract partners.</b>
    </div>
</div>


<div class="SingleRow2" style="text-align: center; font-size: 20px; display: grid; grid-template-columns: auto; grid-gap: 10px; background-color: #d3d3d3; padding: 5px;">
    <div class="item1" style="text-align: center; font-size: 16px; display: grid; grid-template-columns: auto; grid-gap: 10px; background-color: rgba(255, 255, 255, 0.8); padding: 5px;">
        I certify that this review was carried out by the reviewer detailed above, I have read and accepted the full contents of this review and agree it is a true and accurate record of this meeting. In addition, I certify that I have been in learning from my start date or last review for at least the required minimum hours per week.
    </div>
</div>


<div class="grid-container2" style="display: grid; grid-template-columns: 200px auto 100px 200px; grid-gap: 10px; background-color: #d3d3d3; padding: 5px;">
    <div class="item1" style="background-color: rgba(255, 255, 255, 0.8); text-align: center; padding: 20px 0; font-size: 20px;">
        Reviewer Signature:
    </div>


    <div class="item2" style="background-color: rgba(255, 255, 255, 0.8); text-align: center; padding: 20px 0; font-size: 20px;">
    </div>


    <div class="item3" style="background-color: rgba(255, 255, 255, 0.8); text-align: center; padding: 20px 0; font-size: 20px;">
        Date:
    </div>


    <div class="item4" style="background-color: rgba(255, 255, 255, 0.8); text-align: center; padding: 20px 0; font-size: 20px;">
    </div>
</div>


<div class="OneAndLong" style="display: grid; grid-template-columns: 200px auto; grid-gap: 10px; background-color: #d3d3d3; padding: 5px;">
    <div class="item20" style="background-color: rgba(255, 255, 255, 0.8); text-align: center; padding: 10px 0; font-size: 20px;">
        College Reviewer:
    </div>


    <div class="item4" style="background-color: rgba(255, 255, 255, 0.8); text-align: center; padding: 10px 0; font-size: 20px;">
    </div>
</div>


<div class="grid-container2" style="display: grid; grid-template-columns: 200px auto 100px 200px; grid-gap: 10px; background-color: #d3d3d3; padding: 5px;">
    <div class="item6" style="background-color: rgba(255, 255, 255, 0.8); text-align: center; padding: 20px 0; font-size: 20px;">
        Employer Signature:
    </div>


    <div class="item7" style="background-color: rgba(255, 255, 255, 0.8); text-align: center; padding: 20px 0; font-size: 20px;">
    </div>


    <div class="item8" style="background-color: rgba(255, 255, 255, 0.8); text-align: center; padding: 20px 0; font-size: 20px;">
        Date:
    </div>


    <div class="item9" style="background-color: rgba(255, 255, 255, 0.8); text-align: center; padding: 20px 0; font-size: 20px;">
    </div>


    <div class="item10" style="background-color: rgba(255, 255, 255, 0.8); text-align: center; padding: 20px 0; font-size: 20px;">
        Learner Signature:
    </div>


    <div class="item11" style="background-color: rgba(255, 255, 255, 0.8); text-align: center; padding: 20px 0; font-size: 20px;">
    </div>


    <div class="item12" style="background-color: rgba(255, 255, 255, 0.8); text-align: center; padding: 20px 0; font-size: 20px;">
        Date:
    </div>


    <div class="item13" style="background-color: rgba(255, 255, 255, 0.8); text-align: center; padding: 20px 0; font-size: 20px;">
    </div>
</div>

Improve this question
1
  • 1
    I believe that you need place everything in the inline style tags. I do not know if it is best approach though. Or use visualforce email template. Other 'hack' is to create that email in another tool and send it, then open that email in outlook, download html version of the email and copy paste it to the template in salesforce
    – user1974566
    Commented Dec 19, 2018 at 10:40

2 Answers 2

Reset to default
1

When you send the email, what email provider are you using to look at it? Every email browser (Outlook, Gmail, Yahoo, Comcast, etc.) will respond to your code differently. Some browsers support an internal stylesheet. Some only support inline styles. Some will support your rgba colors. Others need a hex code. You may not be able to make all of them happy, so focus on the ones you expect your audience to use.

In this case, I'd say it's your grid styling that's being rejected. See this handy guide for which css selectors and properties are supported by each email browser: https://www.campaignmonitor.com/css/

Also, I know it sucks, but with email, you need to code like it's 1999 and go back to tables. Divs might work in some browsers, but they aren't foolproof.

Improve this answer
0

I got it working in the end by completely rebuilding it using https://www.campaignmonitor.com/css/ as a reference.

Improve this answer

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .