CRM-15234 - prevent loss of responsive HTML markup due to CIVICRM_MAIL_SMARTY being...
authorDave Greenberg <dave@civicrm.org>
Tue, 7 Oct 2014 22:51:11 +0000 (15:51 -0700)
committerDave Greenberg <dave@civicrm.org>
Tue, 7 Oct 2014 22:51:11 +0000 (15:51 -0700)
----------------------------------------
* CRM-15234:
  https://issues.civicrm.org/jira/browse/CRM-15234

xml/templates/message_templates/sample/Sample Responsive Design Newsletter - Single Column.tpl
xml/templates/message_templates/sample/Sample Responsive Design Newsletter - Two Column.tpl

index 7a1b2d21db3bd7cee25268140f4f2726e1baac08..8a883ec640e1520943d38f84eb160b8632cf43d8 100644 (file)
@@ -4,6 +4,7 @@
   <title></title>
 
   <style type="text/css">
+    {/literal}
     /* Client-specific Styles */ 
     #outlook a {padding:0;} /* Force Outlook to provide a "view in browser" menu link. */
     body{width:100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; margin:0; padding:0;}
@@ -29,7 +30,7 @@
     .mobile_link a[href^="tel"], .mobile_link a[href^="sms"] {text-decoration: default;color:#136388;pointer-events: auto;cursor: default;}
     table[class=devicewidth] {width: 440px!important;text-align:center!important;}
     table[class=devicewidthmob] {width: 416px!important;text-align:center!important;}
- table[class=devicewidthinner] {width: 416px!important;text-align:center!important;}
   table[class=devicewidthinner] {width: 416px!important;text-align:center!important;}
     img[class=banner] {width: 440px!important;auto!important;}
     img[class=col2img] {width: 440px!important;height:auto!important;}
     table[class="cols3inner"] {width: 100px!important;}
@@ -67,7 +68,7 @@
     @media only screen and (max-width: 640px) {
     .desktop-spacer {display:none !important;}
  }
-
+ {/literal}
   </style>
 
 <body>
index 3e5485cab53f200cd4c112f4df15d2df35b020f8..216ab36647e745a1e0fe39581598682857d4c8f5 100644 (file)
@@ -2,67 +2,70 @@
   <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
   <meta content="width=device-width, initial-scale=1.0" name="viewport" />
   <title></title>
-  <style type="text/css">img {height: auto !important;}
-           /* Client-specific Styles */
-           #outlook a {padding:0;} /* Force Outlook to provide a "view in browser" menu link. */
-           body{width:100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; margin:0; padding:0;}
-
-           /* Prevent Webkit and Windows Mobile platforms from changing default font sizes, while not breaking desktop design. */
-           .ExternalClass {width:100%;} /* Force Hotmail to display emails at full width */
-           .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;} /* Force Hotmail to display normal line spacing. */
-           #backgroundTable {margin:0; padding:0; width:100% !important; line-height: 100% !important;}
-           img {outline:none; text-decoration:none;border:none; -ms-interpolation-mode: bicubic;}
-           a img {border:none;}
-           .image_fix {display:block;}
-           p {margin: 0px 0px !important;}
-           table td {border-collapse: collapse;}
-           table { border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; }
-           a {/*color: #33b9ff;*/text-decoration: none;text-decoration:none!important;}
-
-
-           /*STYLES*/
-           table[class=full] { width: 100%; clear: both; }
-
-           /*IPAD STYLES*/
-           @media only screen and (max-width: 640px) {
-           a[href^="tel"], a[href^="sms"] {text-decoration: none;color: #0a8cce;pointer-events: none;cursor: default;}
-           .mobile_link a[href^="tel"], .mobile_link a[href^="sms"] {text-decoration: default;color: #0a8cce !important;pointer-events: auto;cursor: default;}
-           table[class=devicewidth] {width: 440px!important;text-align:center!important;}
-           table[class=devicewidthmob] {width: 414px!important;text-align:center!important;}
-           table[class=devicewidthinner] {width: 414px!important;text-align:center!important;}
-           img[class=banner] {width: 440px!important;auto!important;}
-           img[class=col2img] {width: 440px!important;height:auto!important;}
-           table[class="cols3inner"] {width: 100px!important;}
-           table[class="col3img"] {width: 131px!important;}
-           img[class="col3img"] {width: 131px!important;height: auto!important;}
-           table[class="removeMobile"]{width:10px!important;}
-           img[class="blog"] {width: 440px!important;height: auto!important;}
-           }
-
-           /*IPHONE STYLES*/
-           @media only screen and (max-width: 480px) {
-           a[href^="tel"], a[href^="sms"] {text-decoration: none;color: #0a8cce;pointer-events: none;cursor: default;}
-           .mobile_link a[href^="tel"], .mobile_link a[href^="sms"] {text-decoration: default;color: #0a8cce !important; pointer-events: auto;cursor: default;}
-           table[class=devicewidth] {width: 280px!important;text-align:center!important;}
-           table[class=devicewidthmob] {width: 260px!important;text-align:center!important;}
-           table[class=devicewidthinner] {width: 260px!important;text-align:center!important;}
-           img[class=banner] {width: 280px!important;height:100px!important;}
-           img[class=col2img] {width: 280px!important;height:auto!important;}
-           table[class="cols3inner"] {width: 260px!important;}
-           img[class="col3img"] {width: 280px!important;height: auto!important;}
-           table[class="col3img"] {width: 280px!important;}
-           img[class="blog"] {width: 280px!important;auto!important;}
-           td[class="padding-top-right15"]{padding:15px 15px 0 0 !important;}
-           td[class="padding-right15"]{padding-right:15px !important;}
-           }
-
-  @media only screen and (max-device-width: 800px)
-  {td[class="padding-top-right15"]{padding:15px 15px 0 0 !important;}
-           td[class="padding-right15"]{padding-right:15px !important;}}                 
-                @media only screen and (max-device-width: 769px) {.devicewidthmob {font-size:14px;}}
-
-  @media only screen and (max-width: 640px) {.desktop-spacer {display:none !important;} 
-                         }
+  <style type="text/css">
+     {literal}
+     img {height: auto !important;}
+     /* Client-specific Styles */
+     #outlook a {padding:0;} /* Force Outlook to provide a "view in browser" menu link. */
+     body{width:100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; margin:0; padding:0;}
+
+     /* Prevent Webkit and Windows Mobile platforms from changing default font sizes, while not breaking desktop design. */
+     .ExternalClass {width:100%;} /* Force Hotmail to display emails at full width */
+     .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;} /* Force Hotmail to display normal line spacing. */
+     #backgroundTable {margin:0; padding:0; width:100% !important; line-height: 100% !important;}
+     img {outline:none; text-decoration:none;border:none; -ms-interpolation-mode: bicubic;}
+     a img {border:none;}
+     .image_fix {display:block;}
+     p {margin: 0px 0px !important;}
+     table td {border-collapse: collapse;}
+     table { border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; }
+     a {/*color: #33b9ff;*/text-decoration: none;text-decoration:none!important;}
+
+
+     /*STYLES*/
+     table[class=full] { width: 100%; clear: both; }
+
+     /*IPAD STYLES*/
+     @media only screen and (max-width: 640px) {
+     a[href^="tel"], a[href^="sms"] {text-decoration: none;color: #0a8cce;pointer-events: none;cursor: default;}
+     .mobile_link a[href^="tel"], .mobile_link a[href^="sms"] {text-decoration: default;color: #0a8cce !important;pointer-events: auto;cursor: default;}
+     table[class=devicewidth] {width: 440px!important;text-align:center!important;}
+     table[class=devicewidthmob] {width: 414px!important;text-align:center!important;}
+     table[class=devicewidthinner] {width: 414px!important;text-align:center!important;}
+     img[class=banner] {width: 440px!important;auto!important;}
+     img[class=col2img] {width: 440px!important;height:auto!important;}
+     table[class="cols3inner"] {width: 100px!important;}
+     table[class="col3img"] {width: 131px!important;}
+     img[class="col3img"] {width: 131px!important;height: auto!important;}
+     table[class="removeMobile"]{width:10px!important;}
+     img[class="blog"] {width: 440px!important;height: auto!important;}
+     }
+
+     /*IPHONE STYLES*/
+     @media only screen and (max-width: 480px) {
+     a[href^="tel"], a[href^="sms"] {text-decoration: none;color: #0a8cce;pointer-events: none;cursor: default;}
+     .mobile_link a[href^="tel"], .mobile_link a[href^="sms"] {text-decoration: default;color: #0a8cce !important; pointer-events: auto;cursor: default;}
+     table[class=devicewidth] {width: 280px!important;text-align:center!important;}
+     table[class=devicewidthmob] {width: 260px!important;text-align:center!important;}
+     table[class=devicewidthinner] {width: 260px!important;text-align:center!important;}
+     img[class=banner] {width: 280px!important;height:100px!important;}
+     img[class=col2img] {width: 280px!important;height:auto!important;}
+     table[class="cols3inner"] {width: 260px!important;}
+     img[class="col3img"] {width: 280px!important;height: auto!important;}
+     table[class="col3img"] {width: 280px!important;}
+     img[class="blog"] {width: 280px!important;auto!important;}
+     td[class="padding-top-right15"]{padding:15px 15px 0 0 !important;}
+     td[class="padding-right15"]{padding-right:15px !important;}
+     }
+
+     @media only screen and (max-device-width: 800px)
+     {td[class="padding-top-right15"]{padding:15px 15px 0 0 !important;}
+     td[class="padding-right15"]{padding-right:15px !important;}}               
+     @media only screen and (max-device-width: 769px) {.devicewidthmob {font-size:14px;}}
+
+     @media only screen and (max-width: 640px) {.desktop-spacer {display:none !important;} 
+          }
+     {/literal}
   </style>
   <body>
     <!-- Start of preheader --><!-- Start of preheader -->