I must repair a bug on the emails sent by my company when a new customer's account is created for the website, it must show a HTML <a> tag with the link to go on the new account, but in Gmail and Outlook, this <a> tag does not appear.
The code just here:
<tr>
<td style="font-size: 0px; padding: 10px 25px; padding-top: 30px; padding-bottom: 30px;
word-break: break-word;" align="center">
<table style="border-collapse: separate; line-height: 100%;" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="border: none; border-radius: 37px; cursor: auto; mso-padding-alt: 10px 25px;
background: #5F9AB0;" align="center" valign="middle" bgcolor="#5F9AB0"> Demander mon mot de passe
</td>
</tr>
</tbody>
</table>
</td>
</tr>
Screenshot of expected result (actual when I read my mail with the Mail mac app)
Screenshot of the display of the mail in Chrome and Firefox using Gmail and Outlook webapp
#Syfer suggested email queries are involved. If they are, check out https://www.caniemail.com/search/?s=media.
That says support for media queries is absent or spotty for all Gmails, all the Outlooks (except for the one that uses Apple Mail), all Yahoo's, all AOL's, and others.
Ain't it grand writing email HTML? 😁
Related
Today I tried the new "Virtual Deliverability Manager" feature of AWS SES. Here I immediately noticed a problem with our emails.
For Outlook, there is an extra markup element "v:roundrect" in our email template.
The href in this element is not replaced by the tracking link from AWS.
All other links from our template are successfully replaced.
Snippet of our Email-Template:
<div align="center">
<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="https://MYWEBSITE.com/produkt/#Model.ProductNumber" style="height:40px;v-text-anchor:middle;width:200px;" arcsize="10%" strokecolor="#800500" fillcolor="#da251d">
<w:anchorlock/>
<center style="color:#ffffff;font-family:sans-serif;font-size:13px;font-weight:bold;">Jetzt Bestellen!</center>
</v:roundrect>
<![endif]-->
Jetzt Bestellen!
</div>
Link in other EmailClients (Correct - replaced):
Link in Outlook (Incorrect - Not replaced):
Has anyone had similar experience in this regard?
It looks like AWS SES only replaces the classic a-tag hrefs.
Unfortunately I didn't find anything in their documentation about this.
My temporary workaround:
(No fix!)
I changed the Html of my Template. As a result, the button in Outlook no longer has the desired rounded edges. But now the tracking works.
<div align="center">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td style="padding: 12px 18px 12px 18px; border-radius:5px; background-color: #da251d;" align="center">
<a rel="noopener" target="_blank" href="https://MYWEBSITE.com/produkt/#Model.ProductNumber" target="_blank" style="font-size: 18px; font-family: Helvetica, Arial, sans-serif; font-weight: bold; color: #ffffff; text-decoration: none; display: inline-block;">Jetzt Bestellen!</a>
</td>
</tr>
</table>
Currently AWS is scanning only the links that are presented in the email and converting them. There is only possibility to remove the specific links from tracking using additional ses:no-track
Here is an example:
<a ses:no-track href="aws.amazon.com">Amazon Web Services</a>
On the other hand they do not allow(YET, maybe in the future) to provide a field to specifically convert some links in the other elements (as in your case
i would like to change the font colour of my title(i managed to give it a black background) into white. I figured i would make a font tag around it, which didn't seem to work. Any help would be appreciated(don't blame me, i am a newbie. And yes, i googled first)
<tr bgcolor="#000000">
<font face="courier" color="white">
<th>Black Components</th>
</font>
</tr>
It appears as a Black window with a black font in it
as a little bonus, if someone could tell me how to change the font style too, that would be amazing
Inside your table or another part of pdf you can use
<fo:block font-weight="bold" color="#ffffff"> your text or somethig else </fo:block>
In modern HTML, it is preferred to use CSS stylesheets instead of things like a bgcolor attribute or a font tag, as those are considered obsolete. The following should help you:
<tr style="background: black;">
<th style="color: white; font-style: italic; font-family: Courier, monospace;">Black Components</th>
</tr>
Professional websites also usually encapsulate such styles into classes so that you don't need to copy these attributes all the time. This would look like:
/* CSS file, e.g. main.css */
.row {
background: black;
}
.column-header {
color: white;
font-style: italic;
font-family: Courier, monospace;
}
<!-- HTML file, should reference main.css with a <link> tag inside <head> -->
<table>
<tr class="row">
<th class="column-header">Header 1</th>
<th class="column-header">Header 2</th>
</tr>
</table>
See also MDN documentation about CSS.
I have a master query that I output that gives me a list of sports. Then I have two sub queries that give me Query1: person information on who is in each sport, and Query2: Sport books the the people from query 1 have. I am trying to output a table row as a sort of header for each sport, then additional rows for the query data. I would like to break a page after every sport so I don't have a sport description row on the bottom of a page with the rest of the data on the next.
I have tried adding in every spot imaginable, but I always end up with blank pages equaling the recordcount of the getsports query at the beginning of the document.
Here is the code I am using. I have removed the actual query data. Does anyone have any suggestions or thoughts on what I am doing wrong?
<cfquery name="getterm" datasource="DS1">
select * from dbo.semester where current = 1
</cfquery>
<cfquery name="getsports" datasource="DS1">
SELECT * FROM [sports]
</cfquery>
<body>
<div id="wrap">
<cfinclude template="header.cfm">
<!-- header end -->
<div class="container" style="padding-top:0px;">
<cfdocument format="PDF" mimetype="application/pdf" orientation="landscape">
<table width="100%" cellspacing="0" cellpadding="0" topmargin="0" leftmargin="0" border="0" style="font-size:10px">
<tr>
<td colspan="8" bgcolor="#e3edef" style="padding-top:10px; padding-bottom:10px; padding-left:2px; font-family:Arial;" align="center">Books Not Issued -
<cfoutput>#yearOfSport#</h1>
</cfoutput>
</td>
</tr>
<cfoutput>
<cfloop query="getsports">
<tr>
<td colspan="8" style="padding-top:10px; padding-bottom:10px; padding-left:2px; font-family:Arial;" align="center">
<h1>#getsports.descr# </h1>
</td>
</tr>
<cfquery name="getbooks" datasource="DS1">
...
</cfquery>
<cfloop query="getbooks">
<cfquery name="getbooks2" datasource="DS1">
...
</cfquery>
<tr>
<td align="left" style="border-bottom: 1px solid; border-top: 1px solid; padding-top:10px;padding-bottom:10px;font-family:arial">
<h4>ID</h4></td>
<td align="left" style="border-bottom: 1px solid; border-top: 1px solid; padding-top:10px;padding-bottom:10px;font-family:arial">
<h4>Name</h4></td>
<td colspan="4" align="left" style="border-bottom: 1px solid; border-top: 1px solid; padding-top:10px;padding-bottom:10px;font-family:arial">
<h4>Sport</h4></td>
</tr>
<tr>
<td align="left" style="padding-top:10px;padding-bottom:10px;font-family:arial; font-weight: normal;">#id#</td>
<td align="left" style="padding-top:10px;padding-bottom:10px;font-family:arial; font-weight: normal;">#nameLast#, #nameFirst#, #nameMiddle# </td>
<td colspan="4" align="left" style="padding-top:10px;padding-bottom:10px;font-family:arial; font-weight: normal;">#sport#</td>
</tr>
<tr>
<td align="left" style="border-bottom: 1px solid ##cccccc; padding-top:10px;padding-bottom:10px;font-family:arial">Class</td>
<td align="left" style="border-bottom: 1px solid ##cccccc; padding-top:10px;padding-bottom:10px;font-family:arial">ISBN</td>
<td align="left" style="border-bottom: 1px solid ##cccccc; padding-top:10px;padding-bottom:10px;font-family:arial">Title</td>
<td align="left" style="border-bottom: 1px solid ##cccccc; padding-top:10px;padding-bottom:10px;font-family:arial">Author</td>
<td align="left" style="border-bottom: 1px solid ##cccccc; padding-top:10px;padding-bottom:10px;font-family:arial">Status</td>
</tr>
<cfloop query="getbooks2">
<tr>
<td align="left" style="padding-top:10px;padding-bottom:10px;font-family:arial">#getbooks2.subject#</td>
<td align="left" style="padding-top:10px;padding-bottom:10px;font-family:arial">#getbooks2.ISBN#</td>
<td align="left" style="padding-top:10px;padding-bottom:10px;font-family:arial">#getbooks2.title#</td>
<td align="left" style="padding-top:10px;padding-bottom:10px;font-family:arial">#getbooks2.author#</td>
<td align="left" style="padding-top:10px;padding-bottom:10px;font-family:arial">#getbooks2.status#</td>
</tr>
</cfloop>
</cfloop>
</cfloop>
</cfoutput>
<cfdocumentItem type="footer">
<table width="100%" style="font-size:10px;">
<tr>
<td style="font-family:Arial;" align="left">
<cfoutput>Page #cfdocument.currentpagenumber# of #cfdocument.totalpagecount# - #dateformat(now(), "mm/dd/yyyy")#</cfoutput>
</td>
</tr>
</table>
</cfdocumentItem>
</div>
</table>
</cfdocument>
</div>
<!-- Container end -->
<div id="push"></div>
</div>
<cfinclude template="footer.cfm">
</body>
Disclaimer: I have no idea what is in those header and footer files..but the header and footer is outside of the cfdocument tag. I usually don't do that but maybe there is a reason why you do.
In order to get my breaks in looping data I add this (below) to the end of my loops, and sometimes I add a counter incase I need more surgical control.
<div style="page-break-before:always"> </div>
And it just works.
If you need to get some precision. I would run your page without the cf document and get the source output from the browser and start to figue what you need, don't need and where you want your breaks to occur.
Then take that and just wrap cfdocument around the raw HTML output and see if you get the desired effects.
If you data is enourmous, then grab a subset so limit your results so you can manage a smaller chuck of that report.
One other things I do for my sanity.
I use cfsavecontent and set all my HTML output to a variable and then stuff it into cfdocument so I am not mixing-it-up so to speak...
Example:
<cfsavecontent variable="buildUpReport">
<cfinclude template="header.cfm">
nested looping ad nauseum...
<div style="page-break-before:always"> </div>
more ad nauseum looping...
<cfinclude template="footer.cfm">
</cfsavecontent>
<cfdocument localUrl="yes"
format="PDF"
mimetype="text/html"
marginbottom="0.15"
margintop="0"
marginright="0"
marginleft="0">
<cfoutput>#buildUpReport#</cfoutput>
<cfdocumentitem type="footer" evalatprint="true">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr><td align="center">
<cfoutput>
#cfdocument.currentpagenumber# of
#cfdocument.totalpagecount# |
#dateformat(now(),"mm-dd-yyyy")#
</cfoutput>
</td></tr>
</table>
</cfdocumentitem>
</cfdocument>
Thanks for the suggestions. I ended up including additional table tags inside my main output. Once I did that the page breaks worked correctly. I think the way I was doing it before was breaking the table structure.
I would be grateful to receive some solution for my problem connected with parsing/ regex html file code:
d:\acc.html
<!-- WebSite-Watcher Demo Report -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>WebSite-Watcher Report</title>
<style type="text/css">
<!--
a:link, a:active {
color: #4040A0;
text-decoration: underline;
}
a:visited {
color: #8080A0;
text-decoration: underline;
}
a:hover {
background: #FFF000;
color: #FF0000;
text-decoration: underline;
}
body, td {
font-size: 11px;
line-height: 15px;
font-family: Verdana, Arial;
}
li {
list-style: square;
font-size: 11px;
line-height: 15px;
margin-top: 10px;
}
-->
</style>
</head>
<body>
<center>
<table cellpadding="2" cellspacing="2" border="0" width="80%">
<tr>
<td>
<font color="#336699" style="font-size: 18px;"><b>Highlighted changes</b></font><br>
<div style="border-top: 1px dashed dadada; margin-top: 5px;"></div>
<br>
<font color="#f00000">This report displays the first 200 characters of highlighted changes,<br>
the length can be changed individually with the <b>wsw_url_highlighted_changes(200)</b> variable.</font><br>
<br>
<table cellpadding="5" cellspacing="0" border="0" width="100%">
<tr>
<td style="border-bottom-color: #d0d0d0; border-bottom-style: solid; border-bottom-width: 1px; background-color: #eaeaea;"><!-- F1E896 -->
<font style="font-size: 13px;"><b>Lorem ipsum</b></font><br><font color="#808080"> | Web page | Local page</font>
</td>
</tr>
<tr>
<td style="border-bottom-color: #f0f0f0; border-bottom-style: solid; border-bottom-width: 1px; background-color: #f8f8f8;"><!-- F5F2C7 -->
<blockquote>
<br>
</blockquote>
</td>
</tr>
</table><br>
<br>
<table cellpadding="5" cellspacing="0" border="0" width="100%">
<tr>
<td style="border-bottom-color: #d0d0d0; border-bottom-style: solid; border-bottom-width: 1px; background-color: #eaeaea;"><!-- F1E896 -->
<font style="font-size: 13px;"><b>Lorem ipsum</b></font><br><font color="#808080">18-06-2015 | Web page | Local page</font>
</td>
</tr>
<tr>
<td style="border-bottom-color: #f0f0f0; border-bottom-style: solid; border-bottom-width: 1px; background-color: #f8f8f8;"><!-- F5F2C7 -->
<blockquote>
Lorem ipsum BBBBBBBBBBBB<br>
</blockquote>
</td>
</tr>
</table><br>
<br>
<table cellpadding="5" cellspacing="0" border="0" width="100%">
<tr>
<td style="border-bottom-color: #d0d0d0; border-bottom-style: solid; border-bottom-width: 1px; background-color: #eaeaea;"><!-- F1E896 -->
<font style="font-size: 13px;"><b>Lorem ipsum</b></font><br><font color="#808080">18-06-2015 | Web page | Local page</font>
</td>
</tr>
<tr>
<td style="border-bottom-color: #f0f0f0; border-bottom-style: solid; border-bottom-width: 1px; background-color: #f8f8f8;"><!-- F5F2C7 -->
<blockquote>
Lorem ipsum BBBBBBBBBBBB<br>AAAAAAAAAAAAAAAaa AA<br>
</blockquote>
</td>
</tr>
</table><br>
<br>
<br>
<br>
<div style="border-top: 1px dashed dadada;"></div>
<font color="#808080"><i>Report date: 18-06-2015</i></font><br>
</td>
</tr>
</table><br>
</center>
</body>
</html>
I need to 'clean' this file from empty entries like the first one(no text just some empty spaces or usually just .
I know that in powershell there is solution for multi regex and it will probably look like:
d:\pattern.txt
(?=<table cellpadding="5" ).*(?=<blockquote>).{0,6}(?=<\/blockquote>)
script:(thanks Jisaak)
$content = (Get-Content 'd:\acc.txt' -raw)
$pattern = (Get-Content 'd:\pattern.txt' -raw)
[regex]::Replace($content, $pattern, '',`
[System.Text.RegularExpressions.RegexOptions]::Multiline `
-bor [System.Text.RegularExpressions.RegexOptions]::Singleline)
I mean- from (0-6 of any symbols) )
This regex doesn't work i have problems with properly writing this advanced regex. Thanks for any help
Would this problem be easier if you didn't have to deal with multiple lines?
My experience with regex is limited and html is non-existant, but the below workaround can turn your blocks into single lines (and back to blocks again)
$file = (Get-Content ".\acc.html" -raw)
# Replace new line CR LF with a string (e.g. NEWLINE)
$file2 = ([regex]::Replace($file, ">`r`n", ">NEWLINE", "Singleline"))
$file2 | out-file ".\acc_edited.html"
# Single line regex replacement here to get rid of empty table.
# String NEWLINE can be used to indicate a new line.
# Replace the string with new line characters CR LF after regex replacement.
[regex]::Replace($file2, ">NEWLINE", ">`r`n", "Singleline") | Out-File ".\acc_original.html"
This should work:
(?<=<table cellpadding="5" cellspacing="0" border="0" width="100%">).*
(?=<blockquote>)|(?<=<blockquote>).{0,6}(?=<\/blockquote>)
I'm trying to integrate CKEditor into Wordpress for a client. I'm not too familiar with it, it's the first time I use it.
The client wants to use CKEditor on a textarea that gets stored into a custom field and is displayed in the sidebar of a page.
I added support for this form of editing by adding meta boxes to the page edit window. I have FCKEditor plugin installed, so I just call CKEditor.replace on the relevant metabox.
The problem is that when the meta box contains THIS: (I trimmed the CSS for convenience. There's actually quite a bit).
<style type="text/css">
<!--
.side-banner .style1 {
font-family: Arial;
font-size: 14px;
}
.side-banner .style2 {
font-family: Helvetica;
font-size: 12px;
-->
</style>
<table width="246" border="0" cellspacing="0" cellpadding="0">
<tr>
<th width="246" height="15" colspan="2" scope="col"> </th>
CKEditor turns it into this:
<p><style type="text/css">
<!--{cke_protected}%3C!%2D%2D%0A.side-banner%20.style1%20%7B%0A%09font-family%3A%20Arial%2C.side-banner%20.style2%20%7B%0A%09font-family%3A%20Arial%2C%20Helvetica%2C%20sans-serif%3B-->
</style></p>
<table border="0" cellpadding="0" cellspacing="0" width="246">
<tbody>
<tr>
My client insists on editing the sidebox at the CSS/HTML level rather than just content, and I'd like to provide what is requested rather than spend time educating them (this, perhaps, is a topic for another S.O. question?).
I realise this has to do with CKEDITOR.config.protectedSource but I found very little documentation to help me, and I wouldn't know what kind of RegEx to provide to avoid this.
How do I keep CKEditor from gobbling up the HTML/CSS code in this <textarea> tag?
Remove the HTML comments (<!-- and -->) from the <style>
Edit: It's tracked in this ticket http://dev.fckeditor.net/ticket/4880