Basically I am trying to create an email template using HTML and Dreamweaver. It's my first template. The fact that I cannot use <div> tag for email templates is really giving me headache. I am having difficulty aligning the social icons with the "I am social text". They both are assigned with align="center" inside the td tag. The image that is displayed below is "footer" section of my email template.
Here's the screenshot:
I am only posting the code for footer section because my content and header section is working fine.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>TrickyPhotoshop Newsletter</title>
<style type="text/css">
body {
font-family: Tahoma, Geneva, sans-serif;
font-size: 15px;
background: #CCC;
}
h4.copyright, p.copyright {
padding-left: 50px;
color: #FFF
}
h4.social {
padding-left: 50px;
color: #fff;
}
p.footer {
color: #FFF;
}
</style>
</head>
<body>
<table width="600" align="center" bgcolor="#999999">
<tr>
<td align="center"><h4 class="social">I am also social</h4></td>
</tr>
<tr>
<td align="center"><p class="footer">
<a href="http://www.facebook.com/trickyphotoshop">
<img src=
"images/Facebook-256.gif" width="25px" height="25px"/>
</a>
<a href="http://www.tricky-photoshop.com">
<img src="images/g+.gif" width="25px" height="25px" />
</a>
<a href="http://www.twitter.com/trickyphotoshop/">
<img src="images/twitter.gif" width="25px" height="25px" />
</a>
</p></td>
</tr>
<tr>
<td height="10"><h4 class="copyright">Copyright Area</h4></td>
</tr>
<tr>
<td height="10"><p class="copyright">
© All rights reserved
</p></td>
</tr>
</table>
</body>
</html>
Basically I want two things:
I want to properly align "I am also social" text with the three icons i.e. facebook, twitter, google+
As you can see there is a huge space between "Copyright Area" and "All Rights Reserved". I want to remove this space.
I know that my code is not too much professional but it's my first HTML code.
You should change the style as follows:
h4.social {
/* remove: padding-left: 50px; */
color: #fff;
}
h4.copyright, p.copyright {
padding-left: 50px;
margin: 0px; /* add this line */
color: #FFF;
}
I recommend using this chrome extension for "playing" with CSS changes
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've tried to Frankenstein together an e-mail signature but I'm failing.
I opened the e-mail on iPhone, Mac Mail, Thunderbird and Gmail and they all look different. Some drop the social icons below the main logo, others drop the gray text.
Fiddle (looking correct): https://i.imgur.com/OmjAliW.png
Thundermail: https://i.imgur.com/gk0eL3y.jpg
Gmail: https://i.imgur.com/DVZYdxF.png
Mac mail: https://i.imgur.com/jPS89ou.png
iPhone: https://i.imgur.com/ZZob4Ie.png
Here's the current code:
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,900&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Montserrat', sans-serif;
font-size: 12px;
font-weight: 300;
color: black;
}
td {
display: table-cell;
}
table {
table-layout: fixed;
height: 81px;
width: 250px;
overflow-y: hidden;
display: block;
}
</style>
</head>
<body>
<table>
<tr>
<td rowspan="2" style="width:45px;vertical-align:top"><img style="border:none" width="45" src="https://i.imgur.com/qFFfOdW.png">
</td>
<td style="height:45px;vertical-align:top;padding-top:7px;padding-left:15px"><b><span style="color:#000000;font-size:12px;">NAME HERE</span></b><br><span style="color:grey;font-size:10px;font-weight:400;">General Manager</span></td>
</tr>
<tr>
<td style="padding-left:15px;vertical-align:bottom">
<img width="22" src="https://i.imgur.com/L7RBFZu.png" alt="Facebook" style="border:none">
<img width="22" src="https://i.imgur.com/Pj2TSoO.png" alt="Instagram" style="border:none">
<img width="22" src="https://i.imgur.com/qtmS8US.png" alt="Website" style="border:none">
</td>
</tr>
</table>
</body>
</html>
Some modern mail clients allow non-inline CSS. However, most of the email clients still require you to write your CSS inline, so the table style cannot be at the top of the page but has to be embedded like <table style="..."></table>
See https://www.campaignmonitor.com/css/ for a list which describes which clients allow what tags.
Also, and I don't know if this will make a difference, but use '20px' instead of just '20'.
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 recently began construction of my first website, I'm still a beginner in html. My site has three buttons on the side, "Games", "Chat", and "About". They all have custom pictures, but it seems like there is a very small hyperlinked "-" in the bottom right of the button. Like a hyperlink, it turns red when clicked. Here is a picture of my clicking the "Games" button: As you can see, there is a small "-" hyperlink on the bottom right of the button.
Here is ALL my code for the games page:
<html>
<header>
<title>CBgames.com</title>
</header>
<body bgcolor=#474747 text=#FFFFFF>
<center>
<img src="siteimages/title.gif">
</center>
<a href="file:///C:/Users/user/Desktop/htmlwebsite/games.html">
<img src="siteimages/gamesbutton.gif" onmouseover="this.src='siteimages/mouseovergamesbutton.gif';" onmouseout="this.src='siteimages/gamesbutton.gif'" />
</a>
<br>
<a href="file:///C:/Users/user/Desktop/htmlwebsite/chat.html">
<img src="siteimages/chatbutton.gif" onmouseover="this.src='siteimages/mouseoverchatbutton.gif';" onmouseout="this.src='siteimages/chatbutton.gif'" />
</a>
<br>
<a href="file:///C:/Users/user/Desktop/htmlwebsite/about.html">
<img src="siteimages/aboutbutton.gif" onmouseover="this.src='siteimages/mouseoveraboutbutton.gif';" onmouseout="this.src='siteimages/aboutbutton.gif'" >
</a>
<br>
<br>
<table Align="left" Border="1" Width="300">
<tr>
<td><center>Our Newest Games:</center></TD>
</tr>
<tr>
<td>
<center>Game</center>
<center>Game</center>
<center>Game</center>
</td>
</tr>
</table>
<style type="text/css">
body {
margin:0px;
padding-bottom:25px;
}
#footer {
color:white;
font:George, "Times New Roman", Times, serif;
font-size:16px;
width:1920px;
height:20px;
line-height:20px;
background-color:#474747;
text-align:center;
position:fixed;
bottom:0px;
}
</style>
<head>
<body>
<div id="footer">
COPYRIGHT © 2015 CB-GAMES.NET [SA] - ALL RIGHTS RESERVED
</div>
</body>
</body>
</html>
I'm still a newbie at this, sorry for any troubles.
This is the syntax for adding a URL in HTML
link text
An example of adding "Example" website URL would be like the following
Click here to direct to Example site
You have spaces between the start tag for the anchor and the image inside of it (and between the image and the end tag).
Spaces are text.
Text in a link gets underlined.
Reformat your HTML to remove the spaces.
There is still an awful lot wrong with your markup but here is a quick attempt of moving you along in the right direction:
<!doctype html>
<html>
<head>
<title>CBgames.com</title>
<style type="text/stylesheet">
BODY {
background-color:#474747;
color:#FFF;
margin:0;
padding-bottom:25px;
}
.titleimage { text-align:center; }
.buttons {
margin-bottom: 2em;
}
.buttons A { display:block; }
.table1 { text-align:left; border:solid 1px #000; width: 300px; }
#footer {
color:white;
font:George, "Times New Roman", Times, serif;
font-size:16px;
height:20px;
line-height:20px;
background-color:#474747;
text-align:center;
position:fixed;
left:0;right:0;bottom:0;
}
</style>
</head>
<body>
<dIv class="titleimage"><img src="siteimages/title.gif"></div>
<div class="buttons">
<a href="games.html"><img
src="siteimages/gamesbutton.gif" onmouseover="this.src='siteimages/mouseovergamesbutton.gif';" onmouseout="this.src='siteimages/gamesbutton.gif'" /></a>
<a href="chat.html"><img
src="siteimages/chatbutton.gif" onmouseover="this.src='siteimages/mouseoverchatbutton.gif';" onmouseout="this.src='siteimages/chatbutton.gif'" /></a>
<a href="about.html"><img
src="siteimages/aboutbutton.gif" onmouseover="this.src='siteimages/mouseoveraboutbutton.gif';" onmouseout="this.src='siteimages/aboutbutton.gif'" ></a>
<div>
<table class="table1">
<tr><td>Our Newest Games:</td></tr>
<tr>
<td>
<div>Game</div>
<div>Game</div>
<div>Game</div>
</td>
</tr>
</table>
<footer id="footer">
COPYRIGHT © 2015 CB-GAMES.NET [SA] - ALL RIGHTS RESERVED
</footer>
</body>
</html>
I have a big problem with creating a HTML footer for my dad's firm. They are using OE and Outlook 10. I've working on the code for very long, but still I have some problems. Can I use external font? How should I make it working? How about positioning it with width: X% ?
I would like it to look like this:
But it doesn't...
Here's the code:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>www.k#$#$#$#$#$#$#$.com</title>
<style>
#font-face {
font-family: times_Sans_Serif;
src: url('http://a#$#$#$#$#$#$#$.pl/tem/TIMESS_.ttf');
}
p, a, span {
font-family: times_Sans_Serif;
}
a {
text-decoration:none;
}
.header {
width:100%;
height:5px;
display:block;
background-color:#6d5759;
}
.section li{
float: left;
display: inline;
list-style-type: none;
margin:0% 3%;
padding:0;
position:relative;
}
.section p{
display:block;
text-align: left;
color:#6d5759;
}
.section a{
color: #6d5759;
}
#logo {
text-decoration:none;
text-align: right;
}
.footer {
clear:both;
font-size:11px;
width:100%;
height:auto;
display:block;
background-color:#6d5759;
color:#FFF;
text-align:center;
padding: 5px;
}
.footer a{
color:#FFF;
}
</style>
</head>
<body>
<div class="main">
<div class="header"></div>
<ul class="section">
<li id="osoba">
<p>
Marcjusz K#$#$#$#$#$#$#$<br>
+48 500 000 000<br>
marcjusz#k#$#$#$#$#$#$#$.com
</p>
</li>
<li id="logo">
<img src="http://#$#$#$#$#$#$#$.pl/tem/image001.png">
</li>
</ul>
<div class="footer">
<span> K#$#$#$#$#$#$#$ Ubezpieczenia Sp.J. | 31-475 Kraków ul. STREET1 | 32-700 Bochnia ul. STREET2 | 32-800 Brzesko ul. STREET 3 | www.kr#$#$#$#$#$#$#$.com</span>
</div>
</div>
</body>
</html>
Can you help me with that? I would be very helpful!
Style sheets are NOT supported by most mail clients. Some inline styles are allowed. Positioning is generally NOT supported to prevent emails from escaping their containers - imagine an email trying to spoof a Gmail menu or something like that.
In general:
use tables for layout
use inline styles
For a good guild to what is supported, see:
http://www.campaignmonitor.com/css/
emails are weird in that you almost need to use html from 10 years ago to make it work properly. A lot of clients strip out most of the things in the head (including the actual body tag). This includes gmail, yahoo, hotmail etc. They keep only certain things. Some keep the styles, but not all.
I suggest you move your styles away from the head and inline them inside the tags using the style="" property and use tables (think back to the 90s)
so you might have something like this:
<table width="100%">
<tr>
<td id="osoba" style="">..Osoba...<td>
<td id="logo" style="">..logo..</td>
</tr>
<tr>
<td id="footer" style="">...footer...</td>
</tr>
</table>
note: I put the id's there for clarification purposes but since we stripped out your id's, they are not necessary.
I've done it! It looks as I wanted. ;) It was kind of mental pain for me to make layout using tables, but it works! ;P Thanks for help!
Here is the code for anybody who has similar problems:
<html>
<head>
<meta charset="utf-8">
<title>www.#¤#¤#¤#¤#¤#¤#¤#¤#.com</title>
</head>
<body>
<table width="100%" align="center">
<tr>
<td colspan="4" style="width:100%; height:5px; background-color:#818285"></td>
</tr>
<tr style="color: #818285;" align="center">
<td width="20%"></td>
<td align="right" width="24%">
<div style="text-align:left; width:180px; right:0%; color:#818285;">
<a style="color:#818285; text-decoration:none;" href="http://k#¤#¤#¤#¤#¤#¤#¤#¤#.com/o-nas" target="_blank">Marcjusz K#¤#¤#¤#¤#¤#¤#¤#¤#</a><br>
+48 500 000 000<br>
<a style="color:#818285; text-decoration:none;" href="mailto:marcjusz#k#¤#¤#¤#¤#¤#¤#¤#¤#.com">marcjusz#k#¤#¤#¤#¤#¤#¤#¤#¤#.com</a>
</div>
</td>
<td align="center" width="4%" style="font-size:2em; color:#818285;"></td>
<td align="left" width="52%">
<a style="color:#818285; text-decoration:none;" href="http://k#¤#¤#¤#¤#¤#¤#¤#¤#.com/" target="_blank"><img src="http://#¤#¤#¤#¤#¤#¤#¤#¤#.pl/tem/logo-poziom300.jpg"></a>
</td>
</tr>
<tr><td colspan="4" style="font-size:11px; background-color:#818285; color:#FFF; text-align:center; padding: 5px; ">
<span> K#$#$#$#$#$#$#$# Ubezpieczenia Sp.J. | 31-475 Kraków ul. STREET 6a | 32-700 Bochnia ul. STREET 14 | 32-800 Brzesko ul. STREET 3 | <a style="color:#FFF; text-decoration:none;" href="http://k#$#$#$#$#$#$#$#$#.com/" target="_blank">www.k#$#$#$#$#$#$#$#.com</a></span>
</td></tr>
</table>
</body>
</html>