This may seem like a very easy question for a some people, but I've been asked to make an html email signature for someone at my office.
Doing a little googling it seems that for gmail, all you need to do is design the signature that you want to use, then copy and paste the whole thing into their signature box, then you should be good to go.
The problem I'm running into is I can only copy the text, I can't find a way to copy the borders of my div (I tried using a table for this too, but ran into the same issue.
I tried to find a way to work around this, by seeing if there was somewhere I could just input pure html into their signature box, but it renders as text, not as html.
After searching around for a while I haven't been able to find a solution to this issue yet, any help would be appreciated!(will add html below)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
#box {
border-style: solid;
border-color: black;
height: 130px;
width: 285px;
}
#name{
font-weight: bold;
text-align: center;
}
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<div id=box>
<p id=name> ———— John Doe ———— </p>
</div>
<table>
<tr>
<td>test</td>
</tr>
</table>
</body>
</html>
There is a lot to consider in an HTML email signature. You need to develop and design it just as you would a regular HTML email. This means ALL styling should be inlined - especially Gmail as it ignores all Style tags. You also need to take into account the CSS that is available for each client (https://www.campaignmonitor.com/css/).
You will also want to test this signature across each client as the email client you are using may in fact change the code you put in prior to sending and each email client's pre-processor may delete or further edit your code upon delivery.
A great article about creating an email signature: http://www.sitepoint.com/the-art-of-designing-and-marking-up-email-signatures/
This is your code inlined:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<div style="border-style: solid; border-color: black; height: 130px; width: 285px;">
<p style="font-weight: bold; text-align: center;"> ———— John Doe ———— </p>
</div>
<table>
<tr>
<td style="border: 1px solid black;">test</td>
</tr>
</table>
</body>
</html>
Related
I'm creating a HTML email newsletter. I'm using webfonts served by Typekit. It is well documented that versions of Outlook using Microsoft Word to render the email don't use the specified fallback font, but Times New Roman (see https://litmus.com/blog/the-ultimate-guide-to-web-fonts).
The work around is to target Outlook and use a different font stack:
<!--[if mso]>
<style type=”text/css”>
h1 {
font-family: Arial, sans-serif;
}
</style>
<![endif]-->
My question is: where does this code go?
In the <head>?
In the <body>?
I'm guessing it goes in the <head>, but below the main CSS hence below the </style>?
But I've noticed that when I import the code into my Email Service provider (Direct Mail for Mac) strips out this "invisible code". Why is the code between <!-- --> surely this makes the code invisible/not work?
It may be a little confusing, but email clients read if/else statements even if they are hidden by <!-- -->.
Email clients interpret this as please do: <!--[if !mso]><!-- --> and Outlook interprets it as please ignore. This does just the opposite: <!--[if (gte mso 9)|(IE)]><!-- -->
Example:
https://jsfiddle.net/wallyglenn/5hruzos5/
Outlook Desktop client does not work with most webfonts like Google fonts. Instead of using a fallback font, Outlook will use it's own fallback font, Times New Roman. This is great if you're using a serif font, but if you're not, it can seriously affect the look of your email.
Using if/else, you can target Outlook specifically to use a websafe fallback font by creating a custom style sheet. The preferred location is after the style sheet you use to target all email clients, since the last style listed is the one that gets used. If your email calls for a webfont like Gotham or Lato, this style sheet will direct Outlook to use Arial or a sans-serif font:
<head>
<style type="text/css>
css for email clients
</style>
<!--[if (gte mso 9)|(IE)]>
<style type="text/css">
body, table, td, a, h1, p {font-family: Arial, sans-serif !important;}
</style>
<![endif]-->
</head>
The reason for the gte mso9 is that Outlook 2007 (mso version 9 and above) started using Microsoft Word as a formatting engine. This caused compatibility issues with web standards, but helped ensure that a document designed in Word looks appropriate in Outlook email. You can target specific versions of Outlook by using the mso number.
An example of if/else in email body:
<!--[if (gte mso 9)|(IE)]><!-- -->
starting code for Outlook specific thingy
<![endif]-->
[fallback goes here]
<!--[if (gte mso 9)|(IE)]>ending code if needed<![endif]-->
I hope that helps.
Good luck with Outlook.
I'm sending a fairly simple multipart message containing both plain text and HTML versions. The HTML version is a table with some columns, all sized in percent. All styles are inline.
In outlook.com it renders terribly. Viewing source (in a browser - Firefox) I can see that it is mangling the HTML.
For instance the opening table tag is rendering like this:
(hmm - so mangled stackoverflow won't render it either).
Basically it is lopping off the first character of attributes, so width="100%" renders as width="00%", align="eft", links come up as "ttp://something.com", missing quotes, etc. Viewing source in outlook.com doesn't show the HTML at all - it must be rendered via javascript, as I can only see it using Firebug.
I've tried it both with and without the conditional comments (which are in place for Outlook the app), and with/without the doctype. Nothing makes it better. I don't have a clue what's going on, and not finding any other posts about attributes getting truncated.
Any thoughts?
Here's the HTML portion of the email:
<!DOCTYPE html>
<html>
<body style="font-family: Arial, Helvetica, sans-serif; font-size: 14px;line-height: 1.4; color: #333;">
<!--[if (gte mso 9)|(IE)]>
<table width="600" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<![endif]-->
<table style="width: 100%; max-width: 600px;" align="left" cellpadding="0" cellspacing="0" border="0">
<tr>
<td colspan="3" width="100%" height="16"></td>
</tr>
<tr>
<td width="3%"></td>
<td><img src="https://www.domain.com/logo.png" width="203" height="38" alt="alt name" /></td>
<td width="3%"></td>
</tr>
<tr>
<td colspan="3" width="100%" height="30"></td>
</tr>
<tr>
<td width="3%"></td>
<td width="94%">
Hello,<br />
<br />
The Proof for Order Item #123 is ready for review. Please login to your account to review and approve the proof.<br />
<br />
Log in at https://www.domain.com/my-account/ and choose "Proofs Waiting Approval" on the "My Account" page.<br />
<br />
Click the "Review" link for ID 123 - you will see your proof and you will be able to approve it for delivery. You will also have the opportunity to request changes.<br />
<br />
Please contact our office if you have any questions.<br />
Thank you.<br />
<br />
Sincerely,<span style="font-size: 4px;"><br />
<br />
</span>
<span style="font-size:13px; font-weight: bold;">COMPANY TEAM</span><br />
<span style="font-size: 9px;"><span style="color: #2b9f4c;">COMPANY</span> | CUSTOMER SERVICE</span><span style="font-size: 11px;"><br />
<span style="font-weight: bold;color: #0c7ebd;">T:</span> 888.555.2122</span><span style="font-size: 4px;"><br />
<br />
</span>
<span style="font-size: 10px;">www.domain.com<span style="font-size: 3px;"><br />
<br />
</span>
<img src="https://www.domain.com/images/email/ConsiderEnvironment.png" width="37" height="42" alt="" /> <span style="color: #2b9f4c;">Please consider the environment before printing this email</span></span>
</td>
<td width="3%"></td>
</tr>
<tr>
<td colspan="3" width="100%" height="30"></td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</body>
</html>
your code looks pretty email friendly to me!
My only suggestion is check all your elements in accordance with Campaign Monitor's support guide (https://i3.campaignmonitor.com/assets/files/css/campaign-monitor-guide-to-css-in-email-may-2014.pdf?ver=5117&_ga=1.123317261.720201475.1441145331).
Another handy feature campaign monitor use is their testing system, this also gives a preview of what your email would look like in each browser/email client (outlook.com is supported). Unfortunately each test costs 5 Australian dollars but sometimes I find the fee is worth the headache as it's always accurate!
More info on this can be found here:
https://www.campaignmonitor.com/testing/
Ack - turns out I had the wrong Content-Transfer-Encoding. I had it set to quoted-printable but should have been 8bit or 7bit. quoted-printable assumes it's to be read as presented, and is not code to be interpreted. Or so I gather.
Oddly it worked just fine in every other client tested in. So - "thanks" outlook.com, for teaching me something...
We are having severe problems connecting to any of our databases in Cloud SQL with a wide range of errors (from delays in retrieving results) to exceptions on the google driver:
com.google.api.client.http.HttpResponseException: 503 Service Unavailable
<html><head><meta http-equiv="content-type" content="text/html; charset=utf-8"/><title>Sorry...</title><style> body { font-family: verdana, arial, sans-serif; background-color: #fff; color: #000; }</style></head><body><div><table><tr><td><b><font face=times color=#0039b6 size=10>G</font><font face=times color=#c41200 size=10>o</font><font face=times color=#f3c518 size=10>o</font><font face=times color=#0039b6 size=10>g</font><font face=times color=#30a72f size=10>l</font><font face=times color=#c41200 size=10>e</font></b></td><td style="text-align: left; vertical-align: bottom; padding-bottom: 15px; width: 50%"><div style="border-bottom: 1px solid #dfdfdf;">Sorry...</div></td></tr></table></div><div style="margin-left: 4em;"><h1>We're sorry...</h1><p>... but your computer or network may be sending automated queries. To protect our users, we can't process your request right now.</p></div><div style="margin-left: 4em;">See Google Help for more information.<br/><br/></div><div style="text-align: center; border-top: 1px solid #dfdfdf;">© 2013 Google - Google Home</div></body></html>
com.google.api.client.http.HttpRequest.execute(HttpRequest.java:861)
com.google.cloud.sql.jdbc.internal.googleapi.RpcGoogleApi$DefaultGoogleApi.execImpl(RpcGoogleApi.java:326)
com.google.cloud.sql.jdbc.internal.googleapi.RpcGoogleApi$DefaultGoogleApi.exec(RpcGoogleApi.java:308)
com.google.cloud.sql.jdbc.internal.googleapi.RpcGoogleApi.openConnection(RpcGoogleApi.java:99)
com.google.cloud.sql.jdbc.internal.SqlProtoClient.openConnection(SqlProtoClient.java:58)
com.google.cloud.sql.jdbc.Driver.connect(Driver.java:66)
com.google.cloud.sql.Driver.connectImpl(Driver.java:109)
com.google.cloud.sql.Driver.connect(Driver.java:98)
com.google.cloud.sql.Driver.connect(Driver.java:31)
org.jboss.jca.adapters.jdbc.local.LocalManagedConnect
Or:
org.jboss.resteasy.spi.UnhandledException: javax.persistence.PersistenceException: org.hibernate.exception.GenericJDBCException: 502 Bad Gateway
<!DOCTYPE html>
<html lang=en>
<meta charset=utf-8>
<meta name=viewport content="initial-scale=1, minimum-scale=1, width=device-width">
<title>Error 502 (Server Error)!!1</title>
<style>
*{margin:0;padding:0}html,code{font:15px/22px arial,sans-serif}html{background:#fff;color:#222;padding:15px}body{margin:7% auto 0;max-width:390px;min-height:180px;padding:30px 0 15px}* > body{background:url(//www.google.com/images/errors/robot.png) 100% 5px no-repeat;padding-right:205px}p{margin:11px 0 22px;overflow:hidden}ins{color:#777;text-decoration:none}a img{border:0}#media screen and (max-width:772px){body{background:none;margin-top:0;max-width:none;padding-right:0}}
</style>
<a href=//www.google.com/><img src=//www.google.com/images/errors/logo_sm.gif alt=Google></a>
<p><b>502.</b> <ins>That’s an error.</ins>
<p>The server encountered a temporary error and could not complete your request.<p>Please try again in 30 seconds. <ins>That’s all we know.</ins>
org.jboss.resteasy.core.ExceptionHandler.handleApplicationException(ExceptionHandler.java:80)
org.jboss.resteasy.core.ExceptionHandler.handleException(ExceptionHandler.java:220)
org.jboss.resteasy.core.SynchronousDispatcher.writeException(SynchronousDispatcher.java:146)
org.jboss.resteasy.core.SynchronousDispatcher.invoke(SynchronousDispatcher.java:351)
It was working perfectly until an hour ago which we started to get alerts with the failures.
Best regards
Sergio
Between 11.00PST and 11.30PST there was an issue that interrupted many Cloud SQL instances. The problem should now be resolved.
We apologize for the inconvenience and thank you for your patience and continued support. Please rest assured that system reliability is a top priority for the Google Cloud Platform, and we are making continuous improvements to make our systems better.
To be kept informed of other Google Cloud SQL issues and launches, please join google-cloud-sql-announce#googlegroups.com
https://groups.google.com/forum/#!forum/google-cloud-sql-announce
I'm trying to add a gist to my blog to see how it works and use it to share some code related blogs going forward.
I've followed the steps mentioned form this blog, but I'm not able to get it to work. I don't know what I'm missing, any pointers on what I could be missing would be really appreciated.
My HTML Editor of blog related code looks like this:-
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
Hi<br />
<br />
test<br />
<br />
<br />
<div class="gistLoad" data-id="4132084" id="gist-4132084">
Loading ....</div>
<br />
<br />
<br />
<br />
<pre style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; color: black; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: pre-wrap; widows: 2; word-spacing: 0px; word-wrap: break-word;"></pre>
</div>
<script src="https://raw.github.com/moski/gist-Blogger/master/public/gistLoader.js" type="text/javascript"></script> </div>
Thanks.
UPDATE (including, changing the code above)
I found one thing confusing for a while, why should I actually paste a div tag in the "Compose" Section of the Blog, it's afterall HTML code, so I moved it to the HTML editor part of the Blog. What was confusing to me initially was when it was mentioned in the blog:-
Now to include any gist template just add the following anywhere in
your blog post.
But anyways, now, I only get "Loading" .., The error still persists..
Here's the code that did it correctly for me. I had to ensure that within the div I copy the code that comes as part of 'Embed the gist' when you actually see one's real gist(say for e.g., this gist) on Github.
Also, one more mistake I made was in my code, the JS was not completely outside the post(it was actually inside the last div if you observer closely(my bad)). Anyways, All's well that end's well :). So here's the code that did the trick for me -
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
Hi<br />
<br />
test<br />
<br />
<br />
<div class="gistLoad" data-id="4132084" id="gist-4132084">
<script src="https://gist.github.com/boddhisattva/4132084.js"></script>
In case you want to see how I was able to embed the gist in my blog, you can have a look
at the stackoverflow question that I posted here on the same when I had initially faced issues to get this to work for me.
Credits to the original blogger's post.
</div>
<br />
<br />
<br />
<br />
<pre style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; color: black; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: pre-wrap; widows: 2; word-spacing: 0px; word-wrap: break-word;"></pre>
</div>
</div>
<script src="https://raw.github.com/moski/gist-Blogger/master/public/gistLoader.js" type="text/javascript"></script>
Here's the actual blog link which uses the above code.
Cheers.. :)
A simpler solution (since October 2014): www.gistfy.com:
Gistfy is an easy way to create embeddable code snippets from your GitHub and Bitbucket repositories or your GitHub Gist.
For example:
<script type='text/javascript' src='http://www.gistfy.com/github/gist/10666727'></script>
^
(id of a GitHub Gist)
The blog post you mention explains everything clearly and it's all you have to do. I'll describe what I did:
I copied the <script src="https://raw.github.com/moski/gist-Blogger/master/public/gistLoader.js" type="text/javascript"></script> into a widget that is dynamically loaded into each blog page (posts, pages, everything). This will not work, because, as being said, include the following code at the end of each of your blog posts. This means you have to include it separately in al your posts. Yes, I don't like it as well, but the blog entries are loaded dynamically, so you have to load gists after the original blog entry is loaded.
Put the <div class="gistLoad" data-id="GistID" id="gist-GistID">Loading ....</div>
just where you would put original github gist code. For example - this is a gist I wanted to display on my post. This is the original code: <script src="https://gist.github.com/tkoomzaaskz/6235219.js"></script>. The gistID is 6235219. So, instead, I put <div class="gistLoad" data-id="6235219" id="gist-6235219">Loading ....</div>. And in the end of the post, I put the javascript source from point 1.
This blog post is an example that it works fine.
I dont know, whether your are trying gist content made it as private or public. Here are the few steps for how to implement PUBLIC gist code into your blogger.
1) Create a gist file in gist.github.com(While you save the file just choose as "Create Public Gist"
2) Take/copy the code "Embed URL" text box(almost you done).
3) Login to your blogger and add copied code into your desired posts. Thats all. Your public gist code will display in your page.
Actual article from here
For me it was because i was using dynamic view template on google blogger. When i changed it to simple then the javascript was working and showed the gist.
The 3rd party github hosted file tag didn't work for me at all. - <script src="https://raw.github.com/moski/gist-Blogger/master/public/gistLoader.js" type="text/javascript"></script>
failed in chrome with Refused to execute script from 'https://raw.github.com/moski/gist-Blogger/master/public/gistLoader.js' because its MIME type ('text/plain') is not executable, and strict MIME type checking is enabled.
The embed links on github's site work, but for those wanting to avoid the reliance on a script link, I wrote code to pull down what the embed link serves up and decode it for pasting into blogger. LinqPad code at https://github.com/ImaginaryDevelopment/LinqPad/blob/master/LINQPad%20Queries/LanguageTranslators/fetch%20then%20parse%20gist%20html.linq
Kindly look for the Embed code ofrthe gist, i found out it to be
<script src="https://gist.github.com/boddhisattva/4132084.js"></script>
The just create a blogpost in blogger.com with just the above script, it's that easy
this is the first time I work with email forms for Lotus Notes - should the answer be too simple, please forgive me.
What I do is sending an HTML mail with a FORM. Usually Notes opens URLs in such emails in a new browser window - but the email form (or rather the server's response) is opened in a new tab.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html charset=UTF-8" />
<title>Title</title>
</head>
<body style="width: 600px; padding: 20px; margin: 0px; font-family: Verdana, Arial, sans-serif; font-size: 12px">
...
<form action="http://server/url/" method="post" target="_blank">
...
<div style="margin-top: 30px; text-align: right; padding-bottom: 30px; border-bottom: 2px solid #CCCCCC">
<input type="submit" value="Send" />
</div>
</form>
</body>
</html>
PS: Lotus seems to ignore whether a target="_blank" is set or not.
Any suggestions? I know that you can modify the program's behavior when it is your Notes - but as the tab sometimes has other connections settings (e.g. proxy) than the local browser I'd like to change the behavior "by mail".
Thanks for suggestions!
BurninLeo
Unfortunately browser behavior can't be controlled by the content and needs to be set on the client side. The target attribute is the only thing you can change.
Check your browser settings and what happens when you click on a link in the browser. If it normally opens in a new tab, then setting your target doesn't make a difference, as the new tab is the target.
Before tabbed browsing was introduced, it would always open a new window, but now it just opens a new tab.