I'm working on sending emails to various email clients(such as yahoo,hotmail,gmail,....).
I have a div with id OrderInfo inside that I have a variable which generates a dynamic table.
HTML
<div id="OrderInfo">
variable
</div>
The dynamic table generates headers(th) with lower case, so I want to change that to uppercase and few more styling. So I have written a selectors
CSS
#OrderInfo table tr th {
text-transform: uppercase;
background-color: #737373;
color: white;
}
This is working fine for yahoo, hotmail but not for gmail.
I came across that only inline styles work for gmail but how can I the styles of modify a dynamic one.
I have no control on the variable (I mentioned in the div) it generates a table with values which processes while sending to the client.
So I cannot keep a static table and cannot change the way it renders
gmail as well as some other web and desktop/mobile clients strips away css stylesheets either imported or embedded in a <style>...</style> node in the head
Put them inline:
<div id="OrderInfo">
<table>
<tr>
<td style="text-transform: uppercase; background-color: #737373; color: white;">
<!-- .......... -->
</td>
</tr>
</table>
</div>
As a more general advice: building email html is not trivial as final result may vary a lot depending on the recipent's mail client.
The general rule is to make the html as simple as possible, avoiding "modern" css features; use nested tables instead of divs when possible (some says build the html as if you were building a 15 years ago webpage).
The above is very general and may not be always true.
There are several resources online that gives advices and rules on how to make an html email or template.
Finally the only and one rule to always follow if you want to be sure of the result: test your messages with various client
UPDATE 2018
GMAIL now and from a while ago has been supporting embedded CSS, so you can use CSS inside tag <style> in head, it even allow/supports the use of media queries.
OLD ANSWER
Gmail doesn't support embedded CSS, you need to use inline styles, take a look at this
12 Things you MUST Know when Developing Emails for Gmail and Gmail Mobile Apps
Here is what you could do:
<th bgcolor="#737373" style="text-transform: uppercase; color:white></th>
Many email service provide not support to css included in email template. Instead use inline css.
Also, Email template should be formed using tables as it only support HTML3. You can use HTML4/5 elements withing td tags
Do check this link. It will help you to build email template.
Try with this styling making your link red with no special effect for the hover situation:
a:link{color: red}
a:visited{color: red}
a:hover{color: red}
a:active{color: red}
This works fine for me, but if anyone of the 4 statements are missing it will not work neither in a gmail client nor in Outlook. They must also appear in the order shown above.
Related
I have created a webmail client application developed via AngularJS
The email body that is displayed is in HTML form.
My problem is that there are email from customers that import css and overide my application css :
#import url("https://some.web.site/main.css");
href="https://some.web.site/css/stylesheet.css" rel="stylesheet" type="text/css"
I've investigated a little bit and found that iframe isolates the content from the web page however it is considered bad practice.
Other alternatives presented in here are object and embed but they seem very similar
All require providing some src (url link)
My question is: is there a way to wrap a div that its internal content is some html that have its own styling without affecting the main (parent) elements styling (css)?
In email, you can handle css styling in three different ways, listed below in the support they have for email clients:
Inline Style:
<p style="font-weight: bold;"> </p>
Internal Style sheet:
<style>
p {font-weight: bold;}
</style>
External Style sheet:
<link rel="stylesheet" type="text/css" href="mystyle.css">
The best all-around approach is to use an Internal Style Sheet. It works with most email clients and if you are doing responsive development, it's the most common supported way to do #madia queries. The problem with an External Style sheet is that Outlook and Gmail will not work with one, which really limits the audience.
You should run a script for Angular to pull out the styles used in your email and collate them in a style sheet in the head of your html email.
Good luck.
I am trying to figure out a way to display an archive of email newsletters on my client's site. The issue is that the newsletters are full of a zillion inline styles, which is great for seeing them in Outlook or wherever, but they're not looking too hot in an otherwise-nicely styled site.
My goal is for my client to be able to copy the entire source code of a generated newsletter (which her list management company* gives her access to) and paste it into the CMS (drupal, if it makes a difference).
*Constant Contact? Mail Chimp? I forget. One of those.
Then I'd like to display it on her site, inside the basic structure (header, nav, etc) of the rest of the site. If this was 1997, I'd say "iframes!" and be done with it, but A) that seems like a lame solution, and B) the code doesn't actually exist on a page by itself, which I think is required for iframes.
Is there some kind of tag I can put around this block of HTML to isolate it from the rest of the site's styles? Or is there another way to go about this entirely?
Thanks!
IFrames are the only way to go that I've ever been able to find. The only alternative to this would be to override every style in the parent page's CSS for the newsletter display area.
As you noted, using an iframe will probably require you to host the newsletters in an independent file. The only alternative to this that I'm aware of is that you can use JavaScript to dynamically create and/or populate the iframe.
If you go with this method, you could have the newsletter present in a div with a specific class, and then use JavaScript to move the div into an iframe. The big downside being that this wouldn't happen for users without JavaScript enabled.
9 years later and there still isn't a better solution.
If you don't have an external source (you can't add html into a frame manually) you need to use js to insert the messy html/css (in my case I use it to view emails)
<iframe class="my-frame" width="100%" height="100%" src="about:blank"></iframe>
and js:
const frame = document.querySelector('.my-frame');
frame.contentWindow.document.open('text/html', 'replace');
frame.contentWindow.document.write(hereGoesYourMessyHtmlCss);
frame.contentWindow.document.close();
Is there a reason why you can't use a modal? That would allow you to force a new request and make the page render how you'd want it to by not applying your general stylesheet while at the same time keeping your user on the desired page. Of course, it doesn't display the element inline so-to-speak, but it's nearly functionally equivelent.
Cutting and pasting raw HTML presents too many security problems, in my opinion. Never trust user's input. Even when the content is entirely benign, next week the designer of newsletter might decide to change their formatting or incorporate some javascript and you'll be responsible for anything that might go wrong.
Therefore I would implement a parser that would drop anything but the content part and leave only b, a, h*, blockquote and similar simple elements, like the ones allowed in forum posts, as well as their styles. After that, you can display it as a normal post in a CMS. I don't see any reason why that should look differently.
As for how to isolate that from your other CSS, you don't really need to if you are careful that all of CSS rules of your CMS apply to elements with specific classes. Alternatively, do a CSS reset for your posts:
.post p {
margin: 0;
...
.post /* all the standard CSS reset rules preceded with .post */
and then
<div class="post"> content parsed from your CMS </div>
Another option that I haven't used myself but am looking to possibly leverage in a similar situation is to use the Shadow DOM which is part of the Web Components spec. My main concern is that we still have some user's using IE 11 and while there seems to be support for polyfills it doesn't look like covering all browser's is real straight forward based on what I've read elsewhere.
Some details on how to use Shadow DOM to this effect can be found here and here. I've also created a small gist that I've created to demonstrate basic idea that I've been formulating as I learn about how the Shadow DOM works which I'll be updating as I learn more. Below you can see a snapshot of the content of that gist.
<!doctype html>
<html>
<head>
<style>
.row {
display: flex;
}
.column {
flex: 50%;
padding: 10px;
height: 300px;
}
* {
color: Red;
}
</style>
</head>
<body>
<div class="row">
<div class="column" style="background-color:#aaa;">
<h2>Column 1</h2>
<div id="content1">
SOME CONTENT FROM CMS
</div>
</div>
<div class="column" style="background-color:#bbb;">
<h2>Column 2</h2>
<div id="content2">
SOME MORE CONTENT FROM CMS
</div>
</div>
</div>
<script>
document
.getElementById("content1")
.attachShadow({ mode: 'open' })
.innerHTML = `
<style>
*{all:initial}
style{display: none}
div{display: block}
</style>
<h3>This text is not red</h3>
<div>slot content: <slot></slot></div>`;
document
.getElementById("content2")
.attachShadow({ mode: 'open' })
.innerHTML = `
<style>
*{all:initial}
style{display: none}
div{display: block}
</style>
<h3>This text is not red</h3>
<div>slot content: <slot></slot></div>`;
</script>
</body>
</html>
I have a page on my site where I'm displaying HTML email.
Some of that email seems to come with CSS that overrides my site layouts such that certain things get misplaced...
e.g. I have a toolbar at the top of the page that on some mails covers the various header information from the email.
Is there a way of creating a div where I can put the html email with a layout that effectively says 'Stay in this div and don't bugger about with anything else'?
Worth noting that I have the html content as 'text' rather than referring to an external website. (It's actually a return from an API, but assuming the same restrictions apply)
%iframe{srccode: #mail.html}
Just gives me a blank iframe
Include your mail using an IFrame similar to this:
<iframe src="http://www.w3schools.com"></iframe>
This will keep the styles separate
see http://www.w3schools.com/tags/tag_iframe.asp for options to customize the IFrame
If using html as text (rather than referencing an existing page:
%iframe{srcdoc: "#{#mail.html}"} #for rails / haml
or
<iframe srcdoc="<your html as text>"></iframe>
You may be able to incorporate the scoped style:
<div>
<style scoped>
h1 { color: FireBrick; }
p { color: SaddleBrown; }
</style>
<h1>This is an H1 in a scoped div. Regardless of global styles the text should be "FireBrick".</h1>
<p>This is a paragraph in a scoped div. The text should be "SaddleBrown".</p>
</div>
<p>This is another paragraph, that will unaffected by the scoped style and remain black.</p>
worth noting: this feature is still experimental and is not widely supported by 2015 browsers, currently, only FireFox v21.0+ supporting this feature. (more info # w3school.com)
Reference: https://css-tricks.com/saving-the-day-with-scoped-css/
Dave's answer above
<iframe src="http://www.w3schools.com"></iframe>
is good for referencing an external site, or a page that exists as html.
If using html as text (rather than referencing an existing page):
%iframe{srcdoc: "#{#mail.html}"} #for rails / haml
or
<iframe srcdoc="<your html as text>"></iframe>
And then formatting the iframe to suit does the trick.
This sounds very backwards, but I want to take existing CSS classes and make them inline in the element itself (The css styles and the html elements are in the same file). There is a reason for this, for which I will not go into detail.
Example:
<html>
<style type="text/css">
.p1 { height: 10px; }
</style>
<body>
<p class="p1">...</p> <!-- Remove class="p1" and replace with style="height: 10px;" -->
<p class="p1">...</p>
<p class="p1">...</p>
</body>
</html>
Keep in mind there can be many CSS classes, and many can belong to a single element.
Edit: The reason I'm doing this is because (based on our client) we want to generate PDF documents from an HTML template. The PDF tool we use does not work well with external CSS classes.
You are looking for Premailer (The source available as well) - it is a Ruby library that does just that (inlines CSS for HTML email - but the output isn't specific to HTML email - it should work just fine with your PDF document generator as well).
There is also lamson.html.HtmlMail if you are using Python and there are a variety of Node.js libraries available to do the same thing.
MailChimp has a page for this in their labs, the CSS Inliner -
http://beaker.mailchimp.com/inline-css
It does leave the class, however.
I am trying to figure out a way to display an archive of email newsletters on my client's site. The issue is that the newsletters are full of a zillion inline styles, which is great for seeing them in Outlook or wherever, but they're not looking too hot in an otherwise-nicely styled site.
My goal is for my client to be able to copy the entire source code of a generated newsletter (which her list management company* gives her access to) and paste it into the CMS (drupal, if it makes a difference).
*Constant Contact? Mail Chimp? I forget. One of those.
Then I'd like to display it on her site, inside the basic structure (header, nav, etc) of the rest of the site. If this was 1997, I'd say "iframes!" and be done with it, but A) that seems like a lame solution, and B) the code doesn't actually exist on a page by itself, which I think is required for iframes.
Is there some kind of tag I can put around this block of HTML to isolate it from the rest of the site's styles? Or is there another way to go about this entirely?
Thanks!
IFrames are the only way to go that I've ever been able to find. The only alternative to this would be to override every style in the parent page's CSS for the newsletter display area.
As you noted, using an iframe will probably require you to host the newsletters in an independent file. The only alternative to this that I'm aware of is that you can use JavaScript to dynamically create and/or populate the iframe.
If you go with this method, you could have the newsletter present in a div with a specific class, and then use JavaScript to move the div into an iframe. The big downside being that this wouldn't happen for users without JavaScript enabled.
9 years later and there still isn't a better solution.
If you don't have an external source (you can't add html into a frame manually) you need to use js to insert the messy html/css (in my case I use it to view emails)
<iframe class="my-frame" width="100%" height="100%" src="about:blank"></iframe>
and js:
const frame = document.querySelector('.my-frame');
frame.contentWindow.document.open('text/html', 'replace');
frame.contentWindow.document.write(hereGoesYourMessyHtmlCss);
frame.contentWindow.document.close();
Is there a reason why you can't use a modal? That would allow you to force a new request and make the page render how you'd want it to by not applying your general stylesheet while at the same time keeping your user on the desired page. Of course, it doesn't display the element inline so-to-speak, but it's nearly functionally equivelent.
Cutting and pasting raw HTML presents too many security problems, in my opinion. Never trust user's input. Even when the content is entirely benign, next week the designer of newsletter might decide to change their formatting or incorporate some javascript and you'll be responsible for anything that might go wrong.
Therefore I would implement a parser that would drop anything but the content part and leave only b, a, h*, blockquote and similar simple elements, like the ones allowed in forum posts, as well as their styles. After that, you can display it as a normal post in a CMS. I don't see any reason why that should look differently.
As for how to isolate that from your other CSS, you don't really need to if you are careful that all of CSS rules of your CMS apply to elements with specific classes. Alternatively, do a CSS reset for your posts:
.post p {
margin: 0;
...
.post /* all the standard CSS reset rules preceded with .post */
and then
<div class="post"> content parsed from your CMS </div>
Another option that I haven't used myself but am looking to possibly leverage in a similar situation is to use the Shadow DOM which is part of the Web Components spec. My main concern is that we still have some user's using IE 11 and while there seems to be support for polyfills it doesn't look like covering all browser's is real straight forward based on what I've read elsewhere.
Some details on how to use Shadow DOM to this effect can be found here and here. I've also created a small gist that I've created to demonstrate basic idea that I've been formulating as I learn about how the Shadow DOM works which I'll be updating as I learn more. Below you can see a snapshot of the content of that gist.
<!doctype html>
<html>
<head>
<style>
.row {
display: flex;
}
.column {
flex: 50%;
padding: 10px;
height: 300px;
}
* {
color: Red;
}
</style>
</head>
<body>
<div class="row">
<div class="column" style="background-color:#aaa;">
<h2>Column 1</h2>
<div id="content1">
SOME CONTENT FROM CMS
</div>
</div>
<div class="column" style="background-color:#bbb;">
<h2>Column 2</h2>
<div id="content2">
SOME MORE CONTENT FROM CMS
</div>
</div>
</div>
<script>
document
.getElementById("content1")
.attachShadow({ mode: 'open' })
.innerHTML = `
<style>
*{all:initial}
style{display: none}
div{display: block}
</style>
<h3>This text is not red</h3>
<div>slot content: <slot></slot></div>`;
document
.getElementById("content2")
.attachShadow({ mode: 'open' })
.innerHTML = `
<style>
*{all:initial}
style{display: none}
div{display: block}
</style>
<h3>This text is not red</h3>
<div>slot content: <slot></slot></div>`;
</script>
</body>
</html>