Reputation: 1265
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
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
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/
Upvotes: 1
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