Office 365 Exchange + Office 365 Outlook: Warning banner is not displaying colours - outlook

I'm working on a warning banner to be displayed for our users to warn them not to click the links or attachment in a suspicious email, so that they can be warned about any phishing or spoofing. This is by using the "prepend a disclaimer" rule in exchange online.
I've followed a tutorial on prepending this banner onto an email but Outlook doesn't seem to render the background colours on the table? It just displays the text content only.
Code is here:
<!-- Yellow caution banner -->
<table border=0 cellspacing=0 cellpadding=0 align="left" width="100%">
<tr>
<!-- Remove the next line if you don't want the Yellow bar on the left side -->
<td bgcolor="#ffb900" style="background-color:#ffb900;padding:5pt 2pt 5pt 2pt"></td>
<td width="100%" bgcolor="#fff8e5" cellpadding="7px 6px 7px 15px" style="background-color:#fff8e5; padding:5pt 4pt 5pt 12pt; word-wrap:break-word; font-family:sans-serif">
<div style="color:#222222;">
<span style="color:#222; font-weight:bold;">Caution:</span>
This is an external email and has a suspicious subject or content. Please do not click on any links or download any files unless you know the sender and you are expecting this message. If you are unsure, please contact the IT Helpdesk.
</div>
</td>
</tr>
</table>
<br />
I'm trying to get it to look like this:
(https://i.stack.imgur.com/yltQ7.png)
But I receive this instead.
(https://i.stack.imgur.com/3fiZx.png)
It doesn't seem to matter whether dark mode is enabled or not. As far as I know, HTML is enabled in outlook.
Thanks in advance for any help with this.

Didn't work to me as well. Try this:
<table border=0 cellspacing=0 cellpadding=0 align="left" width="100%">
<tr>
<!-- Remove the next line if you don't want the Yellow bar on the left
side -->
<td style="background:#ffb900;padding:5pt 2pt 5pt 2pt"></td>
<td width="100%" cellpadding="7px 6px 7px 15px" style="background:#fff8e5;padding:5pt 4pt 5pt 12pt;word-wrap:break-word">
<div style="color:#222222;">
<span style="color:#222; font-size:13px; font-weight:bold;">CAUTION:</span>
<span style="color:#222; font-size:13px;">This email is from an external source. Do not click links or open attachments unless you recognize the sender and know the content is safe. When in doubt, contact Nova IT department
</div>
</td>

Related

Outlook changes html on office Add-In

I try to write an outlook plugin that inserts a link into the email body. I want to give the link a style in order to look as a button, to give the user a more engaging experience.
The issue I got, is that outlook changes the style on the elements, and the inline style I put on that element is getting lost.
I am inserting the HTML as shown below:
var tablePref = '<table align="left" border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse;margin: 0;"><tr><td border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse;margin: 0;padding: 10px 18px;background:\'';
var backgroundColor = 'green'; //The color is user-given, I put green as an example
var tableSuf = '\'">Some text</td></tr></table>'
var item = Office.context.mailbox.item;
item.body.setAsync(tablePref+backgroundColor+tableSuf,
{
coercionType: Office.CoercionType.Html,
asyncContext: {}
},
function (asyncResult) {
if (asyncResult.status == Office.AsyncResultStatus.Failed)
{
//Show error dialog
}
else
{
//Successfully set data in item body.
}
});
I get the link on the email successfully, and it looks just right, but when I send the email, the HTML structure of this button looks like this instead:
<table class="MsoNormalTable" border="0" cellspacing="0" cellpadding="0" align="left" style="border-collapse: collapse">
<tbody>
<tr>
<td style="background: 'green';">
<p class="MsoNormal" style="mso-element: frame; mso-element-frame-hspace: 2.25pt; mso-element-wrap: around; mso-element-anchor-vertical: paragraph; mso-element-anchor-horizontal: column; mso-height-rule: exactly">
<a href="https://somelink.com" target="_blank" rel="noreferrer">
<span style="text-decoration: none">Some Text</span>
</a>
<!-- o ignored -->
</p>
</td>
</tr>
</tbody>
</table>
Outlook is changing my a elements, and this causes that mail clients render the element with a line below because the style got overridden. Is there any way to avoid Outlook change my HTML or it is a known bug? This is happening across all platforms (OWA, Outlook for Mac 16.21 and Outlook for Windows)
Thanks for any help

how to create e-mail template for outlook 2010 with a text over an image

I'm trying to create .oft template for outlook 2010 with a text over an image - text should be customisable by the end users...
If I create new e-mail from a html file and save it as template, input is not editable (using just a normal styled paragraph)
If I create new e-mail template directly in outlook, everything is ok for users, but it doesn't send it properly - everything is send as an attachment - so it doesn't display it properly in some mail clients (e.g. gmail).
Is there any bullet proof way how to create e-mail templates for outlook 2010 ?
I made a Fiddle so you can see this code in action: https://jsfiddle.net/wallyglenn/7zLaLrfx/
<div style="background-color:#ff0000; width:600px;">
<!--[if gte mso 9]>
<v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t">
<v:fill type="tile" src="http://www.gwally.com/news/photos/catintinfoilhat.jpg" color="#ff0000"/>
</v:background>
<![endif]-->
<table height="450" width="600" cellpadding="0" cellspacing="0" border="0">
<tr>
<td valign="top" align="left" background="http://www.gwally.com/news/photos/catintinfoilhat.jpg">
<h1 style="text-align: center; color: #ffffff;-webkit-text-stroke-width: 1px; -webkit-text-stroke-color: black; font-family: Arial, san-serif;">
Background Image with text on top
</h1>
</td>
</tr>
</table>
</div>
The original code was taken from https://backgrounds.cm.
Good luck.

HTML Email : Outlook puts down the text after space

I am making HTML Emailer.
The issue i am facing is that , when i see the output of my code in Outlook, then
Register Online text gets down in the outlook.
like Register in one line and Online in new line.
<table cellspacing="0" cellpadding="0" border="0" style=";border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt; background: transparent;">
<tbody><tr>
<td valign="middle" height="40" align="center" class="main-bg-color" style=" background: #ffee00;color: black;display: block;padding-left: 20px;padding-right: 20px;!important; width:100px; cursor: pointer;">
<div class="modtxt"><span class="wrap_textbox"><a style="color: black;text-align: center; display:block; text-decoration: none;-webkit-text-size-adjust: none;font-size: 10px;line-height: 40px;text-transform:uppercase;font-family: \'proxima_novasemibold\', Arial, sans-serif;" href="http://www.hubilo.com/widget/webpanel/login.php?event=c1d1b1dc8d40c37429a8fd1f627c5c5e"><span style="font-weight:100;">Register Online</span></a></span></div>
</td>
</tr>
</tbody></table>
How can I solve it?
Thank You.
I'm not entirely sure what you want to do, but if it's make sure that "register online" doesn't ever break onto two lines, then the easy solution for Outlook is to use a non-breaking space character ( ) rather than a space.
REGISTER ONLINE
This should solve that particular issue.

Parsing HTML document

I am trying to parse the following HTML using Ruby and Nokogiri:
<div class="vevent">
<table width="750"><tr>
<td width="25"> </td>
<td valign="top" width="200">
<font size="2" face="sans-serif">
<font color="black"><b>June 30, 2015</b></font>
<br>
<span class="dtstart"><span class="value-title" title="2015-06-30"></span></span><br><span class="summary"><font color="#92161" size="3"><b>Band Concert</b></font></span>
<br><font color="#333333">Event</font><br>
<br>
<br>
<br clear="left">Have a question? email us.<br>
<br></font>
</td>
<td valign="top" width="10"></td>
<td valign="top">
<br clear="left"><font color="#92161">111 Main Street</font><br>
<font color="#92161">Mainstreet, Ohio 55111</font>
<a rel="nofollow" href="http://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=%221700+111+MainStreet+NE+Mainstreet,+Ohio+55111%22" target="_blank"><font size="1" face="sans-serif">map link</font></a><br><br>
<font color="#92161"><font size="2" face="sans-serif">Telephone:</font> 3305551000</font><br><br>
Visit our website for complete information.<br><br>
Enjoy a summer evening concert on Main Street at 8pm. Doors and cash bar open at 7pm.<br><br>Look for more details and ticket sales to be released soon on our website<br> <br><br>
<br>
</td>
</tr></table>
</div>
I am trying to grab the last bit of text:
Visit our website for complete information.<br><br>
Enjoy a summer evening concert on Main Street at 8pm. Doors and cash bar open at 7pm.<br><br>Look for more details and ticket sales to be released soon on our website<br> <br><br>
Here is my code thus far:
events = doc.css("div.vevent")
events.collect do |row|
row.css("td")[3]
end
This will get me to the third td which has the text that I am looking for as follows:
<td valign="top">
<br clear="left"><font color="#92161">111 Main Street</font><br>
<font color="#92161">Mainstreet, Ohio 55111</font>
<a rel="nofollow" href="http://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=%221700+111+MainStreet+NE+Mainstreet,+Ohio+55111%22" target="_blank"><font size="1" face="sans-serif">map link</font></a><br><br>
<font color="#92161"><font size="2" face="sans-serif">Telephone:</font> 3305551000</font><br><br>
Visit our website for complete information.<br><br>
Enjoy a summer evening concert on Main Street at 8pm. Doors and cash bar open at 7pm.<br><br>Look for more details and ticket sales to be released soon on our website<br> <br><br>
<br>
</td>
However once there if I call text on that td I get all the text inside of the td. I only want the last bit that is not inside any element. I tried using XPath and parent so that I could say "just give me the text that is inside the td (not nested inside of another element)" but I couldn't get that to work. Anyone have any ideas on this?
Try this code: doc.css('td')[3].css('> text()').to_s.strip
I suggest using xpath which is more flexible.
If I understand you correctly, you would like:
I only want the last bit that is not inside any element
So, try this XPath:
//table//td[last()]/text()

Firefox displays 3 columns in a table, IE8 only 2

Would love some help here... Firefox displays the last column in the table (an image they click on to edit their email address, it's a link), and IE8 displays nothing for the last column (doesn't even appear to display a column!) I've left out other rows in the table, but similar stuff happens.
Anyone know why?
<table class="profile-display">
<tr>
<td style="text-align: right; color: red;"> Email address: </td>
<td class="profile-content"> <?php echo("$evar"); ?> </td>
<td> <a href="profile_change.php?edit=13"
<img src="../images/writegreen.png" class="profile-edit" alt="Edit"
title="Edit Email Address"
border="0" />
</a>
</td>
</tr>
</table>
Your <a> tag is missing its >. That will cause a browser to not recognize the end of the tag until the first > it sees, which is the end of the img tag. Frankly, I'm surprised that Firefox shows the img.
Edit: Other common causes of this problem are missing quotes and misspelled tags.

Resources