I inherited a WordPress plugin that sends an RSS feed of content to Mailchimp to generate an email. This code (which I cannot find the source) is adding an extra logo image which is throwing off the formatting. I know I should add something like
<!--[if !mso 9]><!-->
to the code if I want to hide it in Outlook, but I cannot find the source to add this. I can only add external CSS. The usual display: none works in the other email platforms. Any advice on how to remove this extra image instance in Outlook via external CSS?
The code you provided is an HTML conditional comment. It can only work embedded in the HTML code. If you want to hide an element from an external stylesheet in the Outlooks on Windows (from 2007 and above), you can use the mso-hide:all property. It’s basically a display:none but for Word’s rendering engine. Although, contrary to display:none, this doesn’t always inherit to <table> children elements. In that case you could use a double selector like the following.
.your-element,
.your-element table {
mso-hide: all;
}
Related
A subdomain http://board.woodstockschool.in will display a content within Iframe from my.woodstock.ac.in.
In the HTTP headers from my.woodstock.acin it does have this entry:
Access-Control-Allow-Origin => http://board.woodstockschool.in
But I'm unable to change the content look using CSS from the board.woodstockschool.in website.
I've tried these as well:
a ,iframe a{
color: red !important;
}
This changes color of all links except for in the Iframe.
There is an array of questions like How to apply style to a div which is inside an iframe of the page? in here but none with CORS enabled.
I've checked https://www.w3.org/wiki/CORS_Enabled#For_Apache but find no mention of css there.
What is the way to apply the css rule from the wrapper site without using any javascript?
What is the way to apply the css rule from the wrapper site
There is no way.
The closest you could come would be to:
Set a query string on the iframe's src and then have the embedded page use server side code to stick a <link> to the stylesheet in based on that.
Use postMessage to send a message (possibly including the URL of the stylesheet) to the embedded page and then have JavaScript running on the embedded page add the <link>.
CORS will not help or hinder you in this. It's entirely irrelevant.
The best way may be the following (in case you control both sites):
1) set the iframe link with style parameter, like:
http://your_site.com/target.php?style=a%7Bcolor%3Ared%7D
(the last phrase is a{color:red} encoded by urlencode function)
2) set the receiver page target.php like this:
<head>
..........
<style><?php echo filter_var($_GET['style'], FILTER_SANITIZE_STRING);?> </style>
..........
In light of GMail's questionable support for CSS, I'd like to apply style elements to everything in the HTML email I'm assembling.
I'm currently using MVC3's Razor to construct the email, then sending off the generated HTML. Is there any way for me to write the template with a style sheet, then transform it such that each element gets a style attribute with the appropriate styles?
For instance, in a normal web page, I would have something like
<style>
a { color:#1c5567; }
</style>
Click here!
If a GMail user looks at this, they won't see it in that shade of teal. However, if I do
Click here!
they will. But that is a huge maintainability headache. Thus I want a process that can take HTML with the former style and output it in the latter.
. For this, I want to take that existing CSS style and transform it such that style="color:#1c5567;" gets added to every <a> on the page.
It might be the lamest way to do this but you could use a simple CSS parser like this one CSS Parser and add style attribute as required.
Since you're overriding the style in gmail from an external stylesheet, you need to use !important to override the style.
a {
color:#1c5567 !important;
}
When developing a web-based email system, is there a generally accepted correct way to handle style sheets on incoming emails? I am referring to the <style tag. Not referring to #import or <link notation.
These stylesheets have to be restricted to only the element containing the foreign email, or else they will also adjust the content of your own system, which is a big no-no.
I am aware that I should sanitize scripts and stylesheets, which will allow me to prevent url background images, or fixed position elements that would cover parts of my system.
I would not want to drop the stylesheet completely, so I see these options
Convert style sheets to inline styles
Put the entire foreign email in its own div with an ID, and change the style rules to only affect that div (for example a,b{color:purple} would become #foreign a,#foreign b{color:purple})
Are either of these good ideas? Is there an obvious/better way that I am missing? What is common/accepted/robust?
Email doesn't support external style sheets, so all CSS on a html email is in the page style tag, or inline. As it is standard for clients like gmail and yahoo to strip the style tag, and everything else outside the body tags, you could simply do the same. Limiting incoming emails to inline styles will keep all CSS local to those elements. It is pretty much email design 101 to inline the css, so you don't have to worry about your email system being less than what is standard.
Web clients also strip many CSS elements in addition to this. Don't want someone adding position:fixed; for example as it would break out of the viewing pane. The best reference for what CSS is allowed in each client is Campaign Monitor's CSS guide.
I think the best idea is use inline styles. I have made may web sites that send styled html email and inline styles is the only thing tha work in most email sistemas.
I'm getting double spacing in Outlook 2007/2010/2013 and GMail but it looks fine elsewhere. I'm creating a newsletter and I've tried all-sorts: border-collapses, margins, paddings, spans, and still can't get my head around this. Can anyone see where I'm going wrong? Am I missing something?
Link below - source code too long to paste here. Sorry.
http://pastebin.com/FW3RgYuv
For one, all styles must be inline. Most mail clients do not support stylesheets.
You are not building a web page, you're building an email, therefore everything in your HEAD section will be removed, including your embedded stylesheet.
In you code you have </br>. This is not a valid tag. Use <br />.
NEVER NEVER use !important. Inline styles already override other styles, plus you can dig yourself into a dead end.
Put your text in a DIV or a P and style that, not the TD. Not all styles are supported by every mail client. Here's a good list to compare to.
The injected styles result in all text being underlined. It does not inject the styles in messages originating from Outlook, and does not inject them in all HTML-formatted messages.
Our HTML templates show properly in all clients including the Outlook native client and Hotmail which supposedly uses a similar HTML email preprocessing to the one deployed by Outlook WebAccess ( http://litmus.com/help/email-clients/rendering-engines )
I am wondering what exact issue triggers this behavior. Is there a way to prevent the injection by modifying my HTML emails? Here's the CSS it injects:
Edit: I just noticed it does it for all browsers except for IE.
<style type="text/css">
<!--
.x_preheaderContent
{color:#606060!important;
font-weight:normal!important;
text-decoration:underline!important}
.x_headerContent
{color:#EB4102!important;
font-weight:normal!important;
text-decoration:underline!important}
.x_bodyContent
{color:#0000cc!important;
font-weight:normal!important;
text-decoration:underline!important}
.x_footerContent
{color:#000099!important;
font-weight:normal!important;
text-decoration:underline!important}
-->
</style>
It looks to me that code is an interpretation of what Outlook understands of style and how it is applying. You have most probably taken the above code by viewing the source of the html email from the Outlook. If you look at your html code and then setting or overriding the text underline property should be as smooth as anything else. I never had issues with this property.