im trying to make an outlook signature with html.
I dont know how can i do a signature email with 3 rows
what i want
what i get
There is my code:
<section id="2" style="float: left; position:relative; margin-left: 230px; width: 250px;">
<div id="user" style="margin-top: 10px;">
<h1 style="margin: 0px 0px 5px 0px !important; font-size: 20px; color: #414042; font-weight:bolder; font-family: Arial, Helvetica, sans-serif;">Adriano Medeiros</h1>
<h2 style="margin: 5px 0px 0px 0px !important;font-size: 16px; color: #414042; font-family: Arial, Helvetica, sans-serif; font-weight: normal;">MARKETING DIRECTOR</h2>
<h3 style="margin: 10px 0px 0px 0px !important; font-size: 14px; color: #414042; font-family: Arial, Helvetica, sans-serif; font-weight: normal;">Dpt. Marketing e Comunicação</h3>
</div>
<div id="email" style="margin-top: 10px;">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB8AAAAUCAYAAAB1aeb6AAAACXBIWXMAABYlAAAWJQFJUiTwAAABiUlEQVRIieWVvXXCMBSFP3HoYYQ0qgMThEwQGtWYDcwGMAFkAkyLCjwC2cBpUUM2MBO8FJJPHBMn5rfJLe139Pndd5+sRARnVQRE3Ec5EGkjuRIRAJxVCTC6MfgDGGojGYDarUmAWBvJgwPLG4HfgUHgDIGHFr7brbOqq40kwDNwuDJ4VQJHwAbotsLLR2DvrOppI1tggLfoGpppI1EAJ5ScbZWKOngHipn08FZdorE2MnVWdZ1VKZVMtSrFHWDjrIq0kRzvwOoM6AHoayOJs6oLbIGXalEVXmjprEq0kVwbiYDXE8BFsDJnVQ/Y48d6pDo4wMhZlYYgxsC4AfitBI7wHXfqin+Dg7eqvAl96jdhpY0UiY7xwaoFN4HD903I8DmoBnESxlNcVvMG59JuUsTXJsQhRAMgDu8ybSQNwUqBp4ZnonZrpGlx0EQbWZQfhGAl1ASrRrOmnZc1D50XH9ADpvwx3590Dhx8EI/29lQ1CdzN9L/hl/48zlXWxl8aC+DhjuCFNpJ+Agxhobt2v5EjAAAAAElFTkSuQmCC" alt="email" style="width: 20px; position: absolute; margin-top: 15px;">
<p style="margin-top:15px; float: left; margin-left: 40px; font-size: 14px; font-family: Arial, Helvetica, sans-serif;color: #414042; font-weight: bold;">Adriano.medeiros#homa.pt</p>
</div>
</section>
<section id="3" style="float: left; width: 273px; ">
<div class="line" style=" margin-top:10px;border-left:2px solid #D9AB28; height: 130px;position: absolute;"></div>
<div class="contacts" style="margin-left: 30px;">
<div class="telefone">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAaCAYAAABCfffNAAAACXBIWXMAABYlAAAWJQFJUiTwAAABU0lEQVRIibXVwVECMRTG8X8Y79CBcMgZrUBL4JKzawd04NoBVuByNRfogBLgai5rB1LB80AW1zWQ4MbvxMyb2d+Q916iRIT/zlXzw1lVAHNgCuy0kZtcyKAFvHoAYOqsKnMh6v2NBghloo3UfZEBsDhTr/oCDTI8U79zVs1zILHMciC7vh9JQc71BDL0RYkIzqoauA7Ub7WRbV+k6Unv5kYRbWQFrAP1jbOq9+a3p6sA9p36MAd0RLSRT8Lj2hv6sSfayAZ4zA39WkZtpAKWOSF16j1xVlXAQ6C0B+7bo+2sGgNjoA5dqCeRVMhZNQK2fO/ZM7DwPY4jCdCMw40x7dQ+gML3OI5EoFhegDIJ8VAJPP0BWqdc9QBoIyWH8e4ubCx1MuKhCrjnsudhm3xc3SQe31IbKS76J+3445sQXtwjAInTFYtfxhmHoxwBK23k+Bh+AZQCix9ZmcqxAAAAAElFTkSuQmCC" alt="phone number"style="float:left; margin-right:20px; width: 20px;">
<h2 style="padding-top: 7px; font-size: 14px; font-family: Arial, Helvetica, sans-serif;color: #414042; font-weight: bold;">960000000000 | Ext. 22044</h2>
</div>
<div class="smartphone number">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAjCAYAAAB7NEEmAAAACXBIWXMAABYlAAAWJQFJUiTwAAAA90lEQVRIie2WPW7DMAxGHw2PGXKDyEA8NzdpFs9tTlZ3jZbmBj2Cu0ZDfYM2J2CHUqmHAjEkLwLCRZTE70H/oqgqS1u1OLEoaB2d4MUBLoM1tp2OAKKqBC/PwEsGMNqh7bSX8xEHfFrjCRgSYDvg0fym5m/Kp7bTfeoQg5c3A7vpRqWMcGpXfTlHqizo1vxdJivqtxWwsso6Exr1q7LWtBxovF7vmayoH8qa/h16h8I+eEl6qUx3/TTrSd8DMAQvYwLXAZv/oFjHhkybu6YfQGPlYtDe8qR+TrCcj6yBrxmxr8DTjLimajv9Bg7A5UbwLeCF3wRt/AFdyDg/DvcalwAAAABJRU5ErkJggg==" alt="smartphone number" style="float:left; margin-right: 20px; margin-top: 5px; width: 20px;">
<h2 style="padding-top:15px; font-size: 14px; font-family: Arial, Helvetica, sans-serif;color: #414042; font-weight: bold;">2222222222</h2>
</div>
Outlook uses Word for rendering message bodies. In Word, two HTML elements that support a subset of the cascading style sheets properties are called out: DIV and P. Read more about supported and unsupported HTML elements, attributes, and cascading style sheets properties in the Word HTML and CSS Rendering Capabilities in Outlook article.
Note, Outlook for desktop doesn't support base64 images. You'd need to attach an image and then use the cid: attribute to refer to the attached image.
Related
All I'm trying to do is make a simple HTML and CSS email signature for gmail. I minify the code so it fits in the signature box.
The code is as follows:
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type" />
<style type="text/css">
#import url("https://fonts.googleapis.com/css2?family=Barlow:wght#300;700&display=swap");
</style>
</head>
<body style="width: 450px; height: 300px; margin: 0">
<div class="name-grid" style="padding-left: 5px">
<p
class="name"
style="
color: #abd590;
font-family: 'Barlow', sans-serif;
font-weight: 700;
margin-bottom: -12px;
"
>
David Seamen
</p>
<p class="title" style="font-family: 'Barlow', sans-serif">
graphic designer
</p>
</div>
<div
class="contact-grid"
style="
display: grid;
grid-template-columns: 25px 100px;
grid-template-rows: repeat(3, 22px);
align-items: center;
padding-bottom: 20px;
padding-left: 5px;
"
>
<p
class="green"
style="
color: #abd590;
font-weight: bold;
font-family: 'Barlow', sans-serif;
"
>
m
</p>
<a
href="tel:+02020123123145"
style="
text-decoration: none;
color: grey;
font-family: 'Barlow', sans-serif;
"
class="contact"
>152345125125</a
>
<p
class="green"
style="
color: #abd590;
font-weight: bold;
font-family: 'Barlow', sans-serif;
"
>
e
</p>
<a
href="mailto:design#david.com"
style="
text-decoration: none;
color: grey;
font-family: 'Barlow', sans-serif;
"
class="contact"
>design#david.com</a
>
<p
class="green"
style="
color: #abd590;
font-weight: bold;
font-family: 'Barlow', sans-serif;
"
>
w
</p>
<a
class="contact"
style="
text-decoration: none;
color: grey;
font-family: 'Barlow', sans-serif;
"
href="https://www.mrdavid.com</a
>
</div>
<div class="logo">
<img
src="https://drive.google.com/XXX"
alt="Logo"
style="width: 25rem; padding-left: 5px"
/>
</div>
</body>
</html>
Is there anyway at all to get something like this as a signature?
Or are we limited to the crappy editor? How do those cool email peoples get those badass email signatures with all of the links etc? It always seems as though they have used code?
Thanks :)
I'm having trouble displaying a white horizontal line in a div with a black background next to a heading.
This is what I've tried:
<div style="background-color: black">
<div style="border-bottom: 2px #ededed solid; overflow: visible; height: 17px; margin: 5px 0 10px 0">
<strong><span style="color: white; padding: 0px 5px; font-size: 2rem; font-family: 'Proxima Nova', 'Helvetica Neue', Helvetica, Arial, sans-serif">Willkommen</span></strong>
</div>
</div>
Can anyone help?
Please increase the height in second div tag as I believe 17px is too low
One approach would be to use a combination of a pseudo-element and grid. This avoids the need for unnecessary extra markup, and will adapt to any width.
body {
background: black;
}
h1 {
color: white;
font-size: 2rem;
font-family: sans-serif;
text-transform: uppercase;
display: grid;
grid-template: auto / auto 1fr;
grid-gap: 1em;
align-items: center;
}
h1:after {
content: "";
display: block;
background: #ededed;
height: 1px;
margin-top: 0.25em;
}
<h1>Willkommen</h1>
If you have to use inline styles, you'll need to add an additional element like a span to take the place of the pseudo-element, like this:
body {
background: black;
}
<div style="
color: white;
font-size: 2rem;
font-family: sans-serif;
text-transform: uppercase;
display: grid;
grid-template: auto / auto 1fr;
grid-gap: 1em;
align-items: center;">
Willkommen
<span style="
display: block;
background: #ededed;
height: 1px;
margin-top: 0.25em;">
</span>
</div>
you can use text-decoration and text-decoration-color CSS properties for the same.
<div style="background-color: black; padding: 15px 10px">
<div style="overflow: visible; height: 17px; margin: 5px 0 10px 0;">
<strong><span style="text-decoration: overline;text-decoration-color: #ededed ;color: white; padding: 0px 5px; font-size: 2rem; font-family: 'Proxima Nova', 'Helvetica Neue', Helvetica, Arial, sans-serif">Willkommen</span></strong>
</div>
</div>
another option you can use is <hr/> HTML tag
<div style="background-color: black; padding: 10px 10px 25px 10px">
<div style="overflow: visible; height: 17px; margin: 5px 0 10px 0;">
<hr/>
<strong><span style="color: white; padding: 0px 5px; font-size: 2rem; font-family: 'Proxima Nova', 'Helvetica Neue', Helvetica, Arial, sans-serif">Willkommen</span></strong>
</div>
</div>
Update as per image-
You can use Sean's answer
another trick you can try with the below style
.line {
white-space: pre;
text-decoration: line-through;
}
<div style="background-color: black; padding: 50px 10px">
<div style="overflow: visible; height: 17px; margin: 5px 0 10px 0">
<strong><span style="color: white; padding: 0px 5px; font-size: 2rem; font-family: 'Proxima Nova', 'Helvetica Neue', Helvetica, Arial, sans-serif">Willkommen
<span class="line"> </span>
</span></strong>
</div>
</div>
I have created a email signature (HTML template). That works perfectly fine on outlook web, Gmail and other clients but fails on Microsoft Outlook (Mail) App. I am using the following code:
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet">
<span style="font-family: Montserrat, Arial, sans-serif; font-weight: 400; font-size: 16px !important; letter-spacing: 0px; color: #3e3e3e; margin-left: 0px;">Charlotte McMahon</span>
<br>
<span style="font-family: Montserrat, Arial, sans-serif; font-weight: 700; font-size: 12px !important; letter-spacing: 0px; text-transform: uppercase; color: #3e3e3e; line-height: 20px; margin-left: 0px;">
Head of Block Management
</span>
<br>
<img src="https://hawkblockmanagement.com/wp-content/uploads/2019/03/Hawk-Logo.png" alt="Hawk Block Management" style="width: 150px; margin: 10px 0 20px 0;"><br>
<span style="font-family: Montserrat, Arial, sans-serif; font-weight: 400; font-size: 10px !important; letter-spacing: 1px; color: #3e3e3e !important; text-transform: uppercase; line-height: 20px; margin-left: 0px;">
<strong>DD:</strong>
020 8016 1178
</span><br/>
<span style="font-family: Montserrat, Arial, sans-serif; font-weight: 400; font-size: 10px !important; letter-spacing: 1px; color: #3e3e3e !important; text-transform: uppercase; line-height: 20px; margin: 0px 10px 0 0;">
<strong>T:</strong>
020 8016 4122
</span>
<br>
<span style="font-family: Montserrat, Arial, sans-serif; font-weight: 400; font-size: 10px !important; letter-spacing: 1px; color: #3e3e3e !important; text-transform: uppercase; line-height: 20px; margin-left: 0px;">
<strong>E:</strong>
cmcmahon#hawkbm.com
</span><br>
<span style="font-family: Montserrat, Arial, sans-serif; font-weight: 400; font-size: 10px !important; letter-spacing: 1px; color: #3e3e3e !important; text-transform: uppercase; line-height: 20px; margin-left: 0px;">
<strong>W:</strong>
<a title="Hawk Block Management" href="https://hawkbm.com" style="color: #3e3e3e !important; text-decoration:none !important; text-decoration:none;" target="_blank">hawkblockmanagement.com</a></span><br>
<div style="padding: 10px 0 0 0;"></div>
<span style="font-family: Montserrat, Arial, sans-serif; font-weight: 400; font-size: 10px !important; letter-spacing: 1px; color: #3e3e3e !important; text-transform: uppercase; line-height: 15px;;">
<a title="Map" href="https://goo.gl/maps/mtfqGUtziZD2" style="color: #3e3e3e !important; text-decoration:none !important; text-decoration:none;" target="_blank">Kirkdale House, Kirkdale Road,
Leytonstone, London E11 1HP</a></span><br>
<img src="https://hawkblockmanagement.com/wp-content/uploads/2019/03/block2.jpg" alt="Hawk Block Management" style="width: 150px; margin: 20px 0 0 0;">
The expected result and result on Outlook, Gmail is
But the result on Outlook App is
Is there any solution to make design consistent on Outlook Mail App too?
Outlook tends to ignore inline style image sizes. Add width="150" which will correct Outlook growing. Outlook will ignore margins placed on the image. Add a padding to the table cell instead.
<img src="https://hawkblockmanagement.com/wp-content/uploads/2019/03/Hawk-Logo.png" width="150" alt="Hawk Block Management" style="width: 150px; height: auto;">
Outlook doesn't support Montserrat. It doesn't work with webfonts, so it's using Arial as it's fallback. This is risky because it might default to Times New Roman, making everything serif.
Good luck.
I create a template on Sendgrid as a standard email, I tested on Gmail in different devices, it works fine, until I try Outlook, it looks like all of my css, images are gone. So what is the root cause?
Here is my html code:
<div style="font-family: 'Poppins', Helvetica, sans-serif;">
<div style="background-color: black; position: relative; padding-top: 30px; padding-bottom: 30px;">
<img src="image.png"
style="height: auto; width: 135px; position: absolute; top: 0; bottom: 0; margin: auto; padding-left: 16px;">
</div>
<div style="padding: 10px; text-align: center;">
<img src="image.png"
style="width: 40px; height: auto; margin-bottom: 16px;">
<p style="margin: 0; padding: 0; color: #00cc66; font-size: 24px; font-weight: bold;">Email Confirmation</p>
</div>
<div>
<div style="padding: 16px; color: black;">
<p>Hi -Name-,</p>
<p>Welcome.</p>
<p>Please confirm your email-address by clicking the button below.</p>
</div>
<div style="text-align: center; padding-bottom: 15px;">
<a href="-EmailConfirmUrl-" target="_blank">
<button style="border: none; cursor: pointer; background: #2840ff;
color: white; width: 200px; height: 48px; text-transform: uppercase;
font-size: 0.8rem; outline-style: none;
background-image: linear-gradient(to top right, #2840ff, #22eaff); box-shadow: 0px 1px 15px -2px lightgrey;">
Verify Email Now
</button>
</a>
</div>
<div style="text-align: center; background: #2840ff; color: white;
background-image: linear-gradient(to top right, #2840ff, #22eaff); bottom: 0; padding: 4rem 0;">
<img src="image.png"
style="height: 20px; width: 160px;">
<p style="color: #ced4da; font-weight: 300;">
Copyright © 2018. All rights reserved.
</p>
</div>
</div>
</div>
You can't use standard css3 in your emails, if it has to work in outlook.
Outlook is using the HTML rendering engine of Microsoft Word (sad, but true).
There are a lot of amazing tips and tricks on how to make email work in (all) clients.
Here are just a view links:
https://litmus.com/resources
https://mailchimp.com/resources/?_ga=2.98108630.81642254.1536052613-1816129050.1536052613
The text blocks inside my table do not render correctly when viewed in Apple Mail on the iPhone. However, the text appears fine on Outlook 2003, 2007, 2010, and Apple Mail on the desktop. On the iPhone it does not reduce with the rest of the email. The body email appears to render correctly, but not the footer text (both of which are inside tables). The only other place the text does not appear correctly is the date line at the top.
This is the portion of the style sheet affecting the footer:
.FooterText {
font-size: 7pt;
font-family: Verdana, Geneva, sans-serif;
color: #FFFFFF;
vertical-align:top;
line-height: 11pt;
}
a.FooterLink {
font-size: 7ptem;
font-family: Verdana, Geneva, sans-serif;
text-decoration: none;
color: #FFFFFF
}
.RegisteredFooterText {
font-family: Verdana, Geneva, sans-serif;
font-size: 6pt;
font-style: normal;
text-align: center;
}
</style>
</head>
This is the code for the footer area:
<table width="650" border="0" cellspacing=0 cellpadding=0 bgcolor="#0064C8">
<tr>
<td width="2%"> </td>
<td width="19%" style="padding-top: 15px; padding-left: 10px; padding-right: 10px; padding-bottom:25px" class="FooterText"><p class ="FooterText"><strong>Unsubscribe</strong></p>
<p class="FooterText">You are receiving this email because you are a member of NALP.</p>
<p class="FooterText">To unsubscribe from this [email type] related emails, please
<unsubscribe style="text-decoration:none; color:#FFFFFF;">click here</unsubscribe>
.</p></td>
<td width="26%" style="padding-top: 15px; padding-left: 12px; padding-right: 10px; padding-bottom:25px" class ="FooterText"><p class ="FooterText"><strong>Discover NALP</strong></p>
<p>About NALP<br />
Conferences & Events<br />
Member Portal<br />
NALPconnect<br />
<a href="https://netforum.avectra.com/eweb/shopping/shopping.aspx?site=nalp&webcode=shopping&cart=0&shopsearchCat=Merchandise&sort=4&" class="FooterLink" >Bookstore</a><br />
Job Center</p></td>
<td width="28%" style="padding-top: 15px; padding-left: 10px; padding-right: 10px; padding-bottom:25px" class="FooterText"><p class="FooterText"><strong>About NALP</strong></p>
<p class="FooterText">NALP believes in fairness, facts, and the power of a diverse community. We work every day to be the best career services, recruitment, and professional development organization in the world because we want the lawyers and law students we serve to have an ethical recruiting system, employment data they can trust, and expert advisers to guide and support them in every stage of their careers.</p></td>
<td width="24%" style="padding-top: 15px; padding-left: 10px; padding-right: 10px; padding-bottom:25px" class="FooterText"><p class ="FooterText"><strong>Contact Us</strong></p>
<p class="FooterText">NALP<br />
1220 19th Street, NW<br />
Suite 401<br />
Washington, DC 20036</p></td>
</tr>
</table>
I've tried some a media query to reduce the font size but doesn't seem to work either:
#media only screen and (max-device-width: 480px) {
.FooterText {
font-size: 5pt;
font-family: Verdana, Geneva, sans-serif;
color: #FFFFFF;
vertical-align:top;
line-height: 8pt;
}
a.FooterLink {
font-size: 5pt;
font-family: Verdana, Geneva, sans-serif;
text-decoration: none;
color: #FFFFFF
}
.RegisteredFooterText {
font-family: Verdana, Geneva, sans-serif;
font-size: 4pt;
font-style: normal;
text-align: center;
}
}
First of all use text size in pixels, and add this in your style: -webkit-text-size-adjust:none;
ie:
.FooterText {
font-size: 5pt;
font-family: Verdana, Geneva, sans-serif;
color: #FFFFFF;
vertical-align:top;
line-height: 8pt;
-webkit-text-size-adjust:none;
}