I am trying to add support for dark mode to my email templates, however am having an issue when it comes to Outlook. For some reason Outlook is partially overriding the background of my button which is causing it to display incorrectly:
The HTML for the button is as follows:
<td align="center" style="word-break: break-word; font-family: "Nunito Sans", Helvetica, Arial, sans-serif; font-size: 16px;">
Reset your password
</td>
The button has the following inline style (formatted for your convenince):
color: #fff;
border-color: #13c2c2;
border-style: solid;
border-width: 10px 18px;
background-color: #13c2c2 !important;
background-image: linear-gradient(#13c2c2, #13c2c2) !important;
display: inline-block;
text-decoration: none;
border-radius: 3px;
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.16);
-webkit-text-size-adjust: none;
box-sizing: border-box;
Additionally, I've already added the following to the <head> section of my email.
<meta name="color-scheme" content="light dark" />
<meta name="supported-color-schemes" content="light dark" />
Thanks!
The bad news is that we cannot specifically target Dark Mode via CSS in email via #media query or generated class name for Gmail or Outlook. Gmail replaces color values in the sheet and Outlook will inline Dark Mode color values and adds an !important to them and makes it impossible to override it in the sheet.
Solution
Until Google and Microsoft offer a solution, the best approach forward is to accept this is a reality and design emails that work no matter what the background color the user chooses to view them. More users are adopting Dark Mode, so it's only going to become more popular going forward.
Good luck.
Image 1x1px background + color = bulletproof button color:
<a href="https://ilovecode.com" width:auto;font-family:Roboto, arial, sans-serif;font-size:16px;color:#ffffff;border-style:solid;border-color:#59BC2B;border-width:10px 20px;display:inline-block;background-color:#59BC2B;background-image:url(https://path-to-the-1px-image.png);text-align:center;text-decoration:none;">GO!
Outlook.com and Outlook (Windows/Mac/Android/iOS) will invert/adjust most colours, but for some reason they don't adjust border colours, which is why your <a> tag's borders are the original colour, but the background-color of the <a> has been adjusted for dark mode. Try using border-color: transparent;.
Which Outlook? (Outlook desktop for Windows, 2007-19? Outlook desktop for Mac? Outlook on Android? iOS? Outlook.com/365 webmail?)
You may be able to try this trick, courtesy of Rémi Parmentier (I say 'may' because I don't have the code for your button):
<a style="color:blue;">
<span class="dark-mode-red">…</span>
</a>
And this in your <head> section:
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">
<style type="text/css">
#media (prefers-color-scheme: dark) {
.dark-mode-red {color:red !important}
}
</style>
Thus, remove background-image: linear-gradient(#13c2c2, #13c2c2) !important; from your inline section (anything inline will get translated), and attach that to the #media dark mode style.
This is a full working example (although Outlook Office 365 Windows shows black text):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">
<style type="text/css">
#media (prefers-color-scheme: dark) {
.darkbutton {
color:#ffffff !important;
background-image: linear-gradient(#13c2c2, #13c2c2) !important;}
}
</style>
</head>
<body>
<td align="center" style="word-break: break-word; font-family: Helvetica, Arial, sans-serif; font-size: 16px;">
Reset your password
</td>
</body>
</html>
Well, it's not entirely true that you cannot change the background-color to what is set for the border. You actually can change that to tackle this hellish issue in Outlook. Sometimes though, and this case is one of those 'sometimes'.
You use background-image already and that is indeed the way to go. Replace the linear-gradient by a 1x1 pixel .png file that exactly contains that border-colour and repeat that. That color will not be inverted - it's an image after all. For the sake of compatibility, you could try to apply background="file here" as an attribute. It will repeat infinitely, but it's exactly what we want. The color will, however, remain white, unless you make that entire button a separate image.
Take out the background-color element on your a tag. You already have the
background-image:linear-gradient(#13c2c2, #13c2c2)
and that's all you need.
Related
I have an HTML email code as given in the below link:
https://privatebin.net/?1ca92ace7be6c777#LLNgtdGPXCC4Si0Ui7jsEt7P/g+PsZ1gRq08qBTOljo=
The issue is the fonts linked by link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700" rel="stylesheet" type="text/css" is not displayed correctly even though I have added inline styles to all tags.
Also an underline is displayed for the renew button. I tried by adding text-decoration:none style with !important. but was of no use.
Any opinions?
you asked a few questions here so I'll do my best to answer them separately.
Web fonts, as mentioned by others, are not supported in all email clients. It's currently not possible to display web fonts in Outlook, Gmail app, or any webmail client. Be aware that fallback system fonts will display in some email clients no matter how the email is coded.
For clients that do support web fonts, something like this inside your <head> will get you the best possible coverage:
<!-- Desktop Outlook chokes on web font references and defaults to Times New Roman, so we force a safe fallback font. -->
<!--[if mso]>
<style>
* {
font-family: sans-serif !important;
}
</style>
<![endif]-->
<!-- All other clients get the webfont reference; some will render the font and others will silently fail to the fallbacks. -->
<!--[if !mso]><!-->
<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700' rel='stylesheet' type='text/css'>
<!--<![endif]-->
More on web font support in email on Style Campaign and Litmus.
Regarding the underline in the button, sometimes email clients place the default (and sometimes blue) underline in links within buttons. This can be reset by targeting a <span> inside the <a href=""> button:
CSS
<head>
<style>
.button-link {
text-decoration: none !important;
}
</style>
</head>
HTML
<table role="presentation" cellspacing="0" cellpadding="0" border="0">
<tr>
<td style="border-radius: 3px; background: #222222; text-align: center;">
<a href="http://www.google.com" style="background: #222222; border: 15px solid #222222; font-family: sans-serif; font-size: 13px; line-height: 110%; text-align: center; text-decoration: none; display: block; border-radius: 3px; font-weight: bold;">
<span style="color:#ffffff;" class="button-link">Button Text</span>
</a>
</td>
</tr>
</table>
Actually, I didn't get you what exactly you're trying I think you want this applying text-decoration: none; to an anchor. try like this
a:hover { text-decoration:none; }
And if you want font to the body then apply this
body{ font-family: 'Source Sans Pro', sans-serif;}
Web fonts do not work in all email clients. Some of the clients where they do not work include Gmail, Yahoo, some fonts do not work in Outlook and in email clients for Android devices.
You need to choose a backup font which will be used when Open Sans is not supported. I suggest Trebuchet or Arial or what meets your clients expectations for a fallback font. Something like this:
font-family: "Open Sans, Trebuchet, sans-serif;";
These links will give you a better understanding of web fonts and how to use them in email.
https://www.campaignmonitor.com/css/text-fonts/font-face/
https://www.cssfontstack.com
https://www.cssfontstack.com/Open-Sans
https://litmus.com/blog/the-ultimate-guide-to-web-fonts
Your Button Issue
Your button only shows an underline in Windows Mail. However, the button shows up as Times New Roman in Outlook because you're using single quotes '' in the font-family description. It sees that as an error and defaults to Times. You should address this.
You are having display problems with iPhone 5 and Android you should address before you send out the email.
Good luck.
I am following a tutorial in a book and it says to use CSS to set different background colors for the html and body elements. The body is capped at a max-width of 1020px, so the html background color will show on either side if the window is wide enough. Here is the CSS code for the background colors, the layout CSS is in a separate file:
html{
background-color: rgb(235, 177, 131);
background-color: hsl(27, 72%, 72%);
}
body{
color: rgb(91, 91, 91);
background-color: ivory;
}
I have tested this in Chrome, Safari, and Firefox and all three ignore the html style rule. However, when I specify the background color inline, such as:
<html style="background-color: hsl(27, 72%, 72%);">
Then it works. Does anyone know what might be going on here?
** EDIT **
Here is the beginning of the HTML file, you can see that I am linking the stylesheets in the head element:
<!doctype html>
<html style="background-color: hsl(27, 72%, 72%);">
<head>
<meta charset="utf-8" />
<meta name="keywords" content="triathlon, running, swimming, cycling" />
<title>Tri and Succeed Sports</title>
<link href="tss_layout.css" rel="stylesheet" />
<link href="tss_styles.css" rel="stylesheet" />
</head>
** UPDATE **
Found the problem. I was missing the semi-colon at the end of the #charset directive before the html style rule. This caused the browser to ignore it. Works fine now.
You could try creating a class like
.html {
background-color: red;
}
and then
<html class="html">
</html>
Also, here is a fiddle of your code, and pictures in Chrome, Firefox, and IE
Chrome:
Firefox:
IE (trashy browser on win7):
EDIT: I shrunk the body 4 times so I could show it works.
I am using the same css file on two different HTML pages for the same thing, on home page the fonts are looking bold but on the other page for the same thing I see some font size variation.
This is how it appears in the browser.
There is a font-weight difference in the pages.
CSS code
.nav a {
text-transform: uppercase;
text-decoration: none;
color: #0083b7;
text-transform: uppercase;
font-weight: 800;
border-bottom: 1px solid #0083b7;
font-size: 13px;
I don't know why is this happening, please tell me how to correct it.
Thank you.
Your only problem is that in the profile.css your custom font is not being loaded correctly for some reason. In fact, if you try to put the same font to both pages with chrome inspector you'll see that they're pretty much the same.
On profile.css what you are seeing is not Merriweather sans , but just sans-serif. Try to find out why .
Edit, here's why:
In your profile page you missed
<link href="http://fonts.googleapis.com/css?family=Merriweather+Sans:400,300,300italic,400italic,700,700italic,800,800italic" rel="stylesheet" type="text/css">
in the HEAD.. (html) you have it on your first page. Put the font loading in your profile page and you're good to go.
Here's the result:
http://i.imgur.com/fb0hWA5.png
It looks like you have some odd repeated code inside the body tag on the 'gym' page.
<body promptdialogcheckdone="1"><embed id="__IDM__" type="application/x-idm-downloader" width="1" height="1" style="visibility: hidden !important; display: block !important; width: 1px !important; height: 1px !important; border-style: none !important; position: absolute !important; top: 0px !important; left: 0px !important;">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dear Fitness</title>
<link href="images/css" rel="stylesheet" type="text/css">
<link href="images/css(1)" rel="stylesheet" type="text/css">
<link href="/test1/css/profile.css" rel="stylesheet" type="text/css"><link href="/test1/css/common.css" rel="stylesheet" type="text/css"><link href="/test1/css/responsive.css" rel="stylesheet" type="text/css">
<!---Footer --->
/* snipped for space */
<!---Footer --->
<div class="green_border"></div>
I've applied a css stylesheet to my view and it is not rendering when I view it. What's the problem here:
Edit: Works in Firefox 17, does not work in IE10 (something to do with my compatibility view? Not sure how to fix)
Master:
#using System.Web.Optimization
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>User_Master</title>
#Styles.Render("~/Content/Styles.css")
</head>
<body>
<header>
<p>header</p>
</header>
<nav>
#Html.Partial("~/Views/Shared/User_Nav.cshtml")
</nav>
<section>
#RenderBody()
</section>
</body>
</html>
Styles.css
header {
border-color: #0094ff;
border-bottom-right-radius:10px;
border-top:hidden;
border-left:hidden;
border-bottom:solid;
border-right:solid;
box-shadow:2px 2px;
}
Home
#{
ViewBag.Title = "Home";
Layout = "~/Views/Shared/User_Master.cshtml";
}
<h2>Home</h2>
There seem to be two parts to the problem.
CSS
One part of the problem is related to invalid CSS. For example, border-top is the shorthand declaration for a combination of style, width and colour:
border-top: [width style colour]
With this in mind, I would change your CSS as follows:
header
{
border: 2px solid #0094ff; /* width style colour */
border-bottom-right-radius: 10px;
border-top-style: hidden;
border-left-style: hidden;
box-shadow: 2px 2px 0px #000; /* x-offset y-offset blur colour */
}
IE / Compatibility Mode
If IE is coming through in compatibility mode, you're probably rendering using the IE8 (or older) engine. Unfortunately these do not understand HTML5, so things like the <header /> elements and border-radius and box-shadow CSS declarations are ignored. There are a couple of things you can try to fix this:
Add <meta http-equiv="x-ua-compatible" content="IE=edge,chrome=1" /> to your <head /> element. This will tell IE that you want to use the latest rendering engine. See this page for more information on this.
Include a JavaScript library like HTML5Shiv (which is also included in the excellent Modernizr library as well). This allows older versions of Internet Explorer to at least recognise HTML5 elements like <header />. Be aware that it won't add CSS3 support though; things like border-radius will not work, but at least you'll get normal borders.
I'm actually creating a newsletter. When i open the email into outlook, outlook web access, the layout is exactly the same as the one i built.
Yet when I open the same email in my windows phone 8 font size is not respected and the email has no longer the same layout.
Do you have any kind of suggestion ?
I have this css instruction in my tag. (-ms-text-size-adjust: none;)
body {
background-color: #f9fbf4;
margin: 0;
padding: 0;
-ms-text-size-adjust: none;
}
I also put this kind of css in the style span but it doesnt work
<span style='font-size: 8.5pt; font-family: Georgia,"sans-serif"; color: white; font-size-adjust: none;'>Hello</span>
This might have something to do with the viewport size on the device. You can try setting the initial scale to see if that resolves the issue.
<meta name="viewport" content="width=device-width; initial-scale=1.0;>