Working on an HTML email, we've gotten the email to render properly everywhere: Outlook 2010, Mozilla Thunderbird, Horde/IMP, Gmail, Yahoo, etc. etc. However, when the email is checked via the Outlook Web App (Exchange 2010), the HTML email is incorrectly rendered sometimes.
The two issues we're seeing is that in Internet Explorer and Firefox, the font-size CSS in-line directives aren't respected and in Firefox, a gap is put between the table cells, breaking the image. This only happens when the message is NOT in the Inbox. If we drag the message from a folder into the Inbox, the problems disappear. Drag it back into a folder and they reappear. If we open the message in a new window (instead of in the preview pane), the message renders properly.
I'm guessing the CSS of the Outlook Web App is interfering, but I'm hoping someone has had a similar issue and might be able to shed some light on how we can fix this problem.
Here is the relevant message source as seen in the client:
<html>
<head>
<style>a{color:#BF0005}</style>
</head>
<body bgcolor="#F5F5F5" style="margin:0;text-align:center">
<table cellpadding="0" cellspacing="0" style="width:604px;margin:0 auto;font-family:Tahoma,sans-serif;font-size:10pt;line-height:16pt">
<tr>
<td rowspan="3" style="vertical-align:top;width:10px"><img src="cid:2e39cc62f2ab417d1b9461b437c72ffc" width="10px" height="410px" /></td>
<td style="padding-top:10px;margin-bottom:0;vertical-align:bottom;width:584px;height:84px"><img style="vertical-align:bottom" src="cid:5ed2b7dfeca322e0d1e0b40bd3a0a48d" width="584px" height="84px" alt="Image Alternate Text Here" /></td>
<td rowspan="3" style="vertical-align:top;width:10px"><img src="cid:6f108f42f85401cababf9d5dc64fb8f9" width="10px" height="410px" /></td>
</tr>
<tr>
<td style="vertical-align:top;text-align:left;background-color:#FFF;padding:0 50px 40px">
<h1 style="text-align:center;margin-top:15px;font-size:12pt">Header</h1>
<p>This is a test email.</p>
</td>
</tr>
<tr>
<td colspan="3" style="padding:30px 50px;font-size:8pt;text-align:center;color:#888888;line-height:10pt">Footer text</td>
</tr>
</table>
</body>
</html>
EDIT: I've done some digging into the source via Firebug, and I think I've narrowed it down to being a problem with the Outlook Web App. In the Inbox view, the body of the messages are encapsulated in an <iframe> and the contents of the HTML message are unchanged. However, viewing the source of messages in other folders, no <iframe> is used and the <body> tag of the message is converted into a <div> by OWA. The message is then incorporating styles from the OWA style sheet that seem to be overwriting the inline style of the HTML email.
I think we're going to open up a ticket with Microsoft.
Unfortunately, this problem is a Microsoft issue. We've opened a ticket with them a while ago, but have not heard back. Therefore, we'll just have to make do.
Related
I have made an email signature in Outlook (2016) by pasting HTML in the window where one can type a new signature (File>Options>Email>Signatures>New).
It looks good when sending a mail, it shows all images. The receiver of the mail (on any other mail client but Outlook, e.g. on Apple Mail or Gmail) can see the images too, but when this receiver using Apple Mail or so is going to reply to this mail, the images in the signature of the originally sent email have disappeared and have been replaced by
<image001.png> (referring to images saved locally within C:\Users\[name]\AppData\Roaming\Microsoft\Signatures, in the respective [signature name]_files folder, while the src of the original <img/>s in the signature are URLs to actual accessible files on the web). These images can be displayed anyway by clicking a button to 'include attachments of the original mail', which is, let's say, weird. It apparently turns the images in Outlook-signatures into attachments, which are being blocked or so, as it seems.
Has anyone had a comparable problem, and/or is kind to share a solution for this issue?
Thank you in advance.
Try adding ? and then a random number at the end of your image URL. Also, make sure you are using a CDN to deliver the image. I use cloudinary.com...
Here is an example of what I did...
<table cellPadding="0" cellSpacing="0">
<tbody>
<tr>
<td style="vertical-align:top"></td>
<td>
<div><font size="4">Name</font></div>
<div>Title</div>
<div><span style="margin-right:8px">phone</span></div>
<div><span style="margin-right:8px"><a style="color:blue" href="mailto:email">email</a></span></div>
<div><span style="margin-right:8px">address</span></div>
<div style="padding: 0 0em 2em 0;">
<img src="http://CDN/Facebook.jpg?7" alt="Facebook" />
<img src="http://CDN/Twitter.jpg?5" alt="Twitter" />
<img src="http://CDN/Instagram.jpg?3" alt="Instagram" />
<img src="http://CDN/Linkedin.jpg?2" alt="LinkedIn" />
</div>
</td>
</tr>
</tbody>
I open this HTML in my web browser, copy and paste it into the signature section of Outlook. One caveat.. I am using the Outlook Web Browser for my email, not the Application.
I have been testing:
Outlook -> Gmail -> Outlook, and my signature stays intact.
So far this has been working for 2 days. I am going to keep testing but give it a shot and let me know if you see the same good results.
I am new to Sitecore. I am looking to create a custom email template for an email campaign. I am using Sitecore 8.1 with EXM 3.3. I Have been trying to implement the following walk-through:
Walkthrough: Building a custom message template
However, when I create a new email campaign with my new template, I am unable to assign components to the various placeholders on my aspx page. I have proved that the aspx file is the correct file in my Sitecore website by adding plain html to the file and seeing the results displayed in the body section of the message tab in the EXM application, as you can see from the following screen shot.
Below is the code for my Email Template:
<%# Register TagPrefix="sc" Namespace="Sitecore.Web.UI.WebControls" Assembly="Sitecore.Kernel" %>
<%# Register TagPrefix="sc" Namespace="Sitecore.Web.UI.WebControls" Assembly="Sitecore.Analytics" %>
<%# OutputCache Location="None" VaryByParam="none" %>
<html>
<head>
<title>
<!-- Used for storing title of the email -->
<sc:Placeholder runat="server" Key="mn-title"/>
</title>
<!-- The VisitorIdentification control ensures that people viewing this page
with a traditional web browser will be classified as humans not bots.
This control is not required if people only view messages using Email clients -->
<sc:VisitorIdentification runat="server" />
</head>
<body style="background-color:gold">
<label>test html label added here!</label>
<form method="post" runat="server" id="mainform">
<table style="width:100%">
<tr>
<td colspan="2" style="background-color:blue;color:green;width:100%">
<!-- Used for storing the title of the newsletter in h1 -->
<sc:Placeholder runat="server" Key="mn-header" />
</td>
</tr>
<tr>
<td style="background-color:white;color:black;width:100%">
<!-- Used for storing the content blocks of the newsletter in h2 and paragraphs -->
<sc:Placeholder runat="server" Key="mn-content" />
</td>
</tr>
<tr>
<td colspan="2" style="background-color:blue;color:green;width:100%">
<!-- Used for storing the footer e.g. the unsubscribe link -->
<sc:Placeholder runat="server" Key="mn-footer" />
</td>
</tr>
</table>
</form>
</body>
</html>
The html code contains the following placeholder keys:
<sc:Placeholder runat="server" Key="mn-title" />
<sc:Placeholder runat="server" Key="mn-header" />
<sc:Placeholder runat="server" Key="mn-content" />
<sc:Placeholder runat="server" Key="mn-footer" />
When go to the Message tab for my email in EXM and choose the Add component button, I get the "Add Here" buttons on my page but am unable to choose any renderings to fit the mn-header and mn-footer components. The mn-content allows me to choose from several predefined renderings as seen in the screen shot below:
Have I missed something important here? How can I select/choose what renderings are available for my placeholders?
The Walk-through contains five sections that need completing:
Create a branch template
You can see from the following screen shot that this section is configured correctly:
Create template
You can see from the following screen shot that this section is configured correctly:
Create the layout
You can see from the following screen shot that this section is configured correctly:
Bind the layout and the message template
I'm pretty sure that I have managed to complete the first 3 sections of the walk-through correctly but when I try to complete the section "Bind the Layout and the message template", point 5 of the walk-through says:
On the Controls tab, add the relevant controls. As a minimum add the following two controls:
Target Item – in /Renderings/Email Campaign.
Set Page Title – in /Renderings/Email Campaign.
But I don't have "Target Item" as an rendering to add in this case as you can see from the following screen shot:
So I have added the following components in the Device Editor from the available renderings as seen in the following screen shot:
Make your template available in EXM
You can see from the following screen shot that this section is configured correctly:
Any Ideas what I am missing or doing wrong? Thanks in advance!
I think documentation for creating custom template is not yet updated for Sitecore EXM 3.3.
I dont think Set Target Item is needed any more. I have installed sample newsletter package and I dont find it using that.
Regarding your question.
You need to create data source item and assign it to your control's data source property.
I would suggest you to install sample newsletter package (came with default exm module package) and see it's structure and presentation details on Message root item. I have attached the one I have created.
For your Scenario you need to create item under message root using "custom newsletter ll content" template and assign that item as a data source for Display body control.
Hope this helps!
Sample News Letter from Sitecore : No Target item present.
Newsletter item with datasource
Now go to presentation details of Root item and attach this data source to renderings
I have a new signature and I use Outlook 2003 to send out my emails. The graphics within are sourced from a server. The email+signature look fine, but when somebody using Gmail replies to me, the graphics within the email become attachments for them.
Previous answers suggest having the graphic on a web server, but I do this already. One possible fix I have seen is using moz-do-not-send="true" ...but that is only for Mozilla it seems, is there not a global alternative or another fix I could use?
Many thanks.
<span><a href="http://www.website.co.uk" target="_blank" ><img src="http://www.website.co.uk/allowed/images/logo.jpg" border="0" hspace="10" /></a></span>
I have been messing with this for a while now and I may have found a fix.
First, I created a complete HTML file.
<table cellPadding="0" cellSpacing="0">
<tbody>
<tr>
<td style="vertical-align:top"></td>
<td>
<div><font size="4">Name</font></div>
<div>Title</div>
<div><span style="margin-right:8px">phone</span></div>
<div><span style="margin-right:8px"><a style="color:blue" href="mailto:email">email</a></span></div>
<div><span style="margin-right:8px">address</span></div>
<div style="padding: 0 0em 2em 0;">
<img src="http://CDN/Facebook.jpg?7" alt="Facebook" />
<img src="http://CDN/Twitter.jpg?5" alt="Twitter" />
<img src="http://CDN/Instagram.jpg?3" alt="Instagram" />
<img src="http://CDN/Linkedin.jpg?2" alt="LinkedIn" />
</div>
</td>
</tr>
</tbody>
As you can see, I added a ? and then a number after my image source. So far, in two days of testing from Outlook (I admit, I am using the web interface and have yet to test from the app) to Gmail then replying back to Outlook - all of my replies send the signature as they should.
I opened my HTML and copy and pasted the signature into Outlook.
Fingers crossed this continues to work and hopefully this helps someone else.
So I am trying to edit a purchased Mailchimp e-mail template. This one is created to be edited in the "design" function, however I am trying to edit the code. I have a basic understanding of code but I am having an issue editing this piece below. It says that the image is "editable" so whenever I try to use it spits out gibberish. What can I do to insert the link? (Also I know I'm using incorrect wording, so I apologize.)
</td>
<td style="line-height: 0px;" align="center">
<img editable="" label="3" data-crop="false" style="display:block; line-height:0px; font-size:0px; border:0px;" src="https://gallery.mailchimp.com/629323fec37da7c4397c47010/images/d91c364d-8050-40b1-a7a3-fbf3f0ca2c72.png" width="12" height="12" alt="img" mc:edit="3">
</td>
I have the following code in a Facebook application:
<table width="520" border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="background:url(comp-scd-like.jpg) no-repeat;height:380px;width:260px;">
<fb:visible-to-connection><img src="comp-scd-lg.jpg" border="0" style="display:block;" /></fb:visible-to-connection></td>
</tr>
</table>
In IE8, Firefox, Chrome etc it works fine, however in IE7 Standards, using the developer mode, it doesn't show any content whatsoever.
Any ideas why this may be?
More of a caution than a fix.
Ensure you are not an administrator of your page as being one fires both visible-to-connection and the else.
Very annoying!