template/email/index.html in edge_framework-1.2.9 vs template/email/index.html in edge_framework-1.3.0

- old
+ new

@@ -1,100 +1,66 @@ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> - <title>Untitled</title> - <style type="text/css" data-premailer="ignore"> - /* Reset */ - #outlook a { padding: 0; } - body { width: 100% !important; margin: 0; padding: 0; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } - - .ExternalClass { width: 100%; } - .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div { line-height: 100%; } - - #backgroundTable {margin: 0; padding: 0; width: 100% !important; line-height: 100% !important; } - - /* Image - remove spacing */ - img { outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; } - a img { border: none; } - .image-fix { display: block; } + <title>Upstart EDM</title> + <style data-premailer="ignore"> + /* Force Outlook to provide a "view in browser" menu link. */ + #outlook a { + padding: 0; + } - /* Yahoo */ - p { margin: 1em 0; } + /* Force Hotmail to display emails at full width */ + .ExternalClass { + width: 100%; + } - /* Hotmail reset */ - h1, h2, h3, h4, h5, h6 { color: black !important; } - h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { color: blue !important; } - h1 a:active, h2 a:active, h3 a:active, h4 a:active, h5 a:active, h6 a:active { color: red !important; } - h1 a:visited, h2 a:visited, h3 a:visited, h4 a:visited, h5 a:visited, h6 a:visited { color: purple !important; } - - /* Outlook 2007 and 2010 */ - table td { border-collapse: collapse; } - table { border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; } - - /* NOTE: To properly use @media queries and play nice with yahoo mail, use attribute selectors in place of class, id declarations. - table[class=classname] - Read more: http://www.campaignmonitor.com/blog/post/3457/media-query-issues-in-yahoo-mail-mobile-email/ - */ - @media only screen and (max-device-width: 480px) { - - /* A nice and clean way to target phone numbers you want clickable and avoid a mobile phone from linking other numbers that look like, but are not phone numbers. Use these two blocks of code to "unstyle" any numbers that may be linked. The second block gives you a class to apply with a span tag to the numbers you would like linked and styled. - - Inspired by Campaign Monitor's article on using phone numbers in email: http://www.campaignmonitor.com/blog/post/3571/using-phone-numbers-in-html-email/. - - Step 1 (Step 2: line 224) - */ - a[href^="tel"], a[href^="sms"] { - text-decoration: none; - color: black; /* or whatever your want */ - pointer-events: none; - cursor: default; - } - - .mobile_link a[href^="tel"], .mobile_link a[href^="sms"] { - text-decoration: default; - color: orange !important; /* or whatever your want */ - pointer-events: auto; - cursor: default; - } + .ExternalClass, + .ExternalClass p, + .ExternalClass span, + .ExternalClass font, + .ExternalClass td, + .ExternalClass div { + line-height: 100%; + } + + /* Outlook 07, 10 Padding issue fix */ + table td { + border-collapse: collapse; } + </style> + + <link rel="stylesheet" href="assets/css/framework.css"> + <link rel="stylesheet" href="assets/css/app.css"> - /* More Specific Targeting */ + <!--[if IEMobile 7]> + <style type="text/css"> - @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) { - /* You guessed it, ipad (tablets, smaller screens, etc) */ + </style> + <![endif]--> - /* Step 1a: Repeating for the iPad */ - a[href^="tel"], a[href^="sms"] { - text-decoration: none; - color: blue; /* or whatever your want */ - pointer-events: none; - cursor: default; - } + <!--[if gte mso 9]> + </style> + <![endif]--> +</head> +<body> +<!-- Use this outer table to set background and width of your email --> +<table id="background-table" border="0"> +<tr> + <td> + <!-- Use nested tables as a way to space effectively in your message --> + <table> + </table> + + <table> + </table> + </td> +</tr> +</table> - .mobile_link a[href^="tel"], .mobile_link a[href^="sms"] { - text-decoration: default; - color: orange !important; - pointer-events: auto; - cursor: default; - } - } +<!-- This JS is for debugging only and will be ignored after compilation --> +<script src="assets/js/jquery.min.js"></script> +<script src="assets/js/app.js"></script> - @media only screen and (-webkit-min-device-pixel-ratio: 2) { - /* Put your iPhone 4g styles in here */ - } - - /* Following Android targeting from: - http://developer.android.com/guide/webapps/targeting.html - http://pugetworks.com/2011/04/css-media-queries-for-targeting-different-mobile-devices/ */ - @media only screen and (-webkit-device-pixel-ratio:.75){ - /* Put CSS for low density (ldpi) Android layouts in here */ - } - @media only screen and (-webkit-device-pixel-ratio:1){ - /* Put CSS for medium density (mdpi) Android layouts in here */ - } - @media only screen and (-webkit-device-pixel-ratio:1.5){ - /* Put CSS for high density (hdpi) Android layouts in here */ - } - /* end Android targeting */ - </style> \ No newline at end of file +</body> +</html>