Pastebin launched a little side project called VERYVIRAL.com, check it out ;-) Want more features on Pastebin? Sign Up, it's FREE!
Guest

Email template for WP E-Commerce Shop Styling

By: haet on Dec 4th, 2012  |  syntax: HTML  |  size: 7.40 KB  |  views: 104  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  1. <!DOCTYPE HTML PUBLIC '-//W3C//DTD XHTML 1.0 Transitional //EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'><html><head><title></title><meta http-equiv='Content-Type' content='text/html; charset=utf-8'><style type='text/css'>
  2. /* Mobile-specific Styles */
  3. @media only screen and (max-device-width: 480px) {
  4. table[class=w15], td[class=w15], img[class=w15] { width:5px !important; }
  5. table[class=w30], td[class=w30], img[class=w30] { width:10px !important; }
  6. table[class=w640], td[class=w640], img[class=w640] { width:300px !important; }
  7. p[class=footer-content-left] { text-align: center !important; }
  8. #headline p { font-size: 30px !important; }
  9. .article-content, #left-sidebar{ -webkit-text-size-adjust: 90% !important; -ms-text-size-adjust: 90% !important; }
  10. .header-content, .footer-content-left {-webkit-text-size-adjust: 80% !important; -ms-text-size-adjust: 80% !important;}
  11. img { height: auto; line-height: 100%;}
  12. }
  13. /* Client-specific Styles */
  14. #outlook a { padding: 0; }      /* Force Outlook to provide a 'view in browser' button. */
  15. body { width: 100% !important; }
  16. .ReadMsgBody { width: 100%; }
  17. .ExternalClass { width: 100%; display:block !important; } /* Force Hotmail to display emails at full width */
  18. /* Reset Styles */
  19. /* Add 100px so mobile switch bar doesn't cover street address. */
  20. body { background-color: #dedede; margin: 0; padding: 0; }
  21. img { outline: none; text-decoration: none; display: block;}
  22. br, strong br, b br, em br, i br { line-height:100%; }
  23. h1, h2, h3, h4, h5, h6 { line-height: 100% !important; -webkit-font-smoothing: antialiased; }
  24. h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { color: blue !important; }
  25. h1 a:active, h2 a:active,  h3 a:active, h4 a:active, h5 a:active, h6 a:active { color: red !important; }
  26. /* Preferably not the same color as the normal header link color.  There is limited support for psuedo classes in email clients, this was added just for good measure. */
  27. h1 a:visited, h2 a:visited,  h3 a:visited, h4 a:visited, h5 a:visited, h6 a:visited { color: purple !important; }
  28. /* Preferably not the same color as the normal header link color. There is limited support for psuedo classes in email clients, this was added just for good measure. */
  29. table td, table tr { border-collapse: collapse; }
  30. .yshortcuts, .yshortcuts a, .yshortcuts a:link,.yshortcuts a:visited, .yshortcuts a:hover, .yshortcuts a span {
  31. color: black; text-decoration: none !important; border-bottom: none !important; background: none !important;
  32. }       /* Body text color for the New Yahoo.  This example sets the font of Yahoo's Shortcuts to black. */
  33. /* This most probably won't work in all email clients. Don't include <code _tmplitem='269' > blocks in email. */
  34. code {
  35. white-space: normal;
  36. word-break: break-all;
  37. }
  38. #background-table { background-color: #dedede; }
  39. /* Webkit Elements */
  40. #top-bar { border-radius:6px 6px 0px 0px; -moz-border-radius: 6px 6px 0px 0px; -webkit-border-radius:6px 6px 0px 0px; -webkit-font-smoothing: antialiased; background-color: #c7c7c7; color: #ededed; }
  41. #top-bar a { font-weight: bold; color: #ffffff; text-decoration: none;}
  42. #footer { border-radius:0px 0px 6px 6px; -moz-border-radius: 0px 0px 6px 6px; -webkit-border-radius:0px 0px 6px 6px; -webkit-font-smoothing: antialiased; }
  43. /* Fonts and Content */
  44. body, td { font-family: 'Helvetica Neue', Arial, Helvetica, Geneva, sans-serif; }
  45. .header-content, .footer-content-left, .footer-content-right { -webkit-text-size-adjust: none; -ms-text-size-adjust: none; }
  46. /* Prevent Webkit and Windows Mobile platforms from changing default font sizes on header and footer. */
  47. .header-content { font-size: 12px; color: #ededed; }
  48. .header-content a { font-weight: bold; color: #ffffff; text-decoration: none; }
  49. #headline p { color: #444444; font-family: 'Helvetica Neue', Arial, Helvetica, Geneva, sans-serif; font-size: 36px; text-align: center; margin-top:0px; margin-bottom:30px; }
  50. #headline p a { color: #444444; text-decoration: none; }
  51. .article-title { font-size: 18px; line-height:24px; color: #b0b0b0; font-weight:bold; margin-top:0px; margin-bottom:18px; font-family: 'Helvetica Neue', Arial, Helvetica, Geneva, sans-serif; }
  52.  
  53. .footer-content-left { font-size: 12px; line-height: 15px; color: #ededed; margin-top: 0px; margin-bottom: 15px; }
  54. .footer-content-left a { color: #ffffff; font-weight: bold; text-decoration: none; }
  55. .footer-content-right { font-size: 11px; line-height: 16px; color: #ededed; margin-top: 0px; margin-bottom: 15px; }
  56. .footer-content-right a { color: #ffffff; font-weight: bold; text-decoration: none; }
  57. #footer { background-color: #c7c7c7; color: #ededed; }
  58. #footer a { color: #ffffff; text-decoration: none; font-weight: bold; }
  59.  
  60. #products-table{
  61.  width:100%;
  62.  border-collapse:collapse;
  63.  padding-bottom:1px;
  64.  border-bottom:1px solid #606060;
  65.  }
  66.  #products-table th{
  67.  text-align:right;
  68.  border-bottom:2px solid #606060!important;
  69.  }
  70.  #products-table td{
  71.  text-align:right;
  72.  border-bottom:1px solid #606060;
  73.  padding:0 3px;
  74.  }
  75.  #products-table .product_name{
  76.  text-align:left;
  77.  }</style>
  78. <!--[if gte mso 9]>
  79. <style _tmplitem='269' >
  80. .article-content ol, .article-content ul {
  81. margin: 0 0 0 24px;
  82. padding: 0;
  83. list-style-position: inside;
  84. }
  85. </style>
  86. <![endif]--></head><body><table id='background-table' border='0' cellpadding='0' cellspacing='0' width='100%'>
  87. <tbody><tr>
  88. <td align='center' bgcolor='#dedede'>
  89. <table class='w640' style='margin:0 10px;' border='0' cellpadding='0' cellspacing='0' width='640'>
  90. <tbody><tr><td class='w640' height='20' width='640'></td></tr>
  91.  
  92. <tr>
  93. <td class='w640' width='640'>
  94.  
  95. <table id='top-bar' class='w640' bgcolor='#ffffff' border='0' cellpadding='0' cellspacing='0' width='640'>
  96. <tbody><tr>
  97. <td class='w15' width='15'></td>
  98. <td align='left' valign='middle'>
  99. <br>
  100.  
  101. <!--- HERE COMES THE HEADER -->
  102. <p>
  103. <a href='http://yourdomain.com'><img src="http://yourdomain.com/wp-content/uploads/2012/11/logo.png" alt="YOUR SITE"></a>
  104. </p>
  105. <!--- HERE WAS THE HEADER -->
  106.  
  107. <br>
  108. </td>
  109. <td class='w15' width='15'></td>
  110. </tr>
  111. </tbody></table>
  112.  
  113. </td>
  114. </tr>
  115.  
  116. <tr><td class='w640' bgcolor='#ffffff' width='640'>
  117. <table class='w640' border='0' cellpadding='0' cellspacing='0' width='640'>
  118. <tbody><tr>
  119. <td class='w30' width='30'></td>
  120. <td class='w580' width='580'>
  121. <br>
  122. <!--- HERE COMES THE CONTENT -->
  123. {#mailcontent#}
  124. <!--- HERE WAS THE CONTENT -->
  125. </td>
  126. <td class='w30' width='30'></td>
  127. </tr>
  128. </tbody></table>
  129. </td></tr>
  130. <tr><td class='w640' height='15' bgcolor='#ffffff' width='640'></td></tr>
  131.  
  132. <tr>
  133. <td class='w640' width='640'>
  134. <table id='footer' class='w640' bgcolor='#c7c7c7' border='0' cellpadding='0' cellspacing='0' width='640'>
  135. <tbody>
  136. <tr>
  137. <td class='w30' width='30'></td>
  138. <td class='w580' valign='top' width='360'>
  139. <span class='hide'><p id='permission-reminder' class='footer-content-left' align='left'></p></span>
  140. <p class='footer-content-left' align='left'>YOUR SITE<br/><a href="mailto:web@yourdomain.com">web@yourdomain.com</a></p>
  141. </td>
  142. <td class='hide w0' width='60'></td>
  143. <td class='hide w0' valign='top' width='160'>
  144. <p id='street-address' class='footer-content-right' align='right'></p>
  145. </td>
  146. <td class='w30' width='30'></td>
  147. </tr>
  148. <tr><td class='w30' width='30'></td><td class='w580 h0' height='15' width='360'></td><td class='w0' width='60'></td><td class='w0' width='160'></td><td class='w30' width='30'></td></tr>
  149. </tbody></table>
  150. </td>
  151. </tr>
  152. <tr><td class='w640' height='60' width='640'></td></tr>
  153. </tbody></table>
  154. </td>
  155. </tr>
  156. </tbody></table></body></html>