Uday A. Navapara
Uday A. Navapara

Reputation: 1265

Gmail is not allow stylesheet in mail

I want to set my email template design with css stylesheet

Every email addresses support this thing but the effect of style is not support by the Gmail

this is my code.

<style>
p
{
 margin-top:0px;
 margin-bottom:0px;
 line-height:20px;
}
.top
{
 margin-top:15px;
}
#top
{
 margin-top:25px;
}
.leftpadding
{
padding-left:25px;
}
#leftpadding
{
padding-left:45px;
}
</style>

<table width="50%">
<tr>
    <td valign="middle">

                    <img src="home1.png">   
    </td>
    <td valign="middle">    
        <span style="font-size:30px;float:right;">(Portal Name)</span>

    </td>
</tr>       
<tr>
    <td colspan=2 style="font-family: Arial, Helvetica, sans-serif; font-size:16px; color:#000; line-height:10px; border-top:2px #0d5497 solid   ">         
        <p>Dear Admin,</p>

        <p class="top leftpadding">A new ticket has been created which needs your attention. </p> 

        <p class="top leftpadding">Ticket details are given below - </p>
        <p class="top" id="leftpadding">Subject: $tickets.getSubject()</p>
        <p id="leftpadding">Category: $categories.getCatagoriesName()</p>
                    <p id="leftpadding"> Status: $status </p>
        <p id="leftpadding">Priority: $priority.getPriority_name()  </p>

        <p class="top leftpadding">You can check the status of or reply to this ticket online at:</p>
        <p class="leftpadding"><a href="$customizationSettings.getBrandDomain()/helpdesk/customersupport/viewTicket.html?ticketId=$tickets.getTicket_id()">View Ticket </a></p>         

        <p id=top>Thank You,</p>        
        <p>Support Team,</p>
        <p>$customizationSettings.getTitle()</p>
        <a href=$customizationSettings.getWebsiteUrl() target="_blank" style="text-decoration:none;">
            <span style="font-family:Myriad Pro; color:#0d5497; font-size:16px;">$customizationSettings.getWebsiteUrl()</span>
        </a>            
    <td>
</tr>   
</table>

There is one way to do this thing is inline stylesheet but it is very difficult and tuff job can any one give me proper way to do this?

Upvotes: 0

Views: 150

Answers (3)

Code3d
Code3d

Reputation: 73

Unfortunately, Gmail (and most of other email clients) does not support embedded css or style tag. So you will have to use inline style for each element. You can do it like

<p style="margin-top:0px; margin-bottom:0px; line-height:20px;">
    your content
    </p>

Upvotes: 1

newTag
newTag

Reputation: 2169

Yes this is the only one way since many web based e-mail clients do not recognize internal stylesheets. Actually the inline styling is the recommended way to design html newsletters.

Use inline styles for everything. This site will convert your classes to inline styles: http://premailer.dialect.ca/

enter image description here

Upvotes: 1

JegsVala
JegsVala

Reputation: 1857

you must to give the css in particular Tag like Please see the code

<span style="">
    <p style=""> This is test......</p>
</span>

Upvotes: 1

Related Questions