I have made an email template that gets sent once the user completes the registration. The template contains some icons from font-awesome, images, and some imported Google fonts.
These items are getting rendered perfectly when I am viewing the HTML file on the browser but when this is sent as an email nothing is getting rendered other than the texts only.
I tried moving the CSS styling inline but that doesn't work either. I am unable to understand what the problem is. Below is the code.
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!--<link rel="stylesheet" href="{% static 'regd_success_email.css' %}">-->
<style>
#import url('https://fonts.googleapis.com/css2?family=Carattere&display=swap');
body
{
margin: 0;
padding: 0;
}
table
{
border-spacing: 0;
}
td
{
padding: 0;
}
.wrapper
{
width: 100%;
table-layout: fixed;
background-color: #cccccc;
padding-bottom: 60px;
}
.welcome
{
font-family: 'Carattere', cursive;
}
.main
{
background-color: #ffffff;
margin: 0 auto;
width: 100%;
max-width: 600px;
border-spacing: 0;
font-family: sans-serif;
color: #4a4a4a;
}
.email-body
{
font-family: 'Carattere', cursive;
font-weight: bold;
font-size: 25px;
padding: 5px 0 15px;
}
.button
{
background-color: #289dcf;
color: #ffffff;
text-decoration: none;
padding: 12px 12px;
font-weight: bold;
border-radius: 5px;
cursor: pointer;
}
.subs-and-pays
{
font-size: 15px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
padding: 5px 0 5px;
}
#media screen and (max-width:600px) {
}
#media screen and (max-width: 400px) {
}
</style>
</head>
<body>
<center class="wrapper">
<table class="main" width="100%">
<tr>
<td height="8" style="background-color: #289dcf;"></td>
</tr>
<tr>
<td style="background-color: #001035;">
<a href="http://127.0.0.1:8000/">
<img src="{% static '../static/images/logo1.png' %}" alt="" width="600px" style="max-width: 100%;">
</a>
</td>
</tr>
<tr>
<td style="padding: 5px 0 50px;">
<table width="100%">
<tr>
<td style="text-align: center; padding: 15px">
<p style="font-size: 50px;" class="welcome"><strong style="color: #289dcf;">Welcome to Solve Litigation</strong></p>
<p class="email-body">Hello, {{name}}, you have been succesfuly registered with Solve Litigation.</p>
Go to Website <i class="fas fa-arrow-circle-right"></i>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="2" style="background-color: #a6d8ee;"></td>
</tr>
<tr>
<td style="padding: 5px 0 20px;">
<table width="100%">
<tr>
<td style="text-align: center; padding: 15px">
<p style="font-size: 20px;"><strong style="color: #289dcf;">Subscription and Payments</strong></p>
<p class="subs-and-pays"> For Subscription details and Payment methods click on the <strong> User Profile </strong> button after you login and then click on <strong>Payments</strong>. </p>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="2" style="background-color: #a6d8ee;"></td>
</tr>
<tr>
<td style="padding: 5px 0 20px;">
<table width="100%">
<tr>
<td style="text-align: center; padding: 15px">
<p style="font-size: 20px;"><strong style="color: #289dcf;">Contact Us <i class="fas fa-envelope"></i> </strong></p>
<p class="subs-and-pays"> To contact us regarding more details, updation of the information provided during registration or any other queries, click on the <strong> User Profile </strong> button after you login and then click on <strong>Contact</strong>. </p>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="8" style="background-color: #289dcf;"></td>
</tr>
</table>
</center>
</body>
<script src="https://kit.fontawesome.com/2b3aa8f23b.js" crossorigin="anonymous"></script>
</html>
This is a Django project so the image URLs I wrote are the convention of Django template language.
You need to host your images externally (and have them be publicly accessible) for them to be visible in an email or send them as an attachment.
Add your images to an image hosting service and replace your paths with absolute links to them.
You can also send your images as attachments but this is a less preferred option as it can increase the size of your email, which in turn can cause it to be blocked by email filters.
This answer has details on adding images as attachments in Django.
You can't use webfonts reliably in html emails. Some clients might respect and render them, but the majority don't.
You can use font awesome to png website to convert the icons into images, and Add it to an image hosting service to show them in email template
On my website, I have a class to change font and text size named class='q'. the class will not work even though I copy and pasted this from the home page as It is menu bar for all pages. All other classes work but not this one, Why?
th.q {
font-family: avenir;
font-size: 25px;
}
<BODY>
<TABLE class='a' border='0' width='100%'>
<TR height='20%'>
<TH class='q'><a class="hover">About</a></TH>
<TH class='q'><a>Products</a></TH>
<TH class='q'><a>Pricing</a></TH>
<TH class='q'><a>Contact</a></TH>
</TR>
</TABLE>
(Referring to your answer:)
Unfortunately, giving multiple elements the same id invalidates your HTML. If the #font selector was enough to fix the problem, you should be able to give the <table> an id instead and select its <th> descendants:
#navigation th {
font-size: 25px;
}
<TABLE id='navigation' class='a' border='0' width='100%'>
<TR height='20%'>
<TH><a class="hover">About</a></TH>
<TH><a>Products</a></TH>
<TH><a>Pricing</a></TH>
<TH><a>Contact</a></TH>
</TR>
</TABLE>
Also, the border, width, and height attributes should be in CSS, not HTML:
#navigation th {
font-size: 25px;
}
#navigation {
border: none;
width: 100%;
}
#navigation tr {
height: 20%;
}
<TABLE id='navigation' class='a'>
<TR>
<TH><a class="hover">About</a></TH>
<TH><a>Products</a></TH>
<TH><a>Pricing</a></TH>
<TH><a>Contact</a></TH>
</TR>
</TABLE>
Of course, you shouldn't be using tables for layout, anyway.
Since nothing else works I have used Ids to fix it.
HTML
<BODY>
<TABLE class='a' border='0' width='100%'>
<TR height='20%'>
<TH id='font'><a class="hover">About</a></TH>
<TH id='font'><a>Products</a></TH>
<TH id='font'><a>Pricing</a></TH>
<TH id='font'><a>Contact</a></TH>
</TR>
</TABLE>
CSS
#font {
font-family: avenir;
font-size: 25px;
}
I am writing an html email using inline styles since I'll be sending it in Outlook and read that's the best way to circumvent browser reformatting. I want to center the two links below, which I put into table cells because that's the only way I could get padding to work in Outlook. I would like the 2 links to appear centered with their background and padding on the page, but I don't know how to do that using inline styling and tables. Can anyone help? Thanks!
<!DOCTYPE html>
<html>
<head>
<title>email blast re films</title>
</head>
<body>
<table>
<tr>
<td style="padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px; font-size: 14px; background: #3D87F5; color: white;">
Watch my film "wall cuts, train stations, New York City"
</td>
</tr>
</table>
<table>
<tr>
<td style="padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px; font-size: 14px; background: #3D87F5; color: white;">
Watch my film "red hook, rush hour"
</td>
</tr>
</table>
<table>
<tr>
<td style="font-size: 14px; text-align: center; padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px; background: #3A8E47;">
<a href="http://www.bartonlewisfilm.com" style="display: inline-block; padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px; background: #3A8E47;
text-decoration: none; color: white;" title="visit bartonlewisfilm.com" target="_blank;">bartonlewisfilm.com</a> | home (718) 399-8344 | cell (347) 325-4415
</td>
</tr>
</table>
</body>
</html>
First, instead of using padding on each cell, you can just specify cellpadding attribute for a table tag -
<table cellpadding="10">
The cell content is centered by default -
<table cellpadding="10">
<tr>
<td style="background-color: red;">
Link 1<br/>
Link 2
</td>
</tr>
<tr>
<td style="background-color: red;">
Link 1<br/>
Link 2
</td>
</tr>
</table>
UPD
To center the whole table, set margin to 0 auto -
<table style="margin: 0 auto;">
To center only either a row or a column, apply accordingly -
<tr style="width: 50%; margin: 0 auto; display: table;"></tr>
or
<td style="width: 50%; margin: 0 auto; display: table;"></td>
You add an align attribute to the td cell.
<td align="center" style="padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px; font-size: 14px; background: #3D87F5; color: white;"> Your link
</td>
Adding margin to body tag, will that work for you.
<body style="margin-top:20%;margin-bottom:20%;margin-left:30%;">
Use text-align:center, vertical-align:middle,
table{width:100%;height:100%;}
td{width:100%;height:100%; text-align:center; vertical-align:middle; font-size: 14px; }
a, a:link, a:visited{padding:10px; display:inline-block; color: white; text-decoration: none;margin:10px; background: #3D87F5; }
<!DOCTYPE html>
<html>
<head>
<title>email blast re films</title>
</head>
<body>
<div id="centerme">
<table>
<tr>
<td>
Watch my film "wall cuts, train stations, New York City"
<br/>
Watch my film "red hook, rush hour"
</td>
</tr>
</table>
</div>
</body>
</html>
Check out this html. Appears fine to me.
<!DOCTYPE html>
<html>
<head>
<title>email blast re films</title>
</head>
<body style="height:height:500px;">
<table border="0" style="width:100%; text-align:center;">
<tr>
<td >
<span style="border-radius: 5px;display:block;margin-left:20%;margin-right:20%;margin-top:10%;padding-top:10px;padding-right:10px;padding-bottom:10px; font-size: 14px; background: #3D87F5; color: white;">Watch my film "wall cuts, train stations, New York City"</span>
<span style="display:block;margin-left:20%;margin-right:20%;padding-top:10px;padding-right:10px;padding-bottom:10px; font-size: 14px; color: white;border-radius:5px;"> </span>
<span style="border-radius: 5px;display:block;margin-left:20%;margin-right:20%;padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px; font-size: 14px; background: #3D87F5; color: white;">Watch my film "red hook, rush hour"</span>
<span style="display:block;margin-left:20%;margin-right:20%;padding-top:10px;padding-right:10px;padding-bottom:10px; font-size: 14px; color: white;border-radius:5px;"> </span>
</td>
</tr>
<tr>
<td style="font-size: 14px; text-align: center; padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px; background: #3A8E47;">
<a href="http://www.bartonlewisfilm.com" style="display: inline-block; padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px; background: #3A8E47;
text-decoration: none; color: white;" title="visit bartonlewisfilm.com" target="_blank;">bartonlewisfilm.com</a> | home (718) 399-8344 | cell (347) 325-4415
</td>
</tr>
</table>
</body>
</html>
I have run into following issue. I am displaying a table with data on a page, which is nested in main . Its margin-left isset to 5% (margin-right too) and it has defined width. For some reason when I load the page in Chrome, the left margin is ignored. And here it gets interesting. When I open dev console it gets applied. If I reload the page with console open, it gets broken again. When I turn off any css setting in the console (or basicaly touch anything related to content) it gets fixed again. I am using Unsemantic framework for responsive behavior (only desktop part of it) and I had no trouble with it so far, just this. And since it behaves this strangely, I dont think it has anything to do with the code.
You can see it clearly on this short screencap: http://screencast.com/t/mGotS01iC
Just to be sure, I am posting HTML and CSS for the element:
<table class="grid-90 prefix-5 suffix-5">
<tbody>
<tr>
<th> UserName </th>
<th> Email </th>
<th> Guid </th>
<th> IsUsingTempPasswd </th>
<th> LastLogin </th>
<th> PasswordChanged </th>
<th>Actions</th>
</tr>
<tr>
<td> Administrator </td>
<td> admin#physter.com </td>
<td>
<div class="table-long">00000002-0000-0000-0000-000000000069</div>
</td>
<td class="cell-checkbox">
<input class="check-box" type="checkbox" disabled="disabled">
</td>
<td> </td>
<td> 26.7.2013 12:11:06 </td>
<td class="actions">
Edit
|
Details
|
Delete
|
Reset Password
</td>
</tr>
<tr>
<td> venca </td>
<td> venca#mail.cz </td>
<td>
<div class="table-long">00000002-0000-0000-0000-00000000006a</div>
</td>
<td class="cell-checkbox">
<input class="check-box" type="checkbox" disabled="disabled">
</td>
<td> 23.8.2013 12:23:39 </td>
<td> 26.7.2013 12:11:06 </td>
<td class="actions">
Edit
|
Details
|
Delete
|
Reset Password
</td>
</tr>
<tr>
<td colspan="7">
Create New
</td>
</tr>
</tbody>
</table>
Here is CSS for the element:
grid-90 {
float: left;
width: 90%;
}
.suffix-5 {
margin-right: 5%;
}
.prefix-5 {
margin-left: 5%;
}
.grid-5, .mobile-grid-5, .tablet-grid-5, .grid-10, .mobile-grid-10, .tablet-grid-10, .grid-15, .mobile-grid-15, .tablet-grid-15, .grid-20, .mobile-grid-20, .tablet-grid-20, .grid-25, .mobile-grid-25, .tablet-grid-25, .grid-30, .mobile-grid-30, .tablet-grid-30, .grid-35, .mobile-grid-35, .tablet-grid-35, .grid-40, .mobile-grid-40, .tablet-grid-40, .grid-45, .mobile-grid-45, .tablet-grid-45, .grid-50, .mobile-grid-50, .tablet-grid-50, .grid-55, .mobile-grid-55, .tablet-grid-55, .grid-60, .mobile-grid-60, .tablet-grid-60, .grid-65, .mobile-grid-65, .tablet-grid-65, .grid-70, .mobile-grid-70, .tablet-grid-70, .grid-75, .mobile-grid-75, .tablet-grid-75, .grid-80, .mobile-grid-80, .tablet-grid-80, .grid-85, .mobile-grid-85, .tablet-grid-85, .grid-90, .mobile-grid-90, .tablet-grid-90, .grid-95, .mobile-grid-95, .tablet-grid-95, .grid-100, .mobile-grid-100, .tablet-grid-100, .grid-33, .mobile-grid-33, .tablet-grid-33, .grid-66, .mobile-grid-66, .tablet-grid-66 {
-moz-box-sizing: border-box;
padding-left: 10px;
padding-right: 10px;
}
table {
border: medium none;
margin-bottom: 2.5em;
margin-top: 1em;
text-align: left;
width: 100%;
}
body {
color: #006666;
font-family: "Segoe UI",Verdana,Helvetica,Sans-Serif;
font-size: 0.85em;
}
Anybody has an idea? I would be grateful for solution that would allow me keep the framework as it is and do not overwrite its behavior...
Width of 90% and the fact that you want the table on center are enough. The edges will be calculated automatically. So your code would look like this:
CSS
grid-90 {
width: 90%; }
.grid-5, .mobile-grid-5, .tablet-grid-5, .grid-10, .mobile-grid-10, .tablet-grid-10, .grid-15, .mobile-grid-15, .tablet-grid-15, .grid-20, .mobile-grid-20, .tablet-grid-20, .grid-25, .mobile-grid-25, .tablet-grid-25, .grid-30, .mobile-grid-30, .tablet-grid-30, .grid-35, .mobile-grid-35, .tablet-grid-35, .grid-40, .mobile-grid-40, .tablet-grid-40, .grid-45, .mobile-grid-45, .tablet-grid-45, .grid-50, .mobile-grid-50, .tablet-grid-50, .grid-55, .mobile-grid-55, .tablet-grid-55, .grid-60, .mobile-grid-60, .tablet-grid-60, .grid-65, .mobile-grid-65, .tablet-grid-65, .grid-70, .mobile-grid-70, .tablet-grid-70, .grid-75, .mobile-grid-75, .tablet-grid-75, .grid-80, .mobile-grid-80, .tablet-grid-80, .grid-85, .mobile-grid-85, .tablet-grid-85, .grid-90, .mobile-grid-90, .tablet-grid-90, .grid-95, .mobile-grid-95, .tablet-grid-95, .grid-100, .mobile-grid-100, .tablet-grid-100, .grid-33, .mobile-grid-33, .tablet-grid-33, .grid-66, .mobile-grid-66, .tablet-grid-66 {
-moz-box-sizing: border-box;
padding-left: 10px;
padding-right: 10px;
}
table {
border: medium none;
margin-bottom: 2.5em;
margin-top: 1em;
text-align: left;
margin: 0 auto;
}
body {
color: #006666;
font-family: "Segoe UI",Verdana,Helvetica,Sans-Serif;
font-size: 0.85em;
}
In HTML remove the names of the two divisions: <table class="grid-90"> I hope that helps!
Only thing needed was a little "hack" - adding float:none !important; to <table> elelemnt was enough.
Thanks to Dragos Sandu who put me up to this - removing float:left from grid-90 class was his idea and first step I tried.
I have looked through all the answers posted but I cant seem to get this code to work correctly. I am trying to get the individual cell to change color when I hover over it, but I don't have access to the .css with the service we are using. I am being forced to drop an HTML code box that I can paste my code into specific to the element I am changing, but not the entire .css file...just that element.
Here is my code. Any help in getting the background to change to #ff0000 and the Text to change to #000000 when I roll over the cell would be greatly appreciated.
(It is ultimately my intent to add a >a href for each of the cells as well, but I am trying to do this one step at a time. The >a href will (I hope) add the selected cell to a shopping cart.)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml:lang="en" lang="en" xmlns="http://www.w3.org/1999/xhtml">
<title></title>
<style type="text/css">
body {
background: #000;
}
#wrap {
margin: 0 auto; /* margin 0 auto will center that box in your document */
width: 780px; /*size of your box*/
background: #000;
text-align: center; /* everything will be written in that box will be centered horizontally*/
}
</style>
<div id="wrap">
<table width="780">
<tr>
<td align="center">
<table border=1>
<tbody>
<!-- Results table headers -->
<tr>
<th>Messages Per Month</th>
<th>1 Month Pricing</th>
<th>3 Month Pricing</th>
<th>12 Month Pricing</th>
</tr>
<tr>
<td>500</td>
<td>$14.95/Month</td>
<td>$12.95/Month</td>
<td>$9.95/Month</td>
</tr>
<tr>
<td>1,000</td>
<td>$24.95/Month</td>
<td>$20.95/Month</td>
<td>$17.95/Month</td>
</tr>
<tr>
<td>1,500</td>
<td>$37.95/Month</td>
<td>$31.95/Month</td>
<td>$26.95/Month</td>
</tr>
<tr>
<td>2,000</td>
<td>$49.95/Month</td>
<td>$41.95/Month</td>
<td>$35.95/Month</td>
</tr>
<tr>
<td>2,500</td>
<td>$62.95/Month</td>
<td>$52.95/Month</td>
<td>$44.95/Month</td>
</tr>
<tr>
<td>5,000</td>
<td>$119.95/Month</td>
<td>Not Available</td>
<td>Not Available</td>
</tr>
<tr>
<td>7,500</td>
<td>$179.95/Month</td>
<td>Not Available</td>
<td>Not Available</td>
</tr>
<tr>
<td>10,000</td>
<td>$219.95/Month</td>
<td>Not Available</td>
<td>Not Available</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
</div>
In CSS:
td:hover {
background-color: #ff0000;
color: #000000;
}
Or you can use JavaScript/jQuery:
$(document).ready(function() {
$("td").hover(
function() {
$(this).css('background-color', '#ff0000');
$(this).css('color', '#000000');
},
function() {
$(this).css('background-color', 'none');
$(this).css('color', 'black'); // or whatever your original color was
}
);
});
Wrap the cell data with a div (class="cell_hvr") and a link around the content.
.cell_hvr {
padding: 2px;
width: 100%;
height: 100%;
}
.cell_hvr a {
display: block;
text-decoration: none;
}
.cell_hvr a:hover {
background-color: red;
}
<div class="cell_hvr"> (Your content) </div>
You can do this by giving each cell a class
<td class="a">..</td>
and then styling it
<style>
td.a { background-color:#ff0000; }
td.a:hover { background-color:#000000; }
</style>
CSS: td:hover, th:hover { background:#ff0000; color:#000; }
I was looking for the JavaScript version of the answer to this question. But, I am not using JQuery..
I have
oCell = newRow.insertCell();
oCell.style.background = tintTest(myCounts[i]);
myCounts is just an array holding an Int..
but now i just wanted to add the hover background color to my current oCell before smashing it in line and moving on with the loop......
So I found the code below as the only checked answer in a stream of 'can't be done'.. just not sure if this would even help me.
var css = 'table td:hover{ background-color: #00ff00 }';
var style = document.createElement('style');
if (style.styleSheet) {
style.styleSheet.cssText = css;
} else {
style.appendChild(document.createTextNode(css));
}
document.getElementsByTagName('head')[0].appendChild(style);
EDIT!!! I just found out my issue (I hope the code snip helps with yours still) I tried to add the hover in CSS and it just isn't supported at all.