API tools faq
paste
Advertisement
haet

Email template for WP E-Commerce Shop Styling

haet
Dec 4th, 2012
282
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 7.40 KB | None | 0 0
raw download clone embed print report
  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>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!