CS Keeping White Text White in Gmail Dark Mode (Remi Parmentier) Shared by Carin Slater, 2023-02-01 14:37:06 Tagged: Hack, Gmail Snippet Trigger View Design Library Please enter a valid trigger The text that, when typed and followed by a tab will trigger the insertion of the snippet code. Added to your Design Library. Go to Design Library. Copied to Clipboard Your snippet is out of date. Update snippet <!--Dark Mode hack to keep white text white in Gmail. Uses color blends ala Remi Parmentier: https://www.hteumeuleu.com/2021/fixing-gmail-dark-mode-css-blend-modes/--> <!--Styles--> <style> u + .body .gmail-screen { background:#000; mix-blend-mode:screen; } u + .body .gmail-difference { background:#000; mix-blend-mode:difference; } </style> <!--HTML--> <p style="color: #ffffff;"> <span class="gmail-screen"><span class="gmail-difference">I am white text</span></span> </p> View this Snippet
DC Test Shared by Diane Chen, 2023-01-09 22:26:29 Tagged: Image, Android 1 Snippet Trigger View Design Library Please enter a valid trigger The text that, when typed and followed by a tab will trigger the insertion of the snippet code. Added to your Design Library. Go to Design Library. Copied to Clipboard Your snippet is out of date. Update snippet <img> View this Snippet
CS Modular Starter Template: CTA button Shared by Carin Slater, 2022-08-04 13:03:18 Tagged: Litmus Templates, All 2 Snippet Trigger View Design Library Please enter a valid trigger The text that, when typed and followed by a tab will trigger the insertion of the snippet code. Added to your Design Library. Go to Design Library. Copied to Clipboard Your snippet is out of date. Update snippet <tr> <td align="center" valign="top" style="padding:0 0 50px;"> <!--CTA button - works with the Modular Starter Template found here: https://litmus.com/community/templates/40-modular-starter-template--> <a href="https://www.example.com{{utm_code}}" class="cta" style="background-color: #028383; font-size: 18px; font-family: 'Trebuchet MS', Arial, sans-serif; font-weight:bold; text-decoration: none; padding: 14px 20px; color: #ffffff; display:inline-block; mso-padding-alt:0;"><!--[if mso]><i style="letter-spacing: 25px;mso-font-width:-100%;mso-text-raise:30pt"> </i><![endif]--><span style="mso-text-raise:15pt;"><span class="gmail-screen"><span class="gmail-difference">Call to action</span></span></span><!--[if mso]><i style="letter-spacing: 25px;mso-font-width:-100%"> </i><![endif]--></a> </td> </tr> View this Snippet
NT Outlook 2016/365: Purple color (visited link) easy fix Shared by Nischal Tiwari, 2022-08-04 06:13:08 Tagged: Hack, Outlook 9 Snippet Trigger View Design Library Please enter a valid trigger The text that, when typed and followed by a tab will trigger the insertion of the snippet code. Added to your Design Library. Go to Design Library. Copied to Clipboard Your snippet is out of date. Update snippet <style type="text/css"> a{color:#fff;} <!--Define the link color but don't include the !important tag and also define the inline styling --> </style> <html> <body> <a href="#link" style="color:#ff6600;">Link 1</a> <!-- This will help to remove the purple color link on visited link on Outlook email --> </body> </html> View this Snippet
CS Modular Starter Template: Header with centered logo Shared by Carin Slater, 2022-01-31 16:10:16 Tagged: Litmus Templates, All 1 Snippet Trigger View Design Library Please enter a valid trigger The text that, when typed and followed by a tab will trigger the insertion of the snippet code. Added to your Design Library. Go to Design Library. Copied to Clipboard Your snippet is out of date. Update snippet <tr> <td align="center" valign="top" style="padding:50px 0;"> <!--Header with logo - works with the Modular Starter Template found here: https://litmus.com/community/templates/40-modular-starter-template. Make sure to update both the light and dark mode logos--> <!--light mode logo--> <a href="https://www.example.com/{{utm_code}}" target="_blank"><img class="light-img" src="https://via.placeholder.com/168x78" width="168" height="78" alt="place alt text here" style="color: #4a4a4a; font-family: 'Trebuchet MS', Arial, sans-serif; text-align:center; font-weight:bold; font-size:24px; line-height:28x; text-decoration: none; padding: 0;"> <!--dark mode logo - Make sure to update this as well as the light mode logo--> <!--[if !mso]><! --> <div class="dark-img" style="display:none; overflow:hidden; width:0px; max-height:0px; max-width:0px; line-height:0px; visibility:hidden;" align="center"> <img src="https://via.placeholder.com/168x78" width="168" height="78" alt="place alt text here" style="color: #4a4a4a; font-family: 'Trebuchet MS', Arial, sans-serif; text-align:center; font-weight:bold; font-size:24px; line-height:28px; text-decoration: none; padding: 0;" border="0" /> </div> <!--<![endif]--> </a> </td> </tr> View this Snippet
RN Litmus Preview Hack Shared by Robin Nieminen, 2021-06-30 16:12:24 Tagged: Preheader Text, All 1 Snippet Trigger View Design Library Please enter a valid trigger The text that, when typed and followed by a tab will trigger the insertion of the snippet code. Added to your Design Library. Go to Design Library. Copied to Clipboard Your snippet is out of date. Update snippet <div style="display: none; max-height: 0px; overflow: hidden;"> Insert hidden preheader text here </div> <!-- Insert ‌ hack after hidden preview text --> <div style="display: none; max-height: 0px; overflow: hidden;"> ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ </div> View this Snippet
EG Delete or change the blue links on dates in the Zimbra webmail (free - laposte.net) Shared by Emmanuel Gérard, 2021-03-09 04:42:39 Tagged: Link, All 2 Snippet Trigger View Design Library Please enter a valid trigger The text that, when typed and followed by a tab will trigger the insertion of the snippet code. Added to your Design Library. Go to Design Library. Copied to Clipboard Your snippet is out of date. Update snippet <style type="text/css"> span.Object { color: inherit !important; } span.Object-hover { color: inherit !important; text-decoration:none !important; } </style> View this Snippet
KM Hidden Preheader Text Shared by Kevin Mandeville, 2020-01-15 02:10:18 Tagged: Preheader Text, All 7 Snippet Trigger View Design Library Please enter a valid trigger The text that, when typed and followed by a tab will trigger the insertion of the snippet code. Added to your Design Library. Go to Design Library. Copied to Clipboard Your snippet is out of date. Update snippet <div style="display:none;font-size:1px;color:#{color};line-height:1px;font-family:{font};max-height:0px;max-width:0px;opacity:0;overflow:hidden;mso-hide:all;"> {preheader text} </div> View this Snippet
KM Bulletproof Button - VML Approach Shared by Kevin Mandeville, 2019-09-20 16:11:05 Tagged: Link, All 7 Snippet Trigger View Design Library Please enter a valid trigger The text that, when typed and followed by a tab will trigger the insertion of the snippet code. Added to your Design Library. Go to Design Library. Copied to Clipboard Your snippet is out of date. Update snippet <div> <!--[if mso]> <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="{link}" style="height:{height}px;v-text-anchor:middle;width:{width}px;" arcsize="{arcsize}%" strokecolor="#{strokecolor}" fillcolor="{fillcolor}"> <w:anchorlock/> <center style="color:#{color};font-family:{font};font-size:{font-size}px;">{button text}</center> </v:roundrect> <![endif]--> <a href="{link}" style="background-color:#{bgcolor};border:{border};border-radius:{border-radius};color:#{color};display:{display};font-family:{font};font-size:{font-size}px;line-height:{line-height}px;text-align:{align};text-decoration:{decoration};width:{width}px;-webkit-text-size-adjust:none;mso-hide:all;">{button text}</a> </div> View this Snippet
LT Conditional tags for Outlook and for everything else Shared by Laura Timmel, 2019-05-20 19:46:55 Tagged: Hack, All 1 Snippet Trigger View Design Library Please enter a valid trigger The text that, when typed and followed by a tab will trigger the insertion of the snippet code. Added to your Design Library. Go to Design Library. Copied to Clipboard Your snippet is out of date. Update snippet <!--[if gte mso 9]> CSS or HTML for Outlook <![endif]--> <!--[if !gte mso 9]><!-- --> CSS or HTML for everything else <!--<![endif]--> View this Snippet
MK How to Fix Yahoo Vertical White Space Shared by Manoj Kadam, 2019-02-24 11:34:39 Tagged: Table, Yahoo! Mail 1 Snippet Trigger View Design Library Please enter a valid trigger The text that, when typed and followed by a tab will trigger the insertion of the snippet code. Added to your Design Library. Go to Design Library. Copied to Clipboard Your snippet is out of date. Update snippet <!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" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="format-detection" content="telephone=no"> <title>Mailer Online</title> <style type="text/css"> html{width:100%; margin:0; padding:0;} ::-moz-selection{background:#b40202;color:#fff} ::selection{background:#b40202;color:#fff} body{background:#ffffff;margin:0;padding:0} .ExternalClass,.ReadMsgBody{width:100%;background-color:#ffffff} a{color:#b40202;text-decoration:underline;font-style:normal} a:hover{color:#b40202;text-decoration:none;font-style:normal} div,p{margin:0!important} @media only screen and (max-width:650px){ table table,td[class=main_body_width]{width:100%!important} table[class=mobile_width]{width:650px!important;margin:0 auto!important} table[class=featured_area]{width:650px!important;margin:0 auto!important} img[class=mobile_img_width]{width:100%!important;height:auto!important} table[class=hide_content],td[class=hide_content]{display:none!important} td[class=center]{text-align:center!important} table[class=main_body]{width:400px!important;margin-left:20px!important;margin-right:20px!important} } @media only screen and (max-width:479px){ table table,td[class=main_body_width]{width:100%!important} table[class=mobile_width]{width:324px!important;margin:0 auto!important} table[class=featured_area]{width:290px!important;margin:0 auto!important} img[class=mobile_img_width]{width:100%!important;height:auto!important} table[class=hide_content],td[class=hide_content]{display:none!important} td[class=center]{text-align:left!important; padding-left:10px;} table[class=main_body]{width:240px!important;margin-left:20px!important;margin-right:20px!important} td[class=maniabox]{padding-top:10px;!important} table[class=container], td[class=DDSresponsiveCell] {width: 100% !important;} td[class=DDSresponsiveCell] {display: block !important;} } </style> </head> <body style="background:#f1f1f1"> <!-- START MAIN BANNER BODY --> <table width="100%" bgcolor="#f1f1f1" align="center" cellpadding="0" cellspacing="0" border="0"> <tbody> <tr> <td width="100%"> <!-- START OF HEADER BLOCK--> <table width="100%" align="center" bgcolor="#f1f1f1" cellpadding="0" cellspacing="0" border="0" style="font-size:0px;"> <tbody> <tr> <td width="100%"> <table bgcolor="#ffffff" class="mobile_width" width="650" align="center" cellpadding="0" cellspacing="0" border="0"> <tbody> <tr> <td width="100%" height="25"> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td style="border-left:#fe0000 solid 1px;border-right:#fe0000 solid 1px;"> <table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" class="mobile_width"> <tbody> <!-- START MAIN BANNER IMAGE --> <tr> <td width="100%" align="center" valign="bottom"> <table align="center" cellpadding="0" cellspacing="0" border="0" class="mobile_width" style="font-size:0;"> <tbody> <tr> <td width="100%" align="center" valign="bottom"><img src="https://gallery.mailchimp.com/eea84e560f2ff909bd0ce29c7/images/ec025125-4f78-4d2d-967a-63c84b019a0c.gif" width="648" height="100" class="mobile_img_width" style="display:block;" alt="toplogo.gif"> </td> </tr> <tr> <td width="100%" align="center" valign="bottom"><img src="https://gallery.mailchimp.com/eea84e560f2ff909bd0ce29c7/images/7227ebe5-4302-4984-bf54-4ecd06be449f.jpg" alt="main_banner" width="648" height="402" border="0" class="mobile_img_width" style="display:block;"> </td> </tr> <tr> <td height="5" align="center" bgcolor="#003366" style="padding:10px;"> <font face="Zurich BT, Zurich Cn BT, Arial" color="#ffffff" style="font-size:24px;"><strong>Get up to 30% discount at international hotels<br> using MakeMyTrip Website & App</strong> </font> </td> </tr> </tbody> </table> </td> </tr> <tr> <td align="center" style="padding:20px;"> <table width="580" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td></td> </tr> <tr> <td align="left" style="text-align:justify;"> <font face="Zurich BT, Zurich Cn BT, Arial" color="#000000" style="font-size:15px;"> Dear Customer,<br> <br> Greetings from MakeMyTrip.<br> <br> Get up to 30% discount on international hotel bookings at MakeMyTrip Website & app.</font> </td> </tr> <tr> <td height="12" align="left"></td> </tr> <tr> <td height="25" align="left"> <img src="https://gallery.mailchimp.com/eea84e560f2ff909bd0ce29c7/images/126ddb00-ba1d-4499-a15c-ccf6ec540b9e.gif" width="570" height="255" class="mobile_img_width" alt="middlimg.gif"> </td> </tr> <tr> <td height="12" align="left"></td> </tr> <tr> <td height="12" align="center"> <table width="120" border="0" cellpadding="0" cellspacing="0"> <tr> <td align="center" bgcolor="#fe00e9" style="padding:8px;"> <font face="Zurich BT, Zurich Cn BT, Arial" color="#ffffff" style="font-size:15px;"><strong><a href="http://img.mailchimp.com/404-knowmore.html" target="_blank" style="color:#ffffff;text-decoration:none;">Know More</a></strong> </font> </td> </tr> </table> </td> </tr> <tr> <td height="25" align="left"> </td> </tr> <tr> <td align="left"> <font face="Zurich BT, Zurich Cn BT, Arial" color="#000000" style="font-size:15px;"> Looking forward to more opportunities to be of service to you.<br> <br> Sincerely,<br> <br> MMT<br> Head - Consumer<br> </font> </td> </tr> </table> </td> </tr> <tr> <td align="center" bgcolor="#003366"> <table border="0" align="right" cellpadding="0" cellspacing="0"> <tr> <td width="50" height="35" align="center" style="border-right:#ffffff solid 1px;"><a href="http://img.mailchimp.com/404-FB.html" target="_blank"><img src="https://gallery.mailchimp.com/eea84e560f2ff909bd0ce29c7/images/2b3138d8-63b9-4c48-bbfe-fe6716b7ff9b.jpg" alt="" width="24" height="24" border="0"></a> </td> <td width="50" height="35" align="center" style="border-right:#ffffff solid 1px;"><a href="http://img.mailchimp.com/404-Twitter.html" target="_blank"><img src="https://gallery.mailchimp.com/eea84e560f2ff909bd0ce29c7/images/369401ec-3f17-4dfd-9272-f234ffbf1f26.jpg" alt="" width="24" height="24" border="0"></a> </td> <td width="50" height="35" align="center" style="border-right:#ffffff solid 1px;"><a href="http://img.mailchimp.com/404-YouTube.html" target="_blank"><img src="https://gallery.mailchimp.com/eea84e560f2ff909bd0ce29c7/images/41e5147d-d086-48a1-9941-dd9bfcaf341c.png" alt="" width="25" height="24" border="0"></a> </td> <td width="50" height="35" align="center"><a href="http://img.mailchimp.com/404-linkdin.html" target="_blank"><img src="https://gallery.mailchimp.com/eea84e560f2ff909bd0ce29c7/images/f8e6cd70-2a52-4adf-8ebb-3525afb0d6f4.jpg" alt="" width="24" height="24" border="0"></a> </td> </tr> </table> </td> </tr> <!-- END MAIN BANNER IMAGE --> </tbody> </table> </td> </tr> </table> </td> </tr> </tbody> </table> <table class="mobile_width" align="center" width="650" bgcolor="#ffffff" cellpadding="0" cellspacing="0" border="0"> <tbody> <tr> <td width="100%"> <table class="mobile_width" align="center" width="650" cellpadding="0" cellspacing="0" border="0" bgcolor="#e77817"> <tr bgcolor="#ffffff"> <td align="right" style="padding:5px 10px;text-align:justify;"> <font face="Zurich BT, Zurich Cn BT, Arial" color="#000000" style="font-size:10px;"> Terms and Conditions of MMT and third parties apply. MMT is not responsible for third party products, goods, services and offers. If you do not wish to receive further marketing e-mails, please register under '<a href="http://img.mailchimp.com/404-dnd.html" target="_blank">Do Not Call</a>' registry on www.makemytrip.com.</font> </td> </tr> </table> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </body> </html> View this Snippet
KM Remove Samsung Blue Links Shared by Kevin Mandeville, 2019-01-08 19:39:57 Tagged: Link, Android 3 Snippet Trigger View Design Library Please enter a valid trigger The text that, when typed and followed by a tab will trigger the insertion of the snippet code. Added to your Design Library. Go to Design Library. Copied to Clipboard Your snippet is out of date. Update snippet #MessageViewBody a { color: inherit; text-decoration: none; font-size: inherit; font-family: inherit; font-weight: inherit; line-height: inherit; } View this Snippet
KM Override Gmail Blue Links Shared by Kevin Mandeville, 2018-08-14 19:05:05 Tagged: Link, Gmail 9 Snippet Trigger View Design Library Please enter a valid trigger The text that, when typed and followed by a tab will trigger the insertion of the snippet code. Added to your Design Library. Go to Design Library. Copied to Clipboard Your snippet is out of date. Update snippet u + #body a { color: inherit; text-decoration: none; font-size: inherit; font-family: inherit; font-weight: inherit; line-height: inherit; } /* ADD id="body" TO body TAG*/ View this Snippet
CT Snippet Shared by Countries Team, 2018-05-31 18:59:36 Tagged: Table, Outlook 3 Snippet Trigger View Design Library Please enter a valid trigger The text that, when typed and followed by a tab will trigger the insertion of the snippet code. Added to your Design Library. Go to Design Library. Copied to Clipboard Your snippet is out of date. Update snippet <!--Two Column BGI Start--> <table width="100%" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td align="center" valign="top"> <table width="750" border="0" align="center" cellpadding="0" cellspacing="0" class="main"> <tr> <td width="750" height="300" align="center" background="http://image.crm.kaplaninternational.com/lib/fe9a13707567017e76/m/9/IMG_2819.png" valign="top" style='background-position: 50% 50%; width: 750px; background-image: url("http://image.crm.kaplaninternational.com/lib/fe9a13707567017e76/m/9/IMG_2819.png"); background-repeat: no-repeat; background-size: cover; background-color: #555555; -webkit-background-size: cover;'> <!--[if gte mso 9]> <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:750px;" style="height:300px;"> <v:fill type="frame" src="http://image.crm.kaplaninternational.com/lib/fe9a13707567017e76/m/9/IMG_2819.png" color="#555555" /> <v:textbox style="mso-fit-shape-to-text:false" inset="0,0,0,0"> <![endif]--> <div> <table width="630" align="center" border="0" cellpadding="0" cellspacing="0" style="border:none;width:630px;" class="two-left-inner"> <tbody> <tr> <td> <table width="630" align="center" border="0" cellpadding="0" cellspacing="0" style="border:none;border-collapse:collapse;mso-table-lspace:0;mso-table-rspace:0;" class="two-left-inner"> <tr> <td height="50" align="left" valign="top" style="line-height:50px;"> </td> </tr> <tr> <td align="left" valign="top"> <table width="285" border="0" align="right" cellpadding="0" cellspacing="0" class="two-left-inner"> <tr> <td class="imageadjustleft" height="20" align="center" valign="top" style="line-height:20px; padding-top:6px;"><img src="http://image.crm.kaplaninternational.com/lib/fe9a13707567017e76/m/9/USA_Map_Silhouette_marked3.png" width="285" height="190" alt="" style="display:block;" /></td> </tr> </table> <table width="280" border="0" align="left" cellpadding="0" cellspacing="0" class="two-left-inner" style="width: 280px;"> <tr> <td align="left" valign="top"> <table width="285" border="0" align="left" cellpadding="0" cellspacing="0" style="width: 285px;"> <tr> <td align="left" class="title" valign="top" style="font-family:verdana, sans-serif; font-size:16px; font-weight:bold; color:#ffffff; text-transform:uppercase; line-height:20px; padding-left:2px; padding-top:10px;">Text</td> </tr> </table> </td> </tr> <tr> <td align="left" valign="top"> <table width="285" border="0" align="left" cellpadding="0" cellspacing="0" style="width: 285px;"> <tbody> <tr> <td class="title" align="left" valign="top" style="font-family:Arial, sans-serif; font-size:14px; font-weight:normal; color:#ffffff; line-height:20px; padding-left:2px; padding-top:10px; padding-bottom:50px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean tincidunt, ante sit amet cursus pharetra, nibh lectus tempor nunc, vel posuere ligula sapien sit amet augue. Sed suscipit, elit eget volutpat ultrices, urna diam imperdiet leo, at scelerisque risus felis ac arcu. Fusce nec efficitur mauris.</td> </tr> </tbody> </table> </td> </tr> </table> </td> </tr> </table> </td> </tr> </tbody> </table> </div> <!--[if gte mso 9]> </v:textbox> </v:rect> <![endif]--> </td> </tr> </table> </td> </tr> </table> <!--Two Column BGI End--> View this Snippet
SM Bulletproof ghost button – no VML, no tables Shared by Stig Morten Myre, 2018-05-22 20:27:33 Tagged: Link, All 13 Snippet Trigger View Design Library Please enter a valid trigger The text that, when typed and followed by a tab will trigger the insertion of the snippet code. Added to your Design Library. Go to Design Library. Copied to Clipboard Your snippet is out of date. Update snippet <style type="text/css"> .btn a { border: 2px solid #556270; border-radius: 4px; color: #556270; display: inline-block; font-family: sans-serif; font-size: 14px; font-weight: bold; line-height: 20px; padding: 10px 20px; text-align: center; text-decoration: none; transition: all 0.2s ease-in; } .btn a:hover, * [lang=x-btn] a:hover { border-color: #3f4953 !important; color: #3f4953 !important; } </style> <div class="btn" lang="x-btn"> <a href="#"> Click here or else </a> </div> View this Snippet
AD Bulletproof Button with Alternate Old-School Button for Outlook Shared by Andrew Driscoll, 2018-05-22 17:53:57 Tagged: Hack, All 2 Snippet Trigger View Design Library Please enter a valid trigger The text that, when typed and followed by a tab will trigger the insertion of the snippet code. Added to your Design Library. Go to Design Library. Copied to Clipboard Your snippet is out of date. Update snippet <!-- Begin non-Outlook, Bulletproof button set to a minimum width of 300px --> <!--[if !mso]><!--> <table width="100%" border="0" cellspacing="0" cellpadding="0" align="left"> <tbody> <tr> <td> <table class="responsive-btn" border="0" cellspacing="0" cellpadding="0" style="min-width: 300px; min-height: 52px;" align="left"> <tbody> <tr> <td align="center" style="border-radius: 3px; min-width: 300px;" bgcolor="#800000"> <a href="#" style="font-size: 16px; font-family: Arial, Helvetica, sans-serif; color: #ffffff; text-decoration: none;border-radius: 3px; padding: 12px 18px; border: 1px solid #800000; display: inline-block; text-transform:uppercase; background-color: #800000;">My Button Text</a> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> <!--<![endif]--> <!-- End non-Outlook button --> <!-- Begin Outlook button --> <!--[if mso]> <table width="100%" border="0" cellspacing="0" cellpadding="0" align="left"> <tbody> <tr> <td> <table height="52" border="0" cellspacing="0" cellpadding="0" align="left"> <tbody> <tr> <td height="52" align="center" valign="middle" bgcolor="#800000"> <a href="#" style="font-size: 16px; font-family: Arial, Helvetica, sans-serif; color: #ffffff; text-decoration: none; text-transform:uppercase; background-color: #800000;">My Button Text</a> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> <!--<![endif]--> <!-- End Outlook button --> View this Snippet
BG Bulletproof Buttons by Litmus Shared by Bill Goodspeed, 2018-04-18 14:17:23 Tagged: Link, All 3 Snippet Trigger View Design Library Please enter a valid trigger The text that, when typed and followed by a tab will trigger the insertion of the snippet code. Added to your Design Library. Go to Design Library. Copied to Clipboard Your snippet is out of date. Update snippet <a href="#" style="font-size:18px;font-family:'proxima_nova_rgregular',Proxima Nova,Helvetica,Arial,sans-serif;font-weight:normal;color:#ffffff;width:110px;text-decoration:none;border-radius:28px;background-color:#62be7f;padding:16px 28px;border:1px solid #62be7f;display:block" target="_blank">Button text →</a> View this Snippet
BP Preheader Hide Text in All Clients Shared by Brent P, 2018-03-19 09:55:18 Tagged: Preheader Text, All 3 Snippet Trigger View Design Library Please enter a valid trigger The text that, when typed and followed by a tab will trigger the insertion of the snippet code. Added to your Design Library. Go to Design Library. Copied to Clipboard Your snippet is out of date. Update snippet <!-- PREHEADER ----------------------------------------------------------> <style> .dvPreheader {display: none !important; mso-hide:all; visibility:hidden; mso-hide:all; font-size:1px; color:#ffffff; line-height:1px; max-height:0px; max-width:0px; opacity:0; overflow:hidden; } </style> <div class="dvPreheader" style="display: none !important; mso-hide:all; visibility:hidden;">SOME CONTENT HERE TO SHOW AS PREHEADER </div> <!-- /PREHEADER ----------------------------------------------------------> View this Snippet
AL 2ColumnFlipper - Staggered desktop - Stacked mobile properly Shared by Anthony Lizza, 2018-01-25 14:17:21 Tagged: Table, All 1 Snippet Trigger View Design Library Please enter a valid trigger The text that, when typed and followed by a tab will trigger the insertion of the snippet code. Added to your Design Library. Go to Design Library. Copied to Clipboard Your snippet is out of date. Update snippet <!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" /><!--[if !mso]><!--><meta http-equiv="X-UA-Compatible" content="IE=edge" /><!--<![endif]--><meta name="viewport" content="width=device-width"> <title>XXXXX</title> <style type="text/css">a[x-apple-data-detectors] { color: inherit !important; text-decoration: none !important; font-size: inherit !important; font-family: 'Open sans', inherit !important; font-weight: inherit !important; line-height: inherit !important; } .rightyleft{ direction: rtl; } @media screen and (max-width: 425px) { td[class="rightyleft"]{ direction:ltr !important; } td[class="mobileText"]{ text-align:center !important; } } @media yahoo { table {min-width:0px !important;} body {min-width:0px !important;} table {min-width:0px !important;} td {min-width:0px !important;} a {min-width:0px !important;} div {min-width:0px !important;} } </style> <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400italic,600,700,700italic,300" rel="stylesheet" type="text/css" /><!--[if (gte mso 9)|(IE)]> <style type="text/css"> table {border-collapse: collapse !important;} body {font-family: Arial, Helvetica, sans-serif !important;} table {font-family: Arial, Helvetica, sans-serif !important;} td {font-family: Arial, Helvetica, sans-serif !important;} a {font-family: Arial, Helvetica, sans-serif !important;} div {font-family: Arial, Helvetica, sans-serif !important;} span {font-family: Arial, Helvetica, sans-serif !important;} .rightyleft{ direction:ltr !important}; </style> <![endif]--> </head> <body bgcolor="#E0E0E0" style="Margin:0;padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;min-width:100%;background-color:#e0e0e0;"><!-- UPDATE HEADLINE PREVIEW BELOW --> <div class="HEADLINE-UPDATE-PREVIEW" style="display:none;font-size:1px;color:#333333;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;">We’re excited to announce...</div> <!-- UPDATE HEADLINE PREVIEW ABOVE --><!--[if (gte mso 9)|(IE)]> <table width="600" align="center" cellpadding="0" cellspacing="0" border="0"> <tr> <td> <![endif]--> <center class="wrapper" style="width:100%;table-layout:fixed;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;background-color:#e0e0e0;"> <div class="webkit" style="max-width:600px;"><!--[if (gte mso 9)|(IE)]> <table width="600" align="center" style="border-spacing:0;font-family: sans-serif;color:#333333;" > <tr> <td style="padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;" > <![endif]--> <table align="center" bgcolor="#FFFFFF" class="outer" style="border-spacing:0;font-family: sans-serif;color:#333333;Margin:0 auto;width:100%;max-width:600px;"><!-- LOGO_BANNER --> <!--2222222222222222 TWO COLUMNS --> <tr> <td style="padding-top:0px;padding-bottom:0px;padding-right:0;padding-left:0;text-align:center;font-size:0;"><!--[if (gte mso 9)|(IE)]> <table width="100%" style="border-spacing:0;font-family:sans-serif;color:#333333;" > <tr> <td width="50%" align="center" valign="top" style="padding-top:0;padding-bottom:0;padding-right:0;padding-left:0px;" > <![endif]--> <div class="col425" style="width:100%;max-width:300px;display:inline-block;vertical-align:top; overflow:visible;"> <table style="border-spacing:0;font-family:sans-serif;color:#333333;" width="100%"> <tbody> <tr> <td class="inner" style="padding-top:0px;padding-bottom:0px;padding-right:0px;padding-left:0px;"> <table class="contents" style="border-spacing:0;font-family:sans-serif;color:#333333;width:100%;font-size:14px;text-align:left;direction:ltr !important;"> <tbody> <tr> <td align="center" style="padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;"><img alt="Cartagena, Colombia" height="191" src="xxx.jpg" style="border:none;display:block;padding:0px;" title="Cartagena, Colombia" width="300" /></td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </div> <!--[if (gte mso 9)|(IE)]> </td> <td width="50%" align="left" valign="top" style="padding-top:0;padding-bottom:0;padding-right:17px;padding-left:0;" > <![endif]--> <div class="col425" style="width:100%;max-width:300px;display:inline-block;vertical-align:top; overflow:visible;"> <table dir="ltr" style="border-spacing:0;font-family:sans-serif;color:#333333;" width="100%"> <tbody> <tr> <td class="inner" style="padding-top:15px;padding-bottom:10px;padding-right:17px;padding-left:17px;"> <table align="center" style="border-spacing:0;font-family:sans-serif;color:#333333;width:100%;font-size:14px;text-align:center;"> <tbody> <tr> <td align="left" class="mobileText" style="font-size: 14px; line-height: 18px; font-family: 'Open sans', Arial, Helvetica, sans-serif; color: #37424a;font-weight:normal;letter-spacing:0px;">This is flipper 2 columns - !! There is Outlook code necessary !!</td> </tr> <tr> <td class="SPACER" style="padding:0px;font-size: 4px; line-height:5px; font-family: 'Open sans', Arial, Helvetica, sans-serif; color: #84888b;"> </td> </tr> <tr> <td align="left" class="mobileText" style="font-size: 14px; line-height: 18px; font-family: 'Open sans', Arial, Helvetica, sans-serif; color: #37424a;font-weight:normal;letter-spacing:0px;">Without this code, when it stacks in mobile, it would go <br />IMG<br />TEXT<br />TEXT<br />IMG</td> </tr> <tr> <td class="SPACER" style="padding:0px;font-size: 4px; line-height:5px; font-family: 'Open sans', Arial, Helvetica, sans-serif; color: #84888b;"> </td> </tr> <tr> <td align="left" class="mobileText" style="font-size: 14px; line-height: 18px; font-family: 'Open sans', Arial, Helvetica, sans-serif; color: #37424a;font-weight:normal;letter-spacing:0px;">This will ensure when stacking <br />IMG<br />TEXT<br />IMG<br />TEXT</td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </div> <!--[if (gte mso 9)|(IE)]> </td> </tr> </table> <![endif]--></td> </tr> <!-- END OF 22222222222222 TWO COLUMNS --> <tr bgcolor="#E0E0E0"> <td class="SPACER" style="padding:0px;font-size: 4px; line-height: 15px; font-family: 'Open sans', Arial, Helvetica, sans-serif; color: #37424a;"> </td> </tr> <!--2222222222222222 TWO COLUMNS --> <tr> <td class="rightyleft" style="padding-top:0px;padding-bottom:0px;padding-right:0;padding-left:0;text-align:center;font-size:0;"><!--[if (gte mso 9)|(IE)]> <table width="100%" style="border-spacing:0;font-family:sans-serif;color:#333333;" > <tr> <td width="50%" align="center" valign="top" style="padding-top:0;padding-bottom:0;padding-right:0;padding-left:0px;" > <![endif]--> <div class="col425" style="width:100%;max-width:300px;display:inline-block;vertical-align:top; overflow:visible;"> <table style="border-spacing:0;font-family:sans-serif;color:#333333;" width="100%"> <tbody> <tr> <td class="inner" style="padding-top:0px;padding-bottom:0px;padding-right:0px;padding-left:0px;"> <table class="contents" style="border-spacing:0;font-family:sans-serif;color:#333333;width:100%;font-size:14px;text-align:left;direction:ltr !important;"> <tbody> <tr> <td align="center" style="padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;"><img alt="Cartagena, Colombia" height="191" src="xxx.jpg" style="border:none;display:block;padding:0px;" title="Cartagena, Colombia" width="300" /></td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </div> <!--[if (gte mso 9)|(IE)]> </td> <td width="50%" align="left" valign="top" style="padding-top:0;padding-bottom:0;padding-right:17px;padding-left:0;" > <![endif]--> <div class="col425" style="width:100%;max-width:300px;display:inline-block;vertical-align:top; overflow:visible;"> <table dir="ltr" style="border-spacing:0;font-family:sans-serif;color:#333333;" width="100%"> <tbody> <tr> <td dir="ltr" class="inner" style="padding-top:15px;padding-bottom:10px;padding-right:17px;padding-left:17px;"> <table align="center" style="border-spacing:0;font-family:sans-serif;color:#333333;width:100%;font-size:14px;text-align:center;"> <tbody> <tr> <td align="left" class="mobileText" style="font-size: 18px; line-height: 24px; font-family: 'Open sans', Arial, Helvetica, sans-serif; color: #37424a;font-weight:600;letter-spacing:0px;">remember this side is the flipper </td> </tr> <tr> <td align="left" class="mobileText" style="font-size: 14px; line-height: 18px; font-family: 'Open sans', Arial, Helvetica, sans-serif; color: #37424a;font-weight:normal;letter-spacing:0px;">there is dir=ltr on the TD inner to make sure punctuation and text look normal</td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </div> <!--[if (gte mso 9)|(IE)]> </td> </tr> </table> <![endif]--></td> </tr> <!-- END OF 22222222222222 TWO COLUMNS --> <tr bgcolor="#E0E0E0"> <td class="SPACER" style="padding:0px;font-size: 4px; line-height: 15px; font-family: 'Open sans', Arial, Helvetica, sans-serif; color: #37424a;"> </td> </tr> </table> <!--[if (gte mso 9)|(IE)]> </td> </tr> </table> <![endif]--></div> </center> <!--[if (gte mso 9)|(IE)]> </td> </tr> </table> <![endif]--> </body> </html> View this Snippet
DC Outlook table-cell background image Shared by David Condrey, 2018-01-22 22:07:14 Tagged: Image, Outlook 1 Snippet Trigger View Design Library Please enter a valid trigger The text that, when typed and followed by a tab will trigger the insertion of the snippet code. Added to your Design Library. Go to Design Library. Copied to Clipboard Your snippet is out of date. Update snippet <!-- originally posted here: http://stackoverflow.com/a/23346010/1922144 more examples, screenshots, and test cases available in original post --> <html xmlns:v="urn:schemas-microsoft-com:vml"> <head> <style> v:* { behavior: url(#default#VML); display: inline-block; } </style> </head> <body> <center> <table width="100%" height="20"> <tr> <td bgcolor="#dddddd" style="background-image:url('http://placekitten.com/g/500/300');background-repeat:no-repeat;background-position:center;" background="http://placekitten.com/g/500/300" width="100%" height="300"> <!--[if gte mso 9]> <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="mso-width-percent:1000;height:300px;"> <v:fill type="frame" src="http://placekitten.com/g/500/300" color="#ffffff" /> </v:rect> <![endif]--> </td> </tr> <tr> <td bgcolor="#33cc99"> <table border="0" cellpadding="5" cellspacing="0"><tr><td height="5"><table border="0" cellpadding="0" cellspacing="0"><tr><td></td></tr></table></td></tr></table> </td> </tr> <tr> <td bgcolor="#ffff99" style="background-image:url('http://placekitten.com/g/500/300');background-repeat:no-repeat;background-position:center;" background="http://placekitten.com/g/500/300" width="100%" height="300"> <!--[if gte mso 9]> <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="mso-width-percent:1000;height:300px;"> <v:fill type="frame" src="http://placekitten.com/g/500/300" color="#ffffff" /> </v:rect> <![endif]--> </td> </tr> </table> </center> </body> </html> View this Snippet
CT
