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>
Related
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
I'v created a prestashop module in which it obtains airway bill numbers from an external API, This number I then add on a webpage and let users to print.
This bar code only appears on HTML page but does not visible on print preview dialog box
I use Smarty for html part since its by default uses by Prestashop.
Hear is my code,
<p style="font-family:IDAutomationHC39M;text-align: left">*{$order.other_data.awb}*</p>
any idea why this is happening? is there any solution for this?
UPDATE
{literal}
<style>
table { border-collapse: collapse;font-family:arial;}
td {padding: 8px;}
body { margin: 0;padding: 0;background-color: #FAFAFA;font: 12pt "Tahoma"; }
* {box-sizing: border-box;-moz-box-sizing: border-box; }
.page { width: 21cm;min-height: 29.7cm;padding: 1cm;margin: 0.5cm auto;border: 1px #D3D3D3 solid; border-radius: 5px;
background: white; box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); }
.subpage { padding: 0cm;border: 0px black solid;height: 256mm; }
#page { size: A4; margin: 0; }
#media print {.page {margin: 0;border: initial;border-radius: initial;width: initial;min-height: initial;box-shadow: initial;
background: initial;page-break-after: always;}}
</style>
{/literal}
{foreach from=$orders_array item=order}
<div class="page">
<div class="subpage">
<table border="3" style="border-style: solid;width:100%">
<tr>
<td>
<table border="0" style="border-style: solid;width:100%">
<tr>
<td><img src="{$order.other_data.logo}" alt="logo" height="100" width="300"></td>
<td>
<h3><u>{$order.other_data.service}</u></h3><br>
{$order.other_data.ppaddress}
<br>www.postaplus.com</td>
</tr>
</table>
<table border="1" style="border-style: solid;width:100%">
<tr>
<td style="width:40%"><b>From</b></td>
<td>
<b>{$order.other_data.shipper_name}</b>
<br>
{$order.other_data.shipper_address},<br>
{$order.other_data.shipper_country_code},<br>
Phone: {$order.other_data.shipper_phone},
</td>
</tr>
<tr>
<td><b>To</b></td>
<td>
<b>
</b><br>
{$order.params.SHIPINFO.Consignee.ToName},<br>
{$order.params.SHIPINFO.Consignee.ToAddress},
<br>
<b>Phone:</b> {$order.params.SHIPINFO.Consignee.ToMobile} / {$order.params.SHIPINFO.Consignee.ToTelPhone} <br>
<b>Civil Id:</b><br>
</td>
</tr>
<tr>
<td><b>Pay Type: {$order.params.original_order_array.payment_method}</b></td>
<td>Amount: {$order.params.original_order_array.total} - Currency - {$order.params.original_order_array.codcurrency} </td>
</tr>
<tr>
<td><b>Reference 1</b></td><td>{$order.params.original_order_array.reference} </td></tr>
<tr>
<td><b>Reference 2</b></td><td></td></tr>
<tr>
<td><b>Service</b></td><td>{$order.other_data.service}</td>
</tr>
<tr>
<td colspan="2">
<table width="100%">
<tr>
<td><b>Pieces:</b></td> <td>1</td> <td><b>Weight:</b></td> <td>{$order.other_data.total_weight} Kg</td>
</tr>
</table>
</td>
</tr>
<tr>
<td><b>Remarks</b></td>
<td></td>
</tr>
<tr>
<td>
<b>Note 2</b></td><td>{$order.other_data.original_order_data.notes2}</td></tr>
<tr>
<td><b>Shipper Order Number:</b></td>
<td>
<p style="font-family:IDAutomationHC39M;text-align: left">*{$order.other_data.awb}*</p>
</td>
</tr>
<tr>
<td><b>Shipment Date:</b></td><td>{$order.other_data.awb_date}</td></tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</div>
{/foreach}
<script>
window.print();
</script>
screen shots
html view
print preview
Thanks in advance.
Roshan
Roshan save the below code in html format and check whether it shows barcode in your print preview . if it works than you should try changing your font or check your code again..it will be very helpful if you upload your code here as well.also check display background graphics checkbox in print preview menu
<!DOCTYPE html>
<html>
<head>
<link href='https://fontlibrary.org/face/idautomationhc39m-code-39-barcode'
rel='stylesheet'>
<style>
p.serif {
font-family: 'IDAHC39M Code 39 Barcode', Times, serif;
}
p.sansserif {
font-family: Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>
<p class="serif">This is a paragraph, shown in the Times New Roman font.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<p>123456790</p>
<p>ABCDEFGHIJKLMNOPQRSTUVWXYZ</p>
<p>abcdefghijklmnopqrstuvwxyz</p>
</body>
</html>
Look for the link to the font itself in the header. It should look like this:
<link rel="stylesheet" media="screen" href="https://fontlibrary.org/face/idautomationhc39m-code-39-barcode" type="text/css"/>
Change the media="screen" to media="screen, print".
I would also recommend you try using 'IDAHC39M Code 39 Barcode' instead of IDAutomationHC39M for font family. (Make sure the quotes are there.)
So I need to change specific td elements font size through media queries.
EXCLAIMER *** Yes I know inline styles are horrible but I have to use them for this piece of work
I have two class .tbold and .tnormal which are for elements and I want to change their font size when the page because a mobile size e.g. 320px. I know how to do this if I was just using a normal class system or something like bootstrap but when using tables I am not sure how to do this
Here is my code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Audi MK Advert</title>
<style>
#font-face {
font-family: 'audibold';
font-style: normal;
font-weight: bold;
src: url('helper-files/fonts/AudiBold.otf') format('opentype');
}
#font-face {
font-family: 'audinormal';
font-style: normal;
font-weight:normal;
src: url('helper-files/fonts/AudiNormal.otf') format('opentype')
}
#media all and (max-width: 500px) and (min-width: 320px) {
table {
#tnormal {
font-size: 10px;
}
}
}
</style>
</head>
<body>
<!-- Audi Logo Top Right -->
<table style="float:right";
display:block;
margin-bottom: 10px>
<tr>
<td>
<img src="helper-files/imgs/logo.png">
</td>
</tr>
</table>
<br>
<br>
<!-- Grey Navbar -->
<table style="margin:auto">
<tr style="display:block; background-color:#858585">
<td><img src="helper-files/imgs/navbutton2.jpg" style="margin-bottom: 5px"></td>
<td><img src="helper-files/imgs/navbutton3.jpg" style="margin-bottom: 5px"></td>
<td><img src="helper-files/imgs/navbutton4.jpg" style="margin-bottom: 5px"></td>
<td><img src="helper-files/imgs/navbutton5.jpg" style="margin-bottom: 5px"></td>
<td><img src="helper-files/imgs/navbutton6.jpg" style="margin-bottom: 5px"></td>
<td><img src="helper-files/imgs/navbutton1.jpg" style="margin-bottom: 5px"></td>
<td><img src="helper-files/imgs/navbutton7.jpg" style="margin-bottom: 5px"></td>
</tr>
</table>
<!-- Audi Large Photo -->
<table style="width:100%">
<tr>
<td style=align:"center"><img src="helper-files/imgs/header.jpg" style="width:100%"></td>
</tr>
</table>
<!-- Body of text -->
<table style="background-color: lightgray; padding-bottom: 20px; color:grey">
<tr>
<td style="font-weight:bold; padding-bottom:15px; padding-top: 35px; font-size:35px; padding-left: 15px; padding-right: 15px;font-family: audibold">Whats in the name?</td>
</tr>
<tr>
<td class="tbold"; style="padding-bottom:15px; font-weight:bold; padding-right: 15px; padding-left: 15px; font-family: audibold">To reflect Ridgeway’s acquisition by Marshall Motor Holdings plc in May of this year, effective from the 1st of November, we have rebranded to Marshall.</td>
</tr>
<br>
<tr>
<td style="padding-bottom:15px; padding-left: 20px; padding-right: 15px; font-family: audinormal">Don’t worry – it’s not all change. Our excellent staff, standards and values will remain the same, ensuring that you receive consistently high levels of service.</td>
</tr>
<br>
<tr class="tnormal">
<td style="padding-bottom:15px; padding-left: 20px; padding-right: 15px; font-family: audinormal">The largest expansion acquisition that Marshall Motor Group has made to date, we are now part of a group that operates 103 franchise dealership businesses representing 24 different manufacturer brands across 25 counties in England, with
a turnover in excess of £2.1bn per annum and 3,500 colleagues; but you, the customer, are still our Number One!</td>
</tr>
<br>
<tr class="tnormal">
<td style="padding-bottom:15px; padding-left: 20px; padding-right: 15px; font-family: audinormal">With Marshall Motor Group (who are the 7th largest UK motor group in the UK), we are in a better position than ever to exceed expectations and adopt 106 years of dedicated Marshall expertise, with customer care and impeccable industry
knowledge at the heart of everything we do.</td>
</tr>
<br>
<tr class="tnormal">
<td style="padding-bottom:15px; padding-left: 20px; padding-right: 15px; font-family: audinormal">Just like always, we’re with you for the road ahead. Welcome to the next destination of our exciting journey. As part of the rebrand ridgeway.co.uk will redirect to our new online home of marshall.co.uk for all things Audi sales, service
and parts!</td>
</tr>
<tr class="tnormal">
<td style="font-weight:bold; font-size:35px; padding-left: 15px; padding-right: 15px; font-family: audibold">Marshall</td>
</tr>
<tr class="tnormal">
<td style="font-weight:bold; font-size:35px; padding-left: 20px; padding-right: 15px; font-family: audibold">The new name for Audi in Oxford and Newbury.</td>
</tr>
</table>
<!-- Red Labels -->
<table style="padding:20px; margin: auto">
<tr style= "display: block">
<td><img src="helper-files/imgs/visit.jpg"></td>
<td><img src="helper-files/imgs/about.jpg"></td>
<td><img src="helper-files/imgs/contact.jpg"></td>
<td><img src="helper-files/imgs/livechat.jpg"></td>
</tr>
</table>
<hr>
</body>
</html>
table {
#tnormal {
font-size: 10px;
}
}
You are not using SASS here, right?? This ain't work. Use:
table .tnormal {
font-size: 10px !important;
}
And change "#id" to ".class"
I have a table with 2 columns and on each column I have a different size of font (the bigger size font also strong).
My problem is the vertical alignment of the text: it doesn't align vertically (see the image):
Here's my html code:
<html>
<head>
<style>
.big-text-size {
font-size: 3.5em;
}
.small-text-size {
font-size: 1.1em;
}
</style>
</head>
<body>
<table>
<td class="big-text-size">
<strong>My doctor's name</strong>
</td>
<td class="small-text-size"> Daniel Boro </td>
</table>
</body>
</html>
Any suggestions why does it happen?
Tweak the vertical alignment of your different-size-text (see here):
<html>
<head><style>
.big-text-size {
font-size: 3.5em;
vertical-align: text-bottom;
}
.small-text-size {
font-size: 1.1em;
vertical-align: text-bottom;
}
</style></head>
<body>
<table>
<td class="big-text-size">
<strong>My doctor's name</strong>
</td>
<td class="small-text-size"> Daniel Boro </td>
</table>
</body>
</html>
Your second table doesn't have any rows...
<table>
<tr> <!-- Missing -->
<td class="small-text-size">Daniel Boro</td>
<td class="big-text-size"><strong>My doctor's name</strong></td>
</tr>
</table>
try including rows in your table..
you can also visit this site http://daker.me/2014/04/4-css-tricks-for-vertical-alignment.html It provides 4 CSS tricks that you can use to align text vertically in a table cell
I have this JSFiddle: Click here
<table class="findus-main-table">
<tr>
<td>
<img class="static-map" onClick="swap();" id="static-map-id" />
</td>
<td style="text-align: center; vertical-align:bottom; position: relative;">
<span style="font-size: 22px; font-weight: bold;">The address I want here</span>
<!-- the inner table for location and distance and phone number -->
<table style="text-align:left;" cellspacing="10">
<tr>
<td style="vertical-align:top">
<div>
<div>Phone: (613)-123-1234</div>
<div>Distance: 0.123km</div>
</div>
</td>
<td>
<div><b>Store Hours</b>
</div>
<div>Mon - Fri: 8am - 2am</div>
<div>Sat & Sun: 10am - 12am</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
What I want is to position the address to the top while the phone number and hours stays at the bottom. I tried using absolute but it wraps the text of the address which i really dont want.
How can I do it?
besides the fact that you shouldn't be using inline styling, is this what you're looking for?
<span style="font-size: 22px; font-weight: bold;position: absolute;top: 0;left: 0;right: 0;">
FIDDLE
instead of using position:absolute witch should be the last thing anyone should try ,I use vertical-align:top
here is a fiddle.and here is my css :
.address{
text-align:center;
font-size:22px;
text-align: center;
font-size: 22px;
height: 78px;
padding: 0;
vertical-align: top;
}