├── .gitignore
├── README.md
├── modular-template-patterns
└── modular-template-patterns.html
├── responsive-templates
├── base_boxed_2column_query.html
├── base_boxed_3column_query.html
├── base_boxed_basic_2column_query.html
├── base_boxed_basic_body_image_query.html
├── base_boxed_basic_query.html
└── base_boxed_body_image_2column_query.html
└── templates
├── 2col-1-2-leftsidebar.html
├── 2col-1-2-rightsidebar.html
├── 2col-1-2.html
├── 2col-2-1.html
├── 2col-basic2column.html
├── 3col-1-3-asym.html
├── 3col-1-3-leftsidebar.html
├── 3col-1-3-rightsidebar.html
├── 3col-1-3.html
├── 3col-3-1-asym.html
├── 3col-3-1.html
├── 3col-basic3column-asym.html
├── 3col-basic3column.html
├── fancy-1-2-3.html
├── fancy-1-3-2.html
├── fancy-1-50-25-25.html
├── fancy-2-1-3-leftsidebar.html
├── fancy-2-1-3-rightsidebar.html
├── fancy-50-25-25-1.html
├── fancy-50-25-25.html
├── fancy-variablelayout.html
├── gallery-1-4-1.html
├── gallery-1-4-2.html
├── gallery-1-4.html
├── gallery-4-1.html
├── gallery-basicgallery.html
├── mobile-basicmobile.html
├── mobile-postcardmobile.html
├── simple-basic.html
├── simple-leftsidebar.html
├── simple-letterhead-centerlogo.html
├── simple-letterhead-leftlogo.html
├── simple-letterhead-rightlogo.html
├── simple-postcard.html
├── simple-rightsidebar.html
├── transactional_basic.html
└── transactional_tabular.html
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | Email Blueprints
2 | ================
3 |
4 | [Brought to you by MailChimp](http://www.mailchimp.com/), these email blueprints are licensed under a [Creative Commons Attribution-ShareAlike 3.0 Unported License](http://creativecommons.org/licenses/by-sa/3.0/).
5 |
6 | Email Blueprints is a collection of HTML email templates that can serve as a solid foundation and starting point for the design of emails. They include template language elements that make them customizable when imported into a MailChimp account, as well as merge tags that will generate dynamic content when sent through MailChimp. Not a MailChimp user? You can [sign up free](http://www.mailchimp.com/signup) or simply strip out merge tags and use these templates to send through any system.
7 |
8 | For clarification on the coding practices shown in these emails, or for general HTML email knowledge, visit MailChimp's [HTML Email Reference](http://templates.mailchimp.com).
9 |
10 | Contents
11 | --------
12 |
13 | **/modular-template-patterns** contains a single template built out of modular blocks of common design patterns.
14 |
15 | **/responsive-templates** contains a collection of responsive / mobile-friendly email templates with various layouts.
16 |
17 | **/templates** contains a collection of fixed-width email templates with various layouts.
18 |
19 | Responsive Templates & CSS Inlining
20 | -----------------------------------
21 |
22 | When inlining the CSS in the responsive templates, be sure **not** to include the styles within the media query; they should remain in the head element of the email. The MailChimp app and [external CSS inliner](http://beaker.mailchimp.com/inline-css) both inline the CSS correctly, but many services may not.
23 |
24 | 
25 |
--------------------------------------------------------------------------------
/responsive-templates/base_boxed_basic_body_image_query.html:
--------------------------------------------------------------------------------
1 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 | <html xmlns="http://www.w3.org/1999/xhtml">
3 | <head>
4 | <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
5 | <title>*|MC:SUBJECT|*</title>
6 | <style type="text/css">
7 | /* /\/\/\/\/\/\/\/\/ CLIENT-SPECIFIC STYLES /\/\/\/\/\/\/\/\/ */
8 | #outlook a{padding:0;} /* Force Outlook to provide a "view in browser" message */
9 | .ReadMsgBody{width:100%;} .ExternalClass{width:100%;} /* Force Hotmail to display emails at full width */
10 | .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;} /* Force Hotmail to display normal line spacing */
11 | body, table, td, p, a, li, blockquote{-webkit-text-size-adjust:100%; -ms-text-size-adjust:100%;} /* Prevent WebKit and Windows mobile changing default text sizes */
12 | table, td{mso-table-lspace:0pt; mso-table-rspace:0pt;} /* Remove spacing between tables in Outlook 2007 and up */
13 | img{-ms-interpolation-mode:bicubic;} /* Allow smoother rendering of resized image in Internet Explorer */
14 |
15 | /* /\/\/\/\/\/\/\/\/ RESET STYLES /\/\/\/\/\/\/\/\/ */
16 | body{margin:0; padding:0;}
17 | img{border:0; height:auto; line-height:100%; outline:none; text-decoration:none;}
18 | table{border-collapse:collapse !important;}
19 | body, #bodyTable, #bodyCell{height:100% !important; margin:0; padding:0; width:100% !important;}
20 |
21 | /* /\/\/\/\/\/\/\/\/ TEMPLATE STYLES /\/\/\/\/\/\/\/\/ */
22 |
23 | #bodyCell{padding:20px;}
24 | #templateContainer{width:600px;}
25 |
26 | /* ========== Page Styles ========== */
27 |
28 | /**
29 | * @tab Page
30 | * @section background style
31 | * @tip Set the background color and top border for your email. You may want to choose colors that match your company's branding.
32 | * @theme page
33 | */
34 | body, #bodyTable{
35 | /*@editable*/ background-color:#DEE0E2;
36 | }
37 |
38 | /**
39 | * @tab Page
40 | * @section background style
41 | * @tip Set the background color and top border for your email. You may want to choose colors that match your company's branding.
42 | * @theme page
43 | */
44 | #bodyCell{
45 | /*@editable*/ border-top:4px solid #BBBBBB;
46 | }
47 |
48 | /**
49 | * @tab Page
50 | * @section email border
51 | * @tip Set the border for your email.
52 | */
53 | #templateContainer{
54 | /*@editable*/ border:1px solid #BBBBBB;
55 | }
56 |
57 | /**
58 | * @tab Page
59 | * @section heading 1
60 | * @tip Set the styling for all first-level headings in your emails. These should be the largest of your headings.
61 | * @style heading 1
62 | */
63 | h1{
64 | /*@editable*/ color:#202020 !important;
65 | display:block;
66 | /*@editable*/ font-family:Helvetica;
67 | /*@editable*/ font-size:26px;
68 | /*@editable*/ font-style:normal;
69 | /*@editable*/ font-weight:bold;
70 | /*@editable*/ line-height:100%;
71 | /*@editable*/ letter-spacing:normal;
72 | margin-top:0;
73 | margin-right:0;
74 | margin-bottom:10px;
75 | margin-left:0;
76 | /*@editable*/ text-align:left;
77 | }
78 |
79 | /**
80 | * @tab Page
81 | * @section heading 2
82 | * @tip Set the styling for all second-level headings in your emails.
83 | * @style heading 2
84 | */
85 | h2{
86 | /*@editable*/ color:#404040 !important;
87 | display:block;
88 | /*@editable*/ font-family:Helvetica;
89 | /*@editable*/ font-size:20px;
90 | /*@editable*/ font-style:normal;
91 | /*@editable*/ font-weight:bold;
92 | /*@editable*/ line-height:100%;
93 | /*@editable*/ letter-spacing:normal;
94 | margin-top:0;
95 | margin-right:0;
96 | margin-bottom:10px;
97 | margin-left:0;
98 | /*@editable*/ text-align:left;
99 | }
100 |
101 | /**
102 | * @tab Page
103 | * @section heading 3
104 | * @tip Set the styling for all third-level headings in your emails.
105 | * @style heading 3
106 | */
107 | h3{
108 | /*@editable*/ color:#606060 !important;
109 | display:block;
110 | /*@editable*/ font-family:Helvetica;
111 | /*@editable*/ font-size:16px;
112 | /*@editable*/ font-style:italic;
113 | /*@editable*/ font-weight:normal;
114 | /*@editable*/ line-height:100%;
115 | /*@editable*/ letter-spacing:normal;
116 | margin-top:0;
117 | margin-right:0;
118 | margin-bottom:10px;
119 | margin-left:0;
120 | /*@editable*/ text-align:left;
121 | }
122 |
123 | /**
124 | * @tab Page
125 | * @section heading 4
126 | * @tip Set the styling for all fourth-level headings in your emails. These should be the smallest of your headings.
127 | * @style heading 4
128 | */
129 | h4{
130 | /*@editable*/ color:#808080 !important;
131 | display:block;
132 | /*@editable*/ font-family:Helvetica;
133 | /*@editable*/ font-size:14px;
134 | /*@editable*/ font-style:italic;
135 | /*@editable*/ font-weight:normal;
136 | /*@editable*/ line-height:100%;
137 | /*@editable*/ letter-spacing:normal;
138 | margin-top:0;
139 | margin-right:0;
140 | margin-bottom:10px;
141 | margin-left:0;
142 | /*@editable*/ text-align:left;
143 | }
144 |
145 | /* ========== Header Styles ========== */
146 |
147 | /**
148 | * @tab Header
149 | * @section preheader style
150 | * @tip Set the background color and bottom border for your email's preheader area.
151 | * @theme header
152 | */
153 | #templatePreheader{
154 | /*@editable*/ background-color:#F4F4F4;
155 | /*@editable*/ border-bottom:1px solid #CCCCCC;
156 | }
157 |
158 | /**
159 | * @tab Header
160 | * @section preheader text
161 | * @tip Set the styling for your email's preheader text. Choose a size and color that is easy to read.
162 | */
163 | .preheaderContent{
164 | /*@editable*/ color:#808080;
165 | /*@editable*/ font-family:Helvetica;
166 | /*@editable*/ font-size:10px;
167 | /*@editable*/ line-height:125%;
168 | /*@editable*/ text-align:left;
169 | }
170 |
171 | /**
172 | * @tab Header
173 | * @section preheader link
174 | * @tip Set the styling for your email's preheader links. Choose a color that helps them stand out from your text.
175 | */
176 | .preheaderContent a:link, .preheaderContent a:visited, /* Yahoo! Mail Override */ .preheaderContent a .yshortcuts /* Yahoo! Mail Override */{
177 | /*@editable*/ color:#606060;
178 | /*@editable*/ font-weight:normal;
179 | /*@editable*/ text-decoration:underline;
180 | }
181 |
182 | /**
183 | * @tab Header
184 | * @section header style
185 | * @tip Set the background color and borders for your email's header area.
186 | * @theme header
187 | */
188 | #templateHeader{
189 | /*@editable*/ background-color:#F4F4F4;
190 | /*@editable*/ border-top:1px solid #FFFFFF;
191 | /*@editable*/ border-bottom:1px solid #CCCCCC;
192 | }
193 |
194 | /**
195 | * @tab Header
196 | * @section header text
197 | * @tip Set the styling for your email's header text. Choose a size and color that is easy to read.
198 | */
199 | .headerContent{
200 | /*@editable*/ color:#505050;
201 | /*@editable*/ font-family:Helvetica;
202 | /*@editable*/ font-size:20px;
203 | /*@editable*/ font-weight:bold;
204 | /*@editable*/ line-height:100%;
205 | /*@editable*/ padding-top:0;
206 | /*@editable*/ padding-right:0;
207 | /*@editable*/ padding-bottom:0;
208 | /*@editable*/ padding-left:0;
209 | /*@editable*/ text-align:left;
210 | /*@editable*/ vertical-align:middle;
211 | }
212 |
213 | /**
214 | * @tab Header
215 | * @section header link
216 | * @tip Set the styling for your email's header links. Choose a color that helps them stand out from your text.
217 | */
218 | .headerContent a:link, .headerContent a:visited, /* Yahoo! Mail Override */ .headerContent a .yshortcuts /* Yahoo! Mail Override */{
219 | /*@editable*/ color:#EB4102;
220 | /*@editable*/ font-weight:normal;
221 | /*@editable*/ text-decoration:underline;
222 | }
223 |
224 | #headerImage{
225 | height:auto;
226 | max-width:600px;
227 | }
228 |
229 | /* ========== Body Styles ========== */
230 |
231 | /**
232 | * @tab Body
233 | * @section body style
234 | * @tip Set the background color and borders for your email's body area.
235 | */
236 | #templateBody{
237 | /*@editable*/ background-color:#F4F4F4;
238 | /*@editable*/ border-top:1px solid #FFFFFF;
239 | /*@editable*/ border-bottom:1px solid #CCCCCC;
240 | }
241 |
242 | /**
243 | * @tab Body
244 | * @section body text
245 | * @tip Set the styling for your email's main content text. Choose a size and color that is easy to read.
246 | * @theme main
247 | */
248 | .bodyContent{
249 | /*@editable*/ color:#505050;
250 | /*@editable*/ font-family:Helvetica;
251 | /*@editable*/ font-size:14px;
252 | /*@editable*/ line-height:150%;
253 | padding-top:20px;
254 | padding-right:20px;
255 | padding-bottom:20px;
256 | padding-left:20px;
257 | /*@editable*/ text-align:left;
258 | }
259 |
260 | /**
261 | * @tab Body
262 | * @section body link
263 | * @tip Set the styling for your email's main content links. Choose a color that helps them stand out from your text.
264 | */
265 | .bodyContent a:link, .bodyContent a:visited, /* Yahoo! Mail Override */ .bodyContent a .yshortcuts /* Yahoo! Mail Override */{
266 | /*@editable*/ color:#EB4102;
267 | /*@editable*/ font-weight:normal;
268 | /*@editable*/ text-decoration:underline;
269 | }
270 |
271 | .bodyContent img{
272 | display:inline;
273 | height:auto;
274 | max-width:560px;
275 | }
276 |
277 | /* ========== Footer Styles ========== */
278 |
279 | /**
280 | * @tab Footer
281 | * @section footer style
282 | * @tip Set the background color and borders for your email's footer area.
283 | * @theme footer
284 | */
285 | #templateFooter{
286 | /*@editable*/ background-color:#F4F4F4;
287 | /*@editable*/ border-top:1px solid #FFFFFF;
288 | }
289 |
290 | /**
291 | * @tab Footer
292 | * @section footer text
293 | * @tip Set the styling for your email's footer text. Choose a size and color that is easy to read.
294 | * @theme footer
295 | */
296 | .footerContent{
297 | /*@editable*/ color:#808080;
298 | /*@editable*/ font-family:Helvetica;
299 | /*@editable*/ font-size:10px;
300 | /*@editable*/ line-height:150%;
301 | padding-top:20px;
302 | padding-right:20px;
303 | padding-bottom:20px;
304 | padding-left:20px;
305 | /*@editable*/ text-align:left;
306 | }
307 |
308 | /**
309 | * @tab Footer
310 | * @section footer link
311 | * @tip Set the styling for your email's footer links. Choose a color that helps them stand out from your text.
312 | */
313 | .footerContent a:link, .footerContent a:visited, /* Yahoo! Mail Override */ .footerContent a .yshortcuts, .footerContent a span /* Yahoo! Mail Override */{
314 | /*@editable*/ color:#606060;
315 | /*@editable*/ font-weight:normal;
316 | /*@editable*/ text-decoration:underline;
317 | }
318 |
319 | /* /\/\/\/\/\/\/\/\/ MOBILE STYLES /\/\/\/\/\/\/\/\/ */
320 |
321 | @media only screen and (max-width: 480px){
322 | /* /\/\/\/\/\/\/ CLIENT-SPECIFIC MOBILE STYLES /\/\/\/\/\/\/ */
323 | body, table, td, p, a, li, blockquote{-webkit-text-size-adjust:none !important;} /* Prevent Webkit platforms from changing default text sizes */
324 | body{width:100% !important; min-width:100% !important;} /* Prevent iOS Mail from adding padding to the body */
325 |
326 | /* /\/\/\/\/\/\/ MOBILE RESET STYLES /\/\/\/\/\/\/ */
327 | #bodyCell{padding:10px !important;}
328 |
329 | /* /\/\/\/\/\/\/ MOBILE TEMPLATE STYLES /\/\/\/\/\/\/ */
330 |
331 | /* ======== Page Styles ======== */
332 |
333 | /**
334 | * @tab Mobile Styles
335 | * @section template width
336 | * @tip Make the template fluid for portrait or landscape view adaptability. If a fluid layout doesn't work for you, set the width to 300px instead.
337 | */
338 | #templateContainer{
339 | max-width:600px !important;
340 | /*@editable*/ width:100% !important;
341 | }
342 |
343 | /**
344 | * @tab Mobile Styles
345 | * @section heading 1
346 | * @tip Make the first-level headings larger in size for better readability on small screens.
347 | */
348 | h1{
349 | /*@editable*/ font-size:24px !important;
350 | /*@editable*/ line-height:100% !important;
351 | }
352 |
353 | /**
354 | * @tab Mobile Styles
355 | * @section heading 2
356 | * @tip Make the second-level headings larger in size for better readability on small screens.
357 | */
358 | h2{
359 | /*@editable*/ font-size:20px !important;
360 | /*@editable*/ line-height:100% !important;
361 | }
362 |
363 | /**
364 | * @tab Mobile Styles
365 | * @section heading 3
366 | * @tip Make the third-level headings larger in size for better readability on small screens.
367 | */
368 | h3{
369 | /*@editable*/ font-size:18px !important;
370 | /*@editable*/ line-height:100% !important;
371 | }
372 |
373 | /**
374 | * @tab Mobile Styles
375 | * @section heading 4
376 | * @tip Make the fourth-level headings larger in size for better readability on small screens.
377 | */
378 | h4{
379 | /*@editable*/ font-size:16px !important;
380 | /*@editable*/ line-height:100% !important;
381 | }
382 |
383 | /* ======== Header Styles ======== */
384 |
385 | #templatePreheader{display:none !important;} /* Hide the template preheader to save space */
386 |
387 | /**
388 | * @tab Mobile Styles
389 | * @section header image
390 | * @tip Make the main header image fluid for portrait or landscape view adaptability, and set the image's original width as the max-width. If a fluid setting doesn't work, set the image width to half its original size instead.
391 | */
392 | #headerImage{
393 | height:auto !important;
394 | /*@editable*/ max-width:600px !important;
395 | /*@editable*/ width:100% !important;
396 | }
397 |
398 | /**
399 | * @tab Mobile Styles
400 | * @section header text
401 | * @tip Make the header content text larger in size for better readability on small screens. We recommend a font size of at least 16px.
402 | */
403 | .headerContent{
404 | /*@editable*/ font-size:20px !important;
405 | /*@editable*/ line-height:125% !important;
406 | }
407 |
408 | /* ======== Body Styles ======== */
409 |
410 | /**
411 | * @tab Mobile Styles
412 | * @section body image
413 | * @tip Make the main body image fluid for portrait or landscape view adaptability, and set the image's original width as the max-width. If a fluid setting doesn't work, set the image width to half its original size instead.
414 | */
415 | #bodyImage{
416 | height:auto !important;
417 | /*@editable*/ max-width:560px !important;
418 | /*@editable*/ width:100% !important;
419 | }
420 |
421 | /**
422 | * @tab Mobile Styles
423 | * @section body text
424 | * @tip Make the body content text larger in size for better readability on small screens. We recommend a font size of at least 16px.
425 | */
426 | .bodyContent{
427 | /*@editable*/ font-size:18px !important;
428 | /*@editable*/ line-height:125% !important;
429 | }
430 |
431 | /* ======== Footer Styles ======== */
432 |
433 | /**
434 | * @tab Mobile Styles
435 | * @section footer text
436 | * @tip Make the body content text larger in size for better readability on small screens.
437 | */
438 | .footerContent{
439 | /*@editable*/ font-size:14px !important;
440 | /*@editable*/ line-height:115% !important;
441 | }
442 |
443 | .footerContent a{display:block !important;} /* Place footer social and utility links on their own lines, for easier access */
444 | }
445 | </style>
446 | </head>
447 | <body leftmargin="0" marginwidth="0" topmargin="0" marginheight="0" offset="0">
448 | <center>
449 | <table align="center" border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" id="bodyTable">
450 | <tr>
451 | <td align="center" valign="top" id="bodyCell">
452 | <!-- BEGIN TEMPLATE // -->
453 | <table border="0" cellpadding="0" cellspacing="0" id="templateContainer">
454 | <tr>
455 | <td align="center" valign="top">
456 | <!-- BEGIN PREHEADER // -->
457 | <table border="0" cellpadding="0" cellspacing="0" width="100%" id="templatePreheader">
458 | <tr>
459 | <td valign="top" class="preheaderContent" style="padding-top:10px; padding-right:20px; padding-bottom:10px; padding-left:20px;" mc:edit="preheader_content00">
460 | Use this area to offer a short teaser of your email's content. Text here will show in the preview area of some email clients.
461 | </td>
462 | <!-- *|IFNOT:ARCHIVE_PAGE|* -->
463 | <td valign="top" width="180" class="preheaderContent" style="padding-top:10px; padding-right:20px; padding-bottom:10px; padding-left:0;" mc:edit="preheader_content01">
464 | Email not displaying correctly?<br /><a href="*|ARCHIVE|*" target="_blank">View it in your browser</a>.
465 | </td>
466 | <!-- *|END:IF|* -->
467 | </tr>
468 | </table>
469 | <!-- // END PREHEADER -->
470 | </td>
471 | </tr>
472 | <tr>
473 | <td align="center" valign="top">
474 | <!-- BEGIN HEADER // -->
475 | <table border="0" cellpadding="0" cellspacing="0" width="100%" id="templateHeader">
476 | <tr>
477 | <td valign="top" class="headerContent">
478 | <img src="http://gallery.mailchimp.com/2425ea8ad3/images/header_placeholder_600px.png" style="max-width:600px;" id="headerImage" mc:label="header_image" mc:edit="header_image" mc:allowdesigner mc:allowtext />
479 | </td>
480 | </tr>
481 | </table>
482 | <!-- // END HEADER -->
483 | </td>
484 | </tr>
485 | <tr>
486 | <td align="center" valign="top">
487 | <!-- BEGIN BODY // -->
488 | <table border="0" cellpadding="0" cellspacing="0" width="100%" id="templateBody">
489 | <tr>
490 | <td valign="top" class="bodyContent" mc:edit="body_content00">
491 | <h1>Designing Your Template</h1>
492 | <h3>Creating a good-looking email is simple</h3>
493 | Customize your template by clicking on the style editor tabs up above. Set your fonts, colors, and styles. After setting your styling is all done you can click here in this area, delete the text, and start adding your own awesome content.
494 | </td>
495 | </tr>
496 | <tr>
497 | <td class="bodyContent" style="padding-top:0; padding-bottom:0;">
498 | <img src="http://gallery.mailchimp.com/27aac8a65e64c994c4416d6b8/images/body_placeholder_650px.png" style="max-width:560px;" id="bodyImage" mc:label="body_image" mc:edit="body_image" mc:allowtext />
499 | </td>
500 | </tr>
501 | <tr>
502 | <td valign="top" class="bodyContent" mc:edit="body_content01">
503 | <h2>Styling Your Content</h2>
504 | <h4>Make your email easy to read</h4>
505 | After you enter your content, highlight the text you want to style and select the options you set in the style editor in the "<em>styles</em>" drop down box. Want to <a href="http://www.mailchimp.com/kb/article/im-using-the-style-designer-and-i-cant-get-my-formatting-to-change" target="_blank">get rid of styling on a bit of text</a>, but having trouble doing it? Just use the "<em>remove formatting</em>" button to strip the text of any formatting and reset your style.
506 | </td>
507 | </tr>
508 | </table>
509 | <!-- // END BODY -->
510 | </td>
511 | </tr>
512 | <tr>
513 | <td align="center" valign="top">
514 | <!-- BEGIN FOOTER // -->
515 | <table border="0" cellpadding="0" cellspacing="0" width="100%" id="templateFooter">
516 | <tr>
517 | <td valign="top" class="footerContent" mc:edit="footer_content00">
518 | <a href="*|TWITTER:PROFILEURL|*">Follow on Twitter</a> <a href="*|FACEBOOK:PROFILEURL|*">Friend on Facebook</a> <a href="*|FORWARD|*">Forward to Friend</a>
519 | </td>
520 | </tr>
521 | <tr>
522 | <td valign="top" class="footerContent" style="padding-top:0;" mc:edit="footer_content01">
523 | <em>Copyright © *|CURRENT_YEAR|* *|LIST:COMPANY|*, All rights reserved.</em>
524 | <br />
525 | *|IFNOT:ARCHIVE_PAGE|* *|LIST:DESCRIPTION|*
526 | <br />
527 | <br />
528 | <strong>Our mailing address is:</strong>
529 | <br />
530 | *|HTML:LIST_ADDRESS_HTML|* *|END:IF|*
531 | </td>
532 | </tr>
533 | <tr>
534 | <td valign="top" class="footerContent" style="padding-top:0;" mc:edit="footer_content02">
535 | <a href="*|UNSUB|*">unsubscribe from this list</a> <a href="*|UPDATE_PROFILE|*">update subscription preferences</a>
536 | </td>
537 | </tr>
538 | </table>
539 | <!-- // END FOOTER -->
540 | </td>
541 | </tr>
542 | </table>
543 | <!-- // END TEMPLATE -->
544 | </td>
545 | </tr>
546 | </table>
547 | </center>
548 | </body>
549 | </html>
--------------------------------------------------------------------------------
/responsive-templates/base_boxed_basic_query.html:
--------------------------------------------------------------------------------
1 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 | <html xmlns="http://www.w3.org/1999/xhtml">
3 | <head>
4 | <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
5 | <title>*|MC:SUBJECT|*</title>
6 | <style type="text/css">
7 | /* /\/\/\/\/\/\/\/\/ CLIENT-SPECIFIC STYLES /\/\/\/\/\/\/\/\/ */
8 | #outlook a{padding:0;} /* Force Outlook to provide a "view in browser" message */
9 | .ReadMsgBody{width:100%;} .ExternalClass{width:100%;} /* Force Hotmail to display emails at full width */
10 | .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;} /* Force Hotmail to display normal line spacing */
11 | body, table, td, p, a, li, blockquote{-webkit-text-size-adjust:100%; -ms-text-size-adjust:100%;} /* Prevent WebKit and Windows mobile changing default text sizes */
12 | table, td{mso-table-lspace:0pt; mso-table-rspace:0pt;} /* Remove spacing between tables in Outlook 2007 and up */
13 | img{-ms-interpolation-mode:bicubic;} /* Allow smoother rendering of resized image in Internet Explorer */
14 |
15 | /* /\/\/\/\/\/\/\/\/ RESET STYLES /\/\/\/\/\/\/\/\/ */
16 | body{margin:0; padding:0;}
17 | img{border:0; height:auto; line-height:100%; outline:none; text-decoration:none;}
18 | table{border-collapse:collapse !important;}
19 | body, #bodyTable, #bodyCell{height:100% !important; margin:0; padding:0; width:100% !important;}
20 |
21 | /* /\/\/\/\/\/\/\/\/ TEMPLATE STYLES /\/\/\/\/\/\/\/\/ */
22 |
23 | /* ========== Page Styles ========== */
24 |
25 | #bodyCell{padding:20px;}
26 | #templateContainer{width:600px;}
27 |
28 | /**
29 | * @tab Page
30 | * @section background style
31 | * @tip Set the background color and top border for your email. You may want to choose colors that match your company's branding.
32 | * @theme page
33 | */
34 | body, #bodyTable{
35 | /*@editable*/ background-color:#DEE0E2;
36 | }
37 |
38 | /**
39 | * @tab Page
40 | * @section background style
41 | * @tip Set the background color and top border for your email. You may want to choose colors that match your company's branding.
42 | * @theme page
43 | */
44 | #bodyCell{
45 | /*@editable*/ border-top:4px solid #BBBBBB;
46 | }
47 |
48 | /**
49 | * @tab Page
50 | * @section email border
51 | * @tip Set the border for your email.
52 | */
53 | #templateContainer{
54 | /*@editable*/ border:1px solid #BBBBBB;
55 | }
56 |
57 | /**
58 | * @tab Page
59 | * @section heading 1
60 | * @tip Set the styling for all first-level headings in your emails. These should be the largest of your headings.
61 | * @style heading 1
62 | */
63 | h1{
64 | /*@editable*/ color:#202020 !important;
65 | display:block;
66 | /*@editable*/ font-family:Helvetica;
67 | /*@editable*/ font-size:26px;
68 | /*@editable*/ font-style:normal;
69 | /*@editable*/ font-weight:bold;
70 | /*@editable*/ line-height:100%;
71 | /*@editable*/ letter-spacing:normal;
72 | margin-top:0;
73 | margin-right:0;
74 | margin-bottom:10px;
75 | margin-left:0;
76 | /*@editable*/ text-align:left;
77 | }
78 |
79 | /**
80 | * @tab Page
81 | * @section heading 2
82 | * @tip Set the styling for all second-level headings in your emails.
83 | * @style heading 2
84 | */
85 | h2{
86 | /*@editable*/ color:#404040 !important;
87 | display:block;
88 | /*@editable*/ font-family:Helvetica;
89 | /*@editable*/ font-size:20px;
90 | /*@editable*/ font-style:normal;
91 | /*@editable*/ font-weight:bold;
92 | /*@editable*/ line-height:100%;
93 | /*@editable*/ letter-spacing:normal;
94 | margin-top:0;
95 | margin-right:0;
96 | margin-bottom:10px;
97 | margin-left:0;
98 | /*@editable*/ text-align:left;
99 | }
100 |
101 | /**
102 | * @tab Page
103 | * @section heading 3
104 | * @tip Set the styling for all third-level headings in your emails.
105 | * @style heading 3
106 | */
107 | h3{
108 | /*@editable*/ color:#606060 !important;
109 | display:block;
110 | /*@editable*/ font-family:Helvetica;
111 | /*@editable*/ font-size:16px;
112 | /*@editable*/ font-style:italic;
113 | /*@editable*/ font-weight:normal;
114 | /*@editable*/ line-height:100%;
115 | /*@editable*/ letter-spacing:normal;
116 | margin-top:0;
117 | margin-right:0;
118 | margin-bottom:10px;
119 | margin-left:0;
120 | /*@editable*/ text-align:left;
121 | }
122 |
123 | /**
124 | * @tab Page
125 | * @section heading 4
126 | * @tip Set the styling for all fourth-level headings in your emails. These should be the smallest of your headings.
127 | * @style heading 4
128 | */
129 | h4{
130 | /*@editable*/ color:#808080 !important;
131 | display:block;
132 | /*@editable*/ font-family:Helvetica;
133 | /*@editable*/ font-size:14px;
134 | /*@editable*/ font-style:italic;
135 | /*@editable*/ font-weight:normal;
136 | /*@editable*/ line-height:100%;
137 | /*@editable*/ letter-spacing:normal;
138 | margin-top:0;
139 | margin-right:0;
140 | margin-bottom:10px;
141 | margin-left:0;
142 | /*@editable*/ text-align:left;
143 | }
144 |
145 | /* ========== Header Styles ========== */
146 |
147 | /**
148 | * @tab Header
149 | * @section preheader style
150 | * @tip Set the background color and bottom border for your email's preheader area.
151 | * @theme header
152 | */
153 | #templatePreheader{
154 | /*@editable*/ background-color:#F4F4F4;
155 | /*@editable*/ border-bottom:1px solid #CCCCCC;
156 | }
157 |
158 | /**
159 | * @tab Header
160 | * @section preheader text
161 | * @tip Set the styling for your email's preheader text. Choose a size and color that is easy to read.
162 | */
163 | .preheaderContent{
164 | /*@editable*/ color:#808080;
165 | /*@editable*/ font-family:Helvetica;
166 | /*@editable*/ font-size:10px;
167 | /*@editable*/ line-height:125%;
168 | /*@editable*/ text-align:left;
169 | }
170 |
171 | /**
172 | * @tab Header
173 | * @section preheader link
174 | * @tip Set the styling for your email's preheader links. Choose a color that helps them stand out from your text.
175 | */
176 | .preheaderContent a:link, .preheaderContent a:visited, /* Yahoo! Mail Override */ .preheaderContent a .yshortcuts /* Yahoo! Mail Override */{
177 | /*@editable*/ color:#606060;
178 | /*@editable*/ font-weight:normal;
179 | /*@editable*/ text-decoration:underline;
180 | }
181 |
182 | /**
183 | * @tab Header
184 | * @section header style
185 | * @tip Set the background color and borders for your email's header area.
186 | * @theme header
187 | */
188 | #templateHeader{
189 | /*@editable*/ background-color:#F4F4F4;
190 | /*@editable*/ border-top:1px solid #FFFFFF;
191 | /*@editable*/ border-bottom:1px solid #CCCCCC;
192 | }
193 |
194 | /**
195 | * @tab Header
196 | * @section header text
197 | * @tip Set the styling for your email's header text. Choose a size and color that is easy to read.
198 | */
199 | .headerContent{
200 | /*@editable*/ color:#505050;
201 | /*@editable*/ font-family:Helvetica;
202 | /*@editable*/ font-size:20px;
203 | /*@editable*/ font-weight:bold;
204 | /*@editable*/ line-height:100%;
205 | /*@editable*/ padding-top:0;
206 | /*@editable*/ padding-right:0;
207 | /*@editable*/ padding-bottom:0;
208 | /*@editable*/ padding-left:0;
209 | /*@editable*/ text-align:left;
210 | /*@editable*/ vertical-align:middle;
211 | }
212 |
213 | /**
214 | * @tab Header
215 | * @section header link
216 | * @tip Set the styling for your email's header links. Choose a color that helps them stand out from your text.
217 | */
218 | .headerContent a:link, .headerContent a:visited, /* Yahoo! Mail Override */ .headerContent a .yshortcuts /* Yahoo! Mail Override */{
219 | /*@editable*/ color:#EB4102;
220 | /*@editable*/ font-weight:normal;
221 | /*@editable*/ text-decoration:underline;
222 | }
223 |
224 | #headerImage{
225 | height:auto;
226 | max-width:600px;
227 | }
228 |
229 | /* ========== Body Styles ========== */
230 |
231 | /**
232 | * @tab Body
233 | * @section body style
234 | * @tip Set the background color and borders for your email's body area.
235 | */
236 | #templateBody{
237 | /*@editable*/ background-color:#F4F4F4;
238 | /*@editable*/ border-top:1px solid #FFFFFF;
239 | /*@editable*/ border-bottom:1px solid #CCCCCC;
240 | }
241 |
242 | /**
243 | * @tab Body
244 | * @section body text
245 | * @tip Set the styling for your email's main content text. Choose a size and color that is easy to read.
246 | * @theme main
247 | */
248 | .bodyContent{
249 | /*@editable*/ color:#505050;
250 | /*@editable*/ font-family:Helvetica;
251 | /*@editable*/ font-size:14px;
252 | /*@editable*/ line-height:150%;
253 | padding-top:20px;
254 | padding-right:20px;
255 | padding-bottom:20px;
256 | padding-left:20px;
257 | /*@editable*/ text-align:left;
258 | }
259 |
260 | /**
261 | * @tab Body
262 | * @section body link
263 | * @tip Set the styling for your email's main content links. Choose a color that helps them stand out from your text.
264 | */
265 | .bodyContent a:link, .bodyContent a:visited, /* Yahoo! Mail Override */ .bodyContent a .yshortcuts /* Yahoo! Mail Override */{
266 | /*@editable*/ color:#EB4102;
267 | /*@editable*/ font-weight:normal;
268 | /*@editable*/ text-decoration:underline;
269 | }
270 |
271 | .bodyContent img{
272 | display:inline;
273 | height:auto;
274 | max-width:560px;
275 | }
276 |
277 | /* ========== Footer Styles ========== */
278 |
279 | /**
280 | * @tab Footer
281 | * @section footer style
282 | * @tip Set the background color and borders for your email's footer area.
283 | * @theme footer
284 | */
285 | #templateFooter{
286 | /*@editable*/ background-color:#F4F4F4;
287 | /*@editable*/ border-top:1px solid #FFFFFF;
288 | }
289 |
290 | /**
291 | * @tab Footer
292 | * @section footer text
293 | * @tip Set the styling for your email's footer text. Choose a size and color that is easy to read.
294 | * @theme footer
295 | */
296 | .footerContent{
297 | /*@editable*/ color:#808080;
298 | /*@editable*/ font-family:Helvetica;
299 | /*@editable*/ font-size:10px;
300 | /*@editable*/ line-height:150%;
301 | padding-top:20px;
302 | padding-right:20px;
303 | padding-bottom:20px;
304 | padding-left:20px;
305 | /*@editable*/ text-align:left;
306 | }
307 |
308 | /**
309 | * @tab Footer
310 | * @section footer link
311 | * @tip Set the styling for your email's footer links. Choose a color that helps them stand out from your text.
312 | */
313 | .footerContent a:link, .footerContent a:visited, /* Yahoo! Mail Override */ .footerContent a .yshortcuts, .footerContent a span /* Yahoo! Mail Override */{
314 | /*@editable*/ color:#606060;
315 | /*@editable*/ font-weight:normal;
316 | /*@editable*/ text-decoration:underline;
317 | }
318 |
319 | /* /\/\/\/\/\/\/\/\/ MOBILE STYLES /\/\/\/\/\/\/\/\/ */
320 |
321 | @media only screen and (max-width: 480px){
322 | /* /\/\/\/\/\/\/ CLIENT-SPECIFIC MOBILE STYLES /\/\/\/\/\/\/ */
323 | body, table, td, p, a, li, blockquote{-webkit-text-size-adjust:none !important;} /* Prevent Webkit platforms from changing default text sizes */
324 | body{width:100% !important; min-width:100% !important;} /* Prevent iOS Mail from adding padding to the body */
325 |
326 | /* /\/\/\/\/\/\/ MOBILE RESET STYLES /\/\/\/\/\/\/ */
327 | #bodyCell{padding:10px !important;}
328 |
329 | /* /\/\/\/\/\/\/ MOBILE TEMPLATE STYLES /\/\/\/\/\/\/ */
330 |
331 | /* ======== Page Styles ======== */
332 |
333 | /**
334 | * @tab Mobile Styles
335 | * @section template width
336 | * @tip Make the template fluid for portrait or landscape view adaptability. If a fluid layout doesn't work for you, set the width to 300px instead.
337 | */
338 | #templateContainer{
339 | max-width:600px !important;
340 | /*@editable*/ width:100% !important;
341 | }
342 |
343 | /**
344 | * @tab Mobile Styles
345 | * @section heading 1
346 | * @tip Make the first-level headings larger in size for better readability on small screens.
347 | */
348 | h1{
349 | /*@editable*/ font-size:24px !important;
350 | /*@editable*/ line-height:100% !important;
351 | }
352 |
353 | /**
354 | * @tab Mobile Styles
355 | * @section heading 2
356 | * @tip Make the second-level headings larger in size for better readability on small screens.
357 | */
358 | h2{
359 | /*@editable*/ font-size:20px !important;
360 | /*@editable*/ line-height:100% !important;
361 | }
362 |
363 | /**
364 | * @tab Mobile Styles
365 | * @section heading 3
366 | * @tip Make the third-level headings larger in size for better readability on small screens.
367 | */
368 | h3{
369 | /*@editable*/ font-size:18px !important;
370 | /*@editable*/ line-height:100% !important;
371 | }
372 |
373 | /**
374 | * @tab Mobile Styles
375 | * @section heading 4
376 | * @tip Make the fourth-level headings larger in size for better readability on small screens.
377 | */
378 | h4{
379 | /*@editable*/ font-size:16px !important;
380 | /*@editable*/ line-height:100% !important;
381 | }
382 |
383 | /* ======== Header Styles ======== */
384 |
385 | #templatePreheader{display:none !important;} /* Hide the template preheader to save space */
386 |
387 | /**
388 | * @tab Mobile Styles
389 | * @section header image
390 | * @tip Make the main header image fluid for portrait or landscape view adaptability, and set the image's original width as the max-width. If a fluid setting doesn't work, set the image width to half its original size instead.
391 | */
392 | #headerImage{
393 | height:auto !important;
394 | /*@editable*/ max-width:600px !important;
395 | /*@editable*/ width:100% !important;
396 | }
397 |
398 | /**
399 | * @tab Mobile Styles
400 | * @section header text
401 | * @tip Make the header content text larger in size for better readability on small screens. We recommend a font size of at least 16px.
402 | */
403 | .headerContent{
404 | /*@editable*/ font-size:20px !important;
405 | /*@editable*/ line-height:125% !important;
406 | }
407 |
408 | /* ======== Body Styles ======== */
409 |
410 | /**
411 | * @tab Mobile Styles
412 | * @section body text
413 | * @tip Make the body content text larger in size for better readability on small screens. We recommend a font size of at least 16px.
414 | */
415 | .bodyContent{
416 | /*@editable*/ font-size:18px !important;
417 | /*@editable*/ line-height:125% !important;
418 | }
419 |
420 | /* ======== Footer Styles ======== */
421 |
422 | /**
423 | * @tab Mobile Styles
424 | * @section footer text
425 | * @tip Make the body content text larger in size for better readability on small screens.
426 | */
427 | .footerContent{
428 | /*@editable*/ font-size:14px !important;
429 | /*@editable*/ line-height:115% !important;
430 | }
431 |
432 | .footerContent a{display:block !important;} /* Place footer social and utility links on their own lines, for easier access */
433 | }
434 | </style>
435 | </head>
436 | <body leftmargin="0" marginwidth="0" topmargin="0" marginheight="0" offset="0">
437 | <center>
438 | <table align="center" border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" id="bodyTable">
439 | <tr>
440 | <td align="center" valign="top" id="bodyCell">
441 | <!-- BEGIN TEMPLATE // -->
442 | <table border="0" cellpadding="0" cellspacing="0" id="templateContainer">
443 | <tr>
444 | <td align="center" valign="top">
445 | <!-- BEGIN PREHEADER // -->
446 | <table border="0" cellpadding="0" cellspacing="0" width="100%" id="templatePreheader">
447 | <tr>
448 | <td valign="top" class="preheaderContent" style="padding-top:10px; padding-right:20px; padding-bottom:10px; padding-left:20px;" mc:edit="preheader_content00">
449 | Use this area to offer a short teaser of your email's content. Text here will show in the preview area of some email clients.
450 | </td>
451 | <!-- *|IFNOT:ARCHIVE_PAGE|* -->
452 | <td valign="top" width="180" class="preheaderContent" style="padding-top:10px; padding-right:20px; padding-bottom:10px; padding-left:0;" mc:edit="preheader_content01">
453 | Email not displaying correctly?<br /><a href="*|ARCHIVE|*" target="_blank">View it in your browser</a>.
454 | </td>
455 | <!-- *|END:IF|* -->
456 | </tr>
457 | </table>
458 | <!-- // END PREHEADER -->
459 | </td>
460 | </tr>
461 | <tr>
462 | <td align="center" valign="top">
463 | <!-- BEGIN HEADER // -->
464 | <table border="0" cellpadding="0" cellspacing="0" width="100%" id="templateHeader">
465 | <tr>
466 | <td valign="top" class="headerContent">
467 | <img src="http://gallery.mailchimp.com/2425ea8ad3/images/header_placeholder_600px.png" style="max-width:600px;" id="headerImage" mc:label="header_image" mc:edit="header_image" mc:allowdesigner mc:allowtext />
468 | </td>
469 | </tr>
470 | </table>
471 | <!-- // END HEADER -->
472 | </td>
473 | </tr>
474 | <tr>
475 | <td align="center" valign="top">
476 | <!-- BEGIN BODY // -->
477 | <table border="0" cellpadding="0" cellspacing="0" width="100%" id="templateBody">
478 | <tr>
479 | <td valign="top" class="bodyContent" mc:edit="body_content">
480 | <h1>Designing Your Template</h1>
481 | <h3>Creating a good-looking email is simple</h3>
482 | Customize your template by clicking on the style editor tabs above. Set your fonts, colors, and styles. After setting your styling is all done you can click here in this area, delete the text, and start adding your own awesome content.
483 | <br />
484 | <br />
485 | <h2>Styling Your Content</h2>
486 | <h4>Make your email easy to read</h4>
487 | After you enter your content, highlight the text you want to style and select the options you set in the style editor in the "<em>styles</em>" drop down box. Want to <a href="http://www.mailchimp.com/kb/article/im-using-the-style-designer-and-i-cant-get-my-formatting-to-change" target="_blank">get rid of styling on a bit of text</a>, but having trouble doing it? Just use the "<em>remove formatting</em>" button to strip the text of any formatting and reset your style.
488 | </td>
489 | </tr>
490 | </table>
491 | <!-- // END BODY -->
492 | </td>
493 | </tr>
494 | <tr>
495 | <td align="center" valign="top">
496 | <!-- BEGIN FOOTER // -->
497 | <table border="0" cellpadding="0" cellspacing="0" width="100%" id="templateFooter">
498 | <tr>
499 | <td valign="top" class="footerContent" mc:edit="footer_content00">
500 | <a href="*|TWITTER:PROFILEURL|*">Follow on Twitter</a> <a href="*|FACEBOOK:PROFILEURL|*">Friend on Facebook</a> <a href="*|FORWARD|*">Forward to Friend</a>
501 | </td>
502 | </tr>
503 | <tr>
504 | <td valign="top" class="footerContent" style="padding-top:0;" mc:edit="footer_content01">
505 | <em>Copyright © *|CURRENT_YEAR|* *|LIST:COMPANY|*, All rights reserved.</em>
506 | <br />
507 | *|IFNOT:ARCHIVE_PAGE|* *|LIST:DESCRIPTION|*
508 | <br />
509 | <br />
510 | <strong>Our mailing address is:</strong>
511 | <br />
512 | *|HTML:LIST_ADDRESS_HTML|* *|END:IF|*
513 | </td>
514 | </tr>
515 | <tr>
516 | <td valign="top" class="footerContent" style="padding-top:0; padding-bottom:40px;" mc:edit="footer_content02">
517 | <a href="*|UNSUB|*">unsubscribe from this list</a> <a href="*|UPDATE_PROFILE|*">update subscription preferences</a>
518 | </td>
519 | </tr>
520 | </table>
521 | <!-- // END FOOTER -->
522 | </td>
523 | </tr>
524 | </table>
525 | <!-- // END TEMPLATE -->
526 | </td>
527 | </tr>
528 | </table>
529 | </center>
530 | </body>
531 | </html>
--------------------------------------------------------------------------------
/templates/2col-basic2column.html:
--------------------------------------------------------------------------------
1 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 | <html>
3 | <head>
4 | <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
5 |
6 | <!-- Facebook sharing information tags -->
7 | <meta property="og:title" content="*|MC:SUBJECT|*" />
8 |
9 | <title>*|MC:SUBJECT|*</title>
10 | <style type="text/css">
11 | /* Client-specific Styles */
12 | #outlook a{padding:0;} /* Force Outlook to provide a "view in browser" button. */
13 | body{width:100% !important;} .ReadMsgBody{width:100%;} .ExternalClass{width:100%;} /* Force Hotmail to display emails at full width */
14 | body{-webkit-text-size-adjust:none;} /* Prevent Webkit platforms from changing default text sizes. */
15 |
16 | /* Reset Styles */
17 | body{margin:0; padding:0;}
18 | img{border:0; height:auto; line-height:100%; outline:none; text-decoration:none;}
19 | table td{border-collapse:collapse;}
20 | #backgroundTable{height:100% !important; margin:0; padding:0; width:100% !important;}
21 |
22 | /* Template Styles */
23 |
24 | /* /\/\/\/\/\/\/\/\/\/\ STANDARD STYLING: COMMON PAGE ELEMENTS /\/\/\/\/\/\/\/\/\/\ */
25 |
26 | /**
27 | * @tab Page
28 | * @section background color
29 | * @tip Set the background color for your email. You may want to choose one that matches your company's branding.
30 | * @theme page
31 | */
32 | body, #backgroundTable{
33 | /*@editable*/ background-color:#FAFAFA;
34 | }
35 |
36 | /**
37 | * @tab Page
38 | * @section email border
39 | * @tip Set the border for your email.
40 | */
41 | #templateContainer{
42 | /*@editable*/ border: 1px solid #DDDDDD;
43 | }
44 |
45 | /**
46 | * @tab Page
47 | * @section heading 1
48 | * @tip Set the styling for all first-level headings in your emails. These should be the largest of your headings.
49 | * @style heading 1
50 | */
51 | h1, .h1{
52 | /*@editable*/ color:#202020;
53 | display:block;
54 | /*@editable*/ font-family:Arial;
55 | /*@editable*/ font-size:34px;
56 | /*@editable*/ font-weight:bold;
57 | /*@editable*/ line-height:100%;
58 | margin-top:0;
59 | margin-right:0;
60 | margin-bottom:10px;
61 | margin-left:0;
62 | /*@editable*/ text-align:left;
63 | }
64 |
65 | /**
66 | * @tab Page
67 | * @section heading 2
68 | * @tip Set the styling for all second-level headings in your emails.
69 | * @style heading 2
70 | */
71 | h2, .h2{
72 | /*@editable*/ color:#202020;
73 | display:block;
74 | /*@editable*/ font-family:Arial;
75 | /*@editable*/ font-size:30px;
76 | /*@editable*/ font-weight:bold;
77 | /*@editable*/ line-height:100%;
78 | margin-top:0;
79 | margin-right:0;
80 | margin-bottom:10px;
81 | margin-left:0;
82 | /*@editable*/ text-align:left;
83 | }
84 |
85 | /**
86 | * @tab Page
87 | * @section heading 3
88 | * @tip Set the styling for all third-level headings in your emails.
89 | * @style heading 3
90 | */
91 | h3, .h3{
92 | /*@editable*/ color:#202020;
93 | display:block;
94 | /*@editable*/ font-family:Arial;
95 | /*@editable*/ font-size:26px;
96 | /*@editable*/ font-weight:bold;
97 | /*@editable*/ line-height:100%;
98 | margin-top:0;
99 | margin-right:0;
100 | margin-bottom:10px;
101 | margin-left:0;
102 | /*@editable*/ text-align:left;
103 | }
104 |
105 | /**
106 | * @tab Page
107 | * @section heading 4
108 | * @tip Set the styling for all fourth-level headings in your emails. These should be the smallest of your headings.
109 | * @style heading 4
110 | */
111 | h4, .h4{
112 | /*@editable*/ color:#202020;
113 | display:block;
114 | /*@editable*/ font-family:Arial;
115 | /*@editable*/ font-size:22px;
116 | /*@editable*/ font-weight:bold;
117 | /*@editable*/ line-height:100%;
118 | margin-top:0;
119 | margin-right:0;
120 | margin-bottom:10px;
121 | margin-left:0;
122 | /*@editable*/ text-align:left;
123 | }
124 |
125 | /* /\/\/\/\/\/\/\/\/\/\ STANDARD STYLING: PREHEADER /\/\/\/\/\/\/\/\/\/\ */
126 |
127 | /**
128 | * @tab Header
129 | * @section preheader style
130 | * @tip Set the background color for your email's preheader area.
131 | * @theme page
132 | */
133 | #templatePreheader{
134 | /*@editable*/ background-color:#FAFAFA;
135 | }
136 |
137 | /**
138 | * @tab Header
139 | * @section preheader text
140 | * @tip Set the styling for your email's preheader text. Choose a size and color that is easy to read.
141 | */
142 | .preheaderContent div{
143 | /*@editable*/ color:#505050;
144 | /*@editable*/ font-family:Arial;
145 | /*@editable*/ font-size:10px;
146 | /*@editable*/ line-height:100%;
147 | /*@editable*/ text-align:left;
148 | }
149 |
150 | /**
151 | * @tab Header
152 | * @section preheader link
153 | * @tip Set the styling for your email's preheader links. Choose a color that helps them stand out from your text.
154 | */
155 | .preheaderContent div a:link, .preheaderContent div a:visited, /* Yahoo! Mail Override */ .preheaderContent div a .yshortcuts /* Yahoo! Mail Override */{
156 | /*@editable*/ color:#336699;
157 | /*@editable*/ font-weight:normal;
158 | /*@editable*/ text-decoration:underline;
159 | }
160 |
161 |
162 |
163 | /* /\/\/\/\/\/\/\/\/\/\ STANDARD STYLING: HEADER /\/\/\/\/\/\/\/\/\/\ */
164 |
165 | /**
166 | * @tab Header
167 | * @section header style
168 | * @tip Set the background color and border for your email's header area.
169 | * @theme header
170 | */
171 | #templateHeader{
172 | /*@editable*/ background-color:#FFFFFF;
173 | /*@editable*/ border-bottom:0;
174 | }
175 |
176 | /**
177 | * @tab Header
178 | * @section header text
179 | * @tip Set the styling for your email's header text. Choose a size and color that is easy to read.
180 | */
181 | .headerContent{
182 | /*@editable*/ color:#202020;
183 | /*@editable*/ font-family:Arial;
184 | /*@editable*/ font-size:34px;
185 | /*@editable*/ font-weight:bold;
186 | /*@editable*/ line-height:100%;
187 | /*@editable*/ padding:0;
188 | /*@editable*/ text-align:center;
189 | /*@editable*/ vertical-align:middle;
190 | }
191 |
192 | /**
193 | * @tab Header
194 | * @section header link
195 | * @tip Set the styling for your email's header links. Choose a color that helps them stand out from your text.
196 | */
197 | .headerContent a:link, .headerContent a:visited, /* Yahoo! Mail Override */ .headerContent a .yshortcuts /* Yahoo! Mail Override */{
198 | /*@editable*/ color:#336699;
199 | /*@editable*/ font-weight:normal;
200 | /*@editable*/ text-decoration:underline;
201 | }
202 |
203 | #headerImage{
204 | height:auto;
205 | max-width:600px;
206 | }
207 |
208 | /* /\/\/\/\/\/\/\/\/\/\ STANDARD STYLING: COLUMNS; LEFT, RIGHT /\/\/\/\/\/\/\/\/\/\ */
209 |
210 | /**
211 | * @tab Columns
212 | * @section left column text
213 | * @tip Set the styling for your email's left column text. Choose a size and color that is easy to read.
214 | */
215 | .leftColumnContent{
216 | /*@editable*/ background-color:#FFFFFF;
217 | }
218 |
219 | /**
220 | * @tab Columns
221 | * @section left column text
222 | * @tip Set the styling for your email's left column text. Choose a size and color that is easy to read.
223 | */
224 | .leftColumnContent div{
225 | /*@editable*/ color:#505050;
226 | /*@editable*/ font-family:Arial;
227 | /*@editable*/ font-size:14px;
228 | /*@editable*/ line-height:150%;
229 | /*@editable*/ text-align:left;
230 | }
231 |
232 | /**
233 | * @tab Columns
234 | * @section left column link
235 | * @tip Set the styling for your email's left column links. Choose a color that helps them stand out from your text.
236 | */
237 | .leftColumnContent div a:link, .leftColumnContent div a:visited, /* Yahoo! Mail Override */ .leftColumnContent div a .yshortcuts /* Yahoo! Mail Override */{
238 | /*@editable*/ color:#336699;
239 | /*@editable*/ font-weight:normal;
240 | /*@editable*/ text-decoration:underline;
241 | }
242 |
243 | .leftColumnContent img{
244 | display:inline;
245 | height:auto;
246 | }
247 |
248 | /**
249 | * @tab Columns
250 | * @section right column text
251 | * @tip Set the styling for your email's right column text. Choose a size and color that is easy to read.
252 | */
253 | .rightColumnContent{
254 | /*@editable*/ background-color:#FFFFFF;
255 | }
256 |
257 | /**
258 | * @tab Columns
259 | * @section right column text
260 | * @tip Set the styling for your email's right column text. Choose a size and color that is easy to read.
261 | */
262 | .rightColumnContent div{
263 | /*@editable*/ color:#505050;
264 | /*@editable*/ font-family:Arial;
265 | /*@editable*/ font-size:14px;
266 | /*@editable*/ line-height:150%;
267 | /*@editable*/ text-align:left;
268 | }
269 |
270 | /**
271 | * @tab Columns
272 | * @section right column link
273 | * @tip Set the styling for your email's right column links. Choose a color that helps them stand out from your text.
274 | */
275 | .rightColumnContent div a:link, .rightColumnContent div a:visited, /* Yahoo! Mail Override */ .rightColumnContent div a .yshortcuts /* Yahoo! Mail Override */{
276 | /*@editable*/ color:#336699;
277 | /*@editable*/ font-weight:normal;
278 | /*@editable*/ text-decoration:underline;
279 | }
280 |
281 | .rightColumnContent img{
282 | display:inline;
283 | height:auto;
284 | }
285 |
286 | /* /\/\/\/\/\/\/\/\/\/\ STANDARD STYLING: FOOTER /\/\/\/\/\/\/\/\/\/\ */
287 |
288 | /**
289 | * @tab Footer
290 | * @section footer style
291 | * @tip Set the background color and top border for your email's footer area.
292 | * @theme footer
293 | */
294 | #templateFooter{
295 | /*@editable*/ background-color:#FFFFFF;
296 | /*@editable*/ border-top:0;
297 | }
298 |
299 | /**
300 | * @tab Footer
301 | * @section footer text
302 | * @tip Set the styling for your email's footer text. Choose a size and color that is easy to read.
303 | * @theme footer
304 | */
305 | .footerContent div{
306 | /*@editable*/ color:#707070;
307 | /*@editable*/ font-family:Arial;
308 | /*@editable*/ font-size:12px;
309 | /*@editable*/ line-height:125%;
310 | /*@editable*/ text-align:left;
311 | }
312 |
313 | /**
314 | * @tab Footer
315 | * @section footer link
316 | * @tip Set the styling for your email's footer links. Choose a color that helps them stand out from your text.
317 | */
318 | .footerContent div a:link, .footerContent div a:visited, /* Yahoo! Mail Override */ .footerContent div a .yshortcuts /* Yahoo! Mail Override */{
319 | /*@editable*/ color:#336699;
320 | /*@editable*/ font-weight:normal;
321 | /*@editable*/ text-decoration:underline;
322 | }
323 |
324 | .footerContent img{
325 | display:inline;
326 | }
327 |
328 | /**
329 | * @tab Footer
330 | * @section social bar style
331 | * @tip Set the background color and border for your email's footer social bar.
332 | * @theme footer
333 | */
334 | #social{
335 | /*@editable*/ background-color:#FAFAFA;
336 | /*@editable*/ border:0;
337 | }
338 |
339 | /**
340 | * @tab Footer
341 | * @section social bar style
342 | * @tip Set the background color and border for your email's footer social bar.
343 | */
344 | #social div{
345 | /*@editable*/ text-align:center;
346 | }
347 |
348 | /**
349 | * @tab Footer
350 | * @section utility bar style
351 | * @tip Set the background color and border for your email's footer utility bar.
352 | * @theme footer
353 | */
354 | #utility{
355 | /*@editable*/ background-color:#FFFFFF;
356 | /*@editable*/ border:0;
357 | }
358 |
359 | /**
360 | * @tab Footer
361 | * @section utility bar style
362 | * @tip Set the background color and border for your email's footer utility bar.
363 | */
364 | #utility div{
365 | /*@editable*/ text-align:center;
366 | }
367 |
368 | #monkeyRewards img{
369 | max-width:190px;
370 | }
371 | </style>
372 | </head>
373 | <body leftmargin="0" marginwidth="0" topmargin="0" marginheight="0" offset="0">
374 | <center>
375 | <table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" id="backgroundTable">
376 | <tr>
377 | <td align="center" valign="top">
378 | <!-- // Begin Template Preheader \\ -->
379 | <table border="0" cellpadding="10" cellspacing="0" width="600" id="templatePreheader">
380 | <tr>
381 | <td valign="top" class="preheaderContent">
382 |
383 | <!-- // Begin Module: Standard Preheader \ -->
384 | <table border="0" cellpadding="10" cellspacing="0" width="100%">
385 | <tr>
386 | <td valign="top">
387 | <div mc:edit="std_preheader_content">
388 | Use this area to offer a short teaser of your email's content. Text here will show in the preview area of some email clients.
389 | </div>
390 | </td>
391 | <!-- *|IFNOT:ARCHIVE_PAGE|* -->
392 | <td valign="top" width="190">
393 | <div mc:edit="std_preheader_links">
394 | Is this email not displaying correctly?<br /><a href="*|ARCHIVE|*" target="_blank">View it in your browser</a>.
395 | </div>
396 | </td>
397 | <!-- *|END:IF|* -->
398 | </tr>
399 | </table>
400 | <!-- // End Module: Standard Preheader \ -->
401 |
402 | </td>
403 | </tr>
404 | </table>
405 | <!-- // End Template Preheader \\ -->
406 | <table border="0" cellpadding="0" cellspacing="0" width="600" id="templateContainer">
407 | <tr>
408 | <td align="center" valign="top">
409 | <!-- // Begin Template Header \\ -->
410 | <table border="0" cellpadding="0" cellspacing="0" width="600" id="templateHeader">
411 | <tr>
412 | <td class="headerContent">
413 |
414 | <!-- // Begin Module: Standard Header Image \\ -->
415 | <img src="http://gallery.mailchimp.com/653153ae841fd11de66ad181a/images/placeholder_600.gif" style="max-width:600px;" id="headerImage campaign-icon" mc:label="header_image" mc:edit="header_image" mc:allowdesigner mc:allowtext />
416 | <!-- // End Module: Standard Header Image \\ -->
417 |
418 | </td>
419 | </tr>
420 | </table>
421 | <!-- // End Template Header \\ -->
422 | </td>
423 | </tr>
424 | <tr>
425 | <td align="center" valign="top">
426 | <!-- // Begin Template Body \\ -->
427 | <table border="0" cellpadding="0" cellspacing="0" width="600" id="templateBody">
428 | <tr>
429 | <td valign="top" width="280" class="leftColumnContent">
430 |
431 | <!-- // Begin Module: Top Image with Content \\ -->
432 | <table border="0" cellpadding="20" cellspacing="0" width="100%">
433 | <tr mc:repeatable>
434 | <td valign="top">
435 | <img src="http://gallery.mailchimp.com/653153ae841fd11de66ad181a/images/placeholder_260.gif" style="max-width:260px;" mc:label="image" mc:edit="tiwc300_image00" />
436 | <div mc:edit="tiwc300_content00">
437 | <h4 class="h4">Heading 4</h4>
438 | <strong>Repeatable content blocks:</strong> Repeatable sections are noted with plus and minus signs so that you can add and subtract content blocks. You can also <a href="http://www.mailchimp.com/kb/article/how-do-i-work-with-repeatable-content-blocks" target="_blank">get a little fancy</a>: repeat blocks and remove all text to make image "gallery" sections, or do the opposite and remove images for text-only blocks!
439 |
440 | </div>
441 | </td>
442 | </tr>
443 | </table>
444 | <!-- // End Module: Top Image with Content \\ -->
445 |
446 | </td>
447 | <td valign="top" width="280" class="rightColumnContent">
448 |
449 | <!-- // Begin Module: Top Image with Content \\ -->
450 | <table border="0" cellpadding="20" cellspacing="0" width="100%">
451 | <tr mc:repeatable>
452 | <td valign="top">
453 | <img src="http://gallery.mailchimp.com/653153ae841fd11de66ad181a/images/placeholder_260.gif" style="max-width:260px;" mc:label="image" mc:edit="tiwc300_image01" />
454 | <div mc:edit="tiwc300_content01">
455 | <h4 class="h4">Heading 4</h4>
456 | <strong>Repeatable content blocks:</strong> Repeatable sections are noted with plus and minus signs so that you can add and subtract content blocks. You can also <a href="http://www.mailchimp.com/kb/article/how-do-i-work-with-repeatable-content-blocks" target="_blank">get a little fancy</a>: repeat blocks and remove all text to make image "gallery" sections, or do the opposite and remove images for text-only blocks!
457 |
458 | </div>
459 | </td>
460 | </tr>
461 | </table>
462 | <!-- // End Module: Top Image with Content \\ -->
463 |
464 | </td>
465 | </tr>
466 | </table>
467 | <!-- // End Template Body \\ -->
468 | </td>
469 | </tr>
470 | <tr>
471 | <td align="center" valign="top">
472 | <!-- // Begin Template Footer \\ -->
473 | <table border="0" cellpadding="10" cellspacing="0" width="600" id="templateFooter">
474 | <tr>
475 | <td valign="top" class="footerContent">
476 |
477 | <!-- // Begin Module: Standard Footer \\ -->
478 | <table border="0" cellpadding="10" cellspacing="0" width="100%">
479 | <tr>
480 | <td colspan="2" valign="middle" id="social">
481 | <div mc:edit="std_social">
482 | <a href="*|TWITTER:PROFILEURL|*">follow on Twitter</a> | <a href="*|FACEBOOK:PROFILEURL|*">friend on Facebook</a> | <a href="*|FORWARD|*">forward to a friend</a>
483 | </div>
484 | </td>
485 | </tr>
486 | <tr>
487 | <td valign="top" width="350">
488 | <div mc:edit="std_footer">
489 | <em>Copyright © *|CURRENT_YEAR|* *|LIST:COMPANY|*, All rights reserved.</em>
490 | <br />
491 | *|IFNOT:ARCHIVE_PAGE|* *|LIST:DESCRIPTION|*
492 | <br />
493 | <strong>Our mailing address is:</strong>
494 | <br />
495 | *|HTML:LIST_ADDRESS_HTML|**|END:IF|*
496 | </div>
497 | </td>
498 | <td valign="top" width="190" id="monkeyRewards">
499 | <div mc:edit="monkeyrewards">
500 | *|IF:REWARDS|* *|HTML:REWARDS|* *|END:IF|*
501 | </div>
502 | </td>
503 | </tr>
504 | <tr>
505 | <td colspan="2" valign="middle" id="utility">
506 | <div mc:edit="std_utility">
507 | <a href="*|UNSUB|*">unsubscribe from this list</a> | <a href="*|UPDATE_PROFILE|*">update subscription preferences</a>
508 | </div>
509 | </td>
510 | </tr>
511 | </table>
512 | <!-- // End Module: Standard Footer \\ -->
513 |
514 | </td>
515 | </tr>
516 | </table>
517 | <!-- // End Template Footer \\ -->
518 | </td>
519 | </tr>
520 | </table>
521 | <br />
522 | </td>
523 | </tr>
524 | </table>
525 | </center>
526 | </body>
527 | </html>
--------------------------------------------------------------------------------
/templates/mobile-basicmobile.html:
--------------------------------------------------------------------------------
1 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 | <html>
3 | <head>
4 | <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
5 |
6 | <!-- Facebook sharing information tags -->
7 | <meta property="og:title" content="*|MC:SUBJECT|*" />
8 |
9 | <title>*|MC:SUBJECT|*</title>
10 | <style type="text/css">
11 | /* Client-specific Styles */
12 | #outlook a{padding:0;} /* Force Outlook to provide a "view in browser" button. */
13 | body{width:100% !important;} .ReadMsgBody{width:100%;} .ExternalClass{width:100%;} /* Force Hotmail to display emails at full width */
14 | body{-webkit-text-size-adjust:none;} /* Prevent Webkit platforms from changing default text sizes. */
15 |
16 | /* Reset Styles */
17 | body{margin:0; padding:0;}
18 | img{border:0; height:auto; line-height:100%; outline:none; text-decoration:none;}
19 | table td{border-collapse:collapse;}
20 | #backgroundTable{height:100% !important; margin:0; padding:0; width:100% !important;}
21 |
22 | /* Template Styles */
23 |
24 | /* /\/\/\/\/\/\/\/\/\/\ STANDARD STYLING: COMMON PAGE ELEMENTS /\/\/\/\/\/\/\/\/\/\ */
25 |
26 | /**
27 | * @tab Page
28 | * @section background color
29 | * @tip Set the background color for your email. You may want to choose one that matches your company's branding.
30 | * @theme page
31 | */
32 | body, #backgroundTable{
33 | /*@editable*/ background-color:#FAFAFA;
34 | }
35 |
36 | /**
37 | * @tab Page
38 | * @section email border
39 | * @tip Set the border for your email.
40 | */
41 | #templateContainer{
42 | /*@editable*/ border: 1px solid #DDDDDD;
43 | }
44 |
45 | /**
46 | * @tab Page
47 | * @section heading 1
48 | * @tip Set the styling for all first-level headings in your emails. These should be the largest of your headings.
49 | * @style heading 1
50 | */
51 | h1, .h1{
52 | /*@editable*/ color:#202020;
53 | display:block;
54 | /*@editable*/ font-family:Arial;
55 | /*@editable*/ font-size:34px;
56 | /*@editable*/ font-weight:bold;
57 | /*@editable*/ line-height:100%;
58 | margin-top:0;
59 | margin-right:0;
60 | margin-bottom:10px;
61 | margin-left:0;
62 | /*@editable*/ text-align:left;
63 | }
64 |
65 | /**
66 | * @tab Page
67 | * @section heading 2
68 | * @tip Set the styling for all second-level headings in your emails.
69 | * @style heading 2
70 | */
71 | h2, .h2{
72 | /*@editable*/ color:#202020;
73 | display:block;
74 | /*@editable*/ font-family:Arial;
75 | /*@editable*/ font-size:30px;
76 | /*@editable*/ font-weight:bold;
77 | /*@editable*/ line-height:100%;
78 | margin-top:0;
79 | margin-right:0;
80 | margin-bottom:10px;
81 | margin-left:0;
82 | /*@editable*/ text-align:left;
83 | }
84 |
85 | /**
86 | * @tab Page
87 | * @section heading 3
88 | * @tip Set the styling for all third-level headings in your emails.
89 | * @style heading 3
90 | */
91 | h3, .h3{
92 | /*@editable*/ color:#202020;
93 | display:block;
94 | /*@editable*/ font-family:Arial;
95 | /*@editable*/ font-size:26px;
96 | /*@editable*/ font-weight:bold;
97 | /*@editable*/ line-height:100%;
98 | margin-top:0;
99 | margin-right:0;
100 | margin-bottom:10px;
101 | margin-left:0;
102 | /*@editable*/ text-align:left;
103 | }
104 |
105 | /**
106 | * @tab Page
107 | * @section heading 4
108 | * @tip Set the styling for all fourth-level headings in your emails. These should be the smallest of your headings.
109 | * @style heading 4
110 | */
111 | h4, .h4{
112 | /*@editable*/ color:#202020;
113 | display:block;
114 | /*@editable*/ font-family:Arial;
115 | /*@editable*/ font-size:22px;
116 | /*@editable*/ font-weight:bold;
117 | /*@editable*/ line-height:100%;
118 | margin-top:0;
119 | margin-right:0;
120 | margin-bottom:10px;
121 | margin-left:0;
122 | /*@editable*/ text-align:left;
123 | }
124 |
125 | /* /\/\/\/\/\/\/\/\/\/\ STANDARD STYLING: PREHEADER /\/\/\/\/\/\/\/\/\/\ */
126 |
127 | /**
128 | * @tab Header
129 | * @section preheader style
130 | * @tip Set the background color for your email's preheader area.
131 | * @theme page
132 | */
133 | #templatePreheader{
134 | /*@editable*/ background-color:#FAFAFA;
135 | }
136 |
137 | /**
138 | * @tab Header
139 | * @section preheader text
140 | * @tip Set the styling for your email's preheader text. Choose a size and color that is easy to read.
141 | */
142 | .preheaderContent div{
143 | /*@editable*/ color:#505050;
144 | /*@editable*/ font-family:Arial;
145 | /*@editable*/ font-size:10px;
146 | /*@editable*/ line-height:100%;
147 | /*@editable*/ text-align:left;
148 | }
149 |
150 | /**
151 | * @tab Header
152 | * @section preheader link
153 | * @tip Set the styling for your email's preheader links. Choose a color that helps them stand out from your text.
154 | */
155 | .preheaderContent div a:link, .preheaderContent div a:visited, /* Yahoo! Mail Override */ .preheaderContent div a .yshortcuts /* Yahoo! Mail Override */{
156 | /*@editable*/ color:#336699;
157 | /*@editable*/ font-weight:normal;
158 | /*@editable*/ text-decoration:underline;
159 | }
160 |
161 | .preheaderContent img{
162 | display:inline;
163 | height:auto;
164 | margin-bottom:10px;
165 | max-width:280px;
166 | }
167 |
168 | /* /\/\/\/\/\/\/\/\/\/\ STANDARD STYLING: HEADER /\/\/\/\/\/\/\/\/\/\ */
169 |
170 | /**
171 | * @tab Header
172 | * @section header style
173 | * @tip Set the background color and border for your email's header area.
174 | * @theme header
175 | */
176 | #templateHeader{
177 | /*@editable*/ background-color:#FFFFFF;
178 | /*@editable*/ border-bottom:0;
179 | }
180 |
181 | /**
182 | * @tab Header
183 | * @section header text
184 | * @tip Set the styling for your email's header text. Choose a size and color that is easy to read.
185 | */
186 | .headerContent{
187 | /*@editable*/ color:#202020;
188 | /*@editable*/ font-family:Arial;
189 | /*@editable*/ font-size:34px;
190 | /*@editable*/ font-weight:bold;
191 | /*@editable*/ line-height:100%;
192 | /*@editable*/ padding:0;
193 | /*@editable*/ text-align:center;
194 | /*@editable*/ vertical-align:middle;
195 | }
196 |
197 | /**
198 | * @tab Header
199 | * @section header link
200 | * @tip Set the styling for your email's header links. Choose a color that helps them stand out from your text.
201 | */
202 | .headerContent a:link, .headerContent a:visited, /* Yahoo! Mail Override */ .headerContent a .yshortcuts /* Yahoo! Mail Override */{
203 | /*@editable*/ color:#336699;
204 | /*@editable*/ font-weight:normal;
205 | /*@editable*/ text-decoration:underline;
206 | }
207 |
208 | #headerImage{
209 | height:auto;
210 | max-width:320px !important;
211 | }
212 |
213 | /* /\/\/\/\/\/\/\/\/\/\ STANDARD STYLING: MAIN BODY /\/\/\/\/\/\/\/\/\/\ */
214 |
215 | /**
216 | * @tab Body
217 | * @section body style
218 | * @tip Set the background color for your email's body area.
219 | */
220 | #templateContainer, .bodyContent{
221 | /*@editable*/ background-color:#FFFFFF;
222 | }
223 |
224 | /**
225 | * @tab Body
226 | * @section body text
227 | * @tip Set the styling for your email's main content text. Choose a size and color that is easy to read.
228 | * @theme main
229 | */
230 | .bodyContent div{
231 | /*@editable*/ color:#505050;
232 | /*@editable*/ font-family:Arial;
233 | /*@editable*/ font-size:12px;
234 | /*@editable*/ line-height:150%;
235 | /*@editable*/ text-align:left;
236 | }
237 |
238 | /**
239 | * @tab Body
240 | * @section body link
241 | * @tip Set the styling for your email's main content links. Choose a color that helps them stand out from your text.
242 | */
243 | .bodyContent div a:link, .bodyContent div a:visited, /* Yahoo! Mail Override */ .bodyContent div a .yshortcuts /* Yahoo! Mail Override */{
244 | /*@editable*/ color:#336699;
245 | /*@editable*/ font-weight:normal;
246 | /*@editable*/ text-decoration:underline;
247 | }
248 |
249 | .bodyContent img{
250 | display:inline;
251 | height:auto;
252 | margin-bottom:10px;
253 | max-width:280px;
254 | }
255 |
256 | /* /\/\/\/\/\/\/\/\/\/\ STANDARD STYLING: FOOTER /\/\/\/\/\/\/\/\/\/\ */
257 |
258 | /**
259 | * @tab Footer
260 | * @section footer style
261 | * @tip Set the background color and top border for your email's footer area.
262 | * @theme footer
263 | */
264 | #templateFooter{
265 | /*@editable*/ background-color:#FFFFFF;
266 | /*@editable*/ border-top:0;
267 | }
268 |
269 | /**
270 | * @tab Footer
271 | * @section footer text
272 | * @tip Set the styling for your email's footer text. Choose a size and color that is easy to read.
273 | * @theme footer
274 | */
275 | .footerContent div{
276 | /*@editable*/ color:#707070;
277 | /*@editable*/ font-family:Arial;
278 | /*@editable*/ font-size:11px;
279 | /*@editable*/ line-height:150%;
280 | /*@editable*/ text-align:left;
281 | }
282 |
283 | /**
284 | * @tab Footer
285 | * @section footer link
286 | * @tip Set the styling for your email's footer links. Choose a color that helps them stand out from your text.
287 | */
288 | .footerContent div a:link, .footerContent div a:visited, /* Yahoo! Mail Override */ .footerContent div a .yshortcuts /* Yahoo! Mail Override */{
289 | /*@editable*/ color:#336699;
290 | /*@editable*/ font-weight:normal;
291 | /*@editable*/ text-decoration:underline;
292 | }
293 |
294 | .footerContent img{
295 | display:inline;
296 | }
297 |
298 | /**
299 | * @tab Footer
300 | * @section social bar style
301 | * @tip Set the background color and border for your email's footer social bar.
302 | * @theme footer
303 | */
304 | #social{
305 | /*@editable*/ background-color:#FAFAFA;
306 | /*@editable*/ border:0;
307 | }
308 |
309 | /**
310 | * @tab Footer
311 | * @section social bar style
312 | * @tip Set the background color and border for your email's footer social bar.
313 | */
314 | #social div{
315 | /*@editable*/ text-align:left;
316 | }
317 |
318 | /**
319 | * @tab Footer
320 | * @section utility bar style
321 | * @tip Set the background color and border for your email's footer utility bar.
322 | * @theme footer
323 | */
324 | #utility{
325 | /*@editable*/ background-color:#FFFFFF;
326 | /*@editable*/ border:0;
327 | }
328 |
329 | /**
330 | * @tab Footer
331 | * @section utility bar style
332 | * @tip Set the background color and border for your email's footer utility bar.
333 | */
334 | #utility div{
335 | /*@editable*/ text-align:left;
336 | }
337 |
338 | #monkeyRewards img{
339 | display:inline;
340 | height:auto;
341 | max-width:280px;
342 | }
343 | </style>
344 | </head>
345 | <body leftmargin="0" marginwidth="0" topmargin="0" marginheight="0" offset="0">
346 | <center>
347 | <table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" id="backgroundTable">
348 | <tr>
349 | <td align="center" valign="top">
350 | <!-- // Begin Template Preheader \\ -->
351 | <table border="0" cellpadding="10" cellspacing="0" width="320" id="templatePreheader">
352 | <tr>
353 | <td valign="top" class="preheaderContent">
354 |
355 | <!-- // Begin Module: Standard Preheader \\ -->
356 | <table border="0" cellpadding="10" cellspacing="0" width="100%">
357 | <tr>
358 | <td valign="top">
359 | <div mc:edit="std_preheader_content">
360 | Use this area to offer a short teaser of your email's content. Text here will show in the preview area of some email clients.
361 | </div>
362 | </td>
363 | </tr>
364 | </table>
365 | <!-- // End Module: Standard Preheader \\ -->
366 |
367 | </td>
368 | </tr>
369 | </table>
370 | <!-- // End Template Preheader \\ -->
371 | <table border="0" cellpadding="0" cellspacing="0" width="320" id="templateContainer">
372 | <tr>
373 | <td align="center" valign="top">
374 | <!-- // Begin Template Header \\ -->
375 | <table border="0" cellpadding="0" cellspacing="0" width="320" id="templateHeader">
376 | <tr>
377 | <td class="headerContent">
378 |
379 | <!-- // Begin Module: Standard Header Image \\ -->
380 | <img src="http://gallery.mailchimp.com/653153ae841fd11de66ad181a/images/placeholder_320.gif" style="max-width:320px;" id="headerImage campaign-icon" mc:label="header_image" mc:edit="header_image" mc:allowdesigner mc:allowtext />
381 | <!-- // End Module: Standard Header Image \\ -->
382 |
383 | </td>
384 | </tr>
385 | </table>
386 | <!-- // End Template Header \\ -->
387 | </td>
388 | </tr>
389 | <tr>
390 | <td align="center" valign="top">
391 | <!-- // Begin Template Body \\ -->
392 | <table border="0" cellpadding="0" cellspacing="0" width="320" id="templateBody">
393 | <tr>
394 | <td valign="top" class="bodyContent">
395 |
396 | <!-- // Begin Module: Standard Content \\ -->
397 | <table border="0" cellpadding="20" cellspacing="0" width="100%">
398 | <tr>
399 | <td valign="top">
400 | <div mc:edit="std_content00">
401 | <h1 class="h1">Heading 1</h1>
402 | <h2 class="h2">Heading 2</h2>
403 | <h3 class="h3">Heading 3</h3>
404 | <h4 class="h4">Heading 4</h4>
405 | <strong>Getting started:</strong> Customize your template by clicking on the style editor tabs up above. Set your fonts, colors, and styles. After setting your styling is all done you can click here in this area, delete the text, and start adding your own awesome content!
406 | <br />
407 | <br />
408 | After you enter your content, highlight the text you want to style and select the options you set in the style editor in the "styles" drop down box. Want to <a href="http://www.mailchimp.com/kb/article/im-using-the-style-designer-and-i-cant-get-my-formatting-to-change" target="_blank">get rid of styling on a bit of text</a>, but having trouble doing it? Just use the "remove formatting" button to strip the text of any formatting and reset your style.
409 | </div>
410 | </td>
411 | </tr>
412 | </table>
413 | <!-- // End Module: Standard Content \\ -->
414 |
415 | </td>
416 | </tr>
417 | </table>
418 | <!-- // End Template Body \\ -->
419 | </td>
420 | </tr>
421 | <tr>
422 | <td align="center" valign="top">
423 | <!-- // Begin Template Footer \\ -->
424 | <table border="0" cellpadding="10" cellspacing="0" width="320" id="templateFooter">
425 | <tr>
426 | <td valign="top" class="footerContent">
427 |
428 | <!-- // Begin Module: Standard Footer \\ -->
429 | <table border="0" cellpadding="10" cellspacing="0" width="100%">
430 | <tr>
431 | <td colspan="2" valign="middle" id="social">
432 | <div mc:edit="std_social">
433 | <a href="*|TWITTER:PROFILEURL|*">follow on Twitter</a> <br /> <a href="*|FACEBOOK:PROFILEURL|*">friend on Facebook</a> <br /> <a href="*|FORWARD|*">forward to a friend</a>
434 | </div>
435 | </td>
436 | </tr>
437 | <tr>
438 | <td valign="top" width="100%">
439 | <br />
440 | <div mc:edit="std_footer">
441 | <em>Copyright © *|CURRENT_YEAR|* *|LIST:COMPANY|*, All rights reserved.</em>
442 | <br />
443 | *|IFNOT:ARCHIVE_PAGE|* *|LIST:DESCRIPTION|*
444 | <br />
445 | <strong>Our mailing address is:</strong>
446 | <br />
447 | *|HTML:LIST_ADDRESS_HTML|**|END:IF|*
448 | </div>
449 | <br />
450 | <div id="monkeyRewards" mc:edit="monkeyrewards">
451 | *|IF:REWARDS|* *|HTML:REWARDS|* *|END:IF|*
452 | </div>
453 | </td>
454 | </tr>
455 | <tr>
456 | <td colspan="2" valign="middle" id="utility">
457 | <div mc:edit="std_utility">
458 | <a href="*|UNSUB|*">unsubscribe from this list</a> | <a href="*|UPDATE_PROFILE|*">update subscription preferences</a>
459 | </div>
460 | </td>
461 | </tr>
462 | </table>
463 | <!-- // End Module: Standard Footer \\ -->
464 |
465 | </td>
466 | </tr>
467 | </table>
468 | <!-- // End Template Footer \\ -->
469 | </td>
470 | </tr>
471 | </table>
472 | <br />
473 | </td>
474 | </tr>
475 | </table>
476 | </center>
477 | </body>
478 | </html>
--------------------------------------------------------------------------------
/templates/mobile-postcardmobile.html:
--------------------------------------------------------------------------------
1 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 | <html>
3 | <head>
4 | <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
5 |
6 | <!-- Facebook sharing information tags -->
7 | <meta property="og:title" content="*|MC:SUBJECT|*" />
8 |
9 | <title>*|MC:SUBJECT|*</title>
10 | <style type="text/css">
11 | /* Client-specific Styles */
12 | #outlook a{padding:0;} /* Force Outlook to provide a "view in browser" button. */
13 | body{width:100% !important;} .ReadMsgBody{width:100%;} .ExternalClass{width:100%;} /* Force Hotmail to display emails at full width */
14 | body{-webkit-text-size-adjust:none;} /* Prevent Webkit platforms from changing default text sizes. */
15 |
16 | /* Reset Styles */
17 | body{margin:0; padding:0;}
18 | img{border:0; height:auto; line-height:100%; outline:none; text-decoration:none;}
19 | table td{border-collapse:collapse;}
20 | #backgroundTable{height:100% !important; margin:0; padding:0; width:100% !important;}
21 |
22 | /* Template Styles */
23 |
24 | /* /\/\/\/\/\/\/\/\/\/\ STANDARD STYLING: COMMON PAGE ELEMENTS /\/\/\/\/\/\/\/\/\/\ */
25 |
26 | /**
27 | * @tab Page
28 | * @section background color
29 | * @tip Set the background color for your email. You may want to choose one that matches your company's branding.
30 | * @theme page
31 | */
32 | body, #backgroundTable{
33 | /*@editable*/ background-color:#FAFAFA;
34 | }
35 |
36 | /**
37 | * @tab Page
38 | * @section email border
39 | * @tip Set the border for your email.
40 | */
41 | #templateContainer{
42 | /*@editable*/ border: 1px solid #DDDDDD;
43 | }
44 |
45 | /**
46 | * @tab Page
47 | * @section heading 1
48 | * @tip Set the styling for all first-level headings in your emails. These should be the largest of your headings.
49 | * @style heading 1
50 | */
51 | h1, .h1{
52 | /*@editable*/ color:#202020;
53 | display:block;
54 | /*@editable*/ font-family:Arial;
55 | /*@editable*/ font-size:34px;
56 | /*@editable*/ font-weight:bold;
57 | /*@editable*/ line-height:100%;
58 | margin-top:0;
59 | margin-right:0;
60 | margin-bottom:10px;
61 | margin-left:0;
62 | /*@editable*/ text-align:left;
63 | }
64 |
65 | /**
66 | * @tab Page
67 | * @section heading 2
68 | * @tip Set the styling for all second-level headings in your emails.
69 | * @style heading 2
70 | */
71 | h2, .h2{
72 | /*@editable*/ color:#202020;
73 | display:block;
74 | /*@editable*/ font-family:Arial;
75 | /*@editable*/ font-size:30px;
76 | /*@editable*/ font-weight:bold;
77 | /*@editable*/ line-height:100%;
78 | margin-top:0;
79 | margin-right:0;
80 | margin-bottom:10px;
81 | margin-left:0;
82 | /*@editable*/ text-align:left;
83 | }
84 |
85 | /**
86 | * @tab Page
87 | * @section heading 3
88 | * @tip Set the styling for all third-level headings in your emails.
89 | * @style heading 3
90 | */
91 | h3, .h3{
92 | /*@editable*/ color:#202020;
93 | display:block;
94 | /*@editable*/ font-family:Arial;
95 | /*@editable*/ font-size:26px;
96 | /*@editable*/ font-weight:bold;
97 | /*@editable*/ line-height:100%;
98 | margin-top:0;
99 | margin-right:0;
100 | margin-bottom:10px;
101 | margin-left:0;
102 | /*@editable*/ text-align:left;
103 | }
104 |
105 | /**
106 | * @tab Page
107 | * @section heading 4
108 | * @tip Set the styling for all fourth-level headings in your emails. These should be the smallest of your headings.
109 | * @style heading 4
110 | */
111 | h4, .h4{
112 | /*@editable*/ color:#202020;
113 | display:block;
114 | /*@editable*/ font-family:Arial;
115 | /*@editable*/ font-size:22px;
116 | /*@editable*/ font-weight:bold;
117 | /*@editable*/ line-height:100%;
118 | margin-top:0;
119 | margin-right:0;
120 | margin-bottom:10px;
121 | margin-left:0;
122 | /*@editable*/ text-align:left;
123 | }
124 |
125 | /* /\/\/\/\/\/\/\/\/\/\ STANDARD STYLING: PREHEADER /\/\/\/\/\/\/\/\/\/\ */
126 |
127 | /**
128 | * @tab Header
129 | * @section preheader style
130 | * @tip Set the background color for your email's preheader area.
131 | * @theme page
132 | */
133 | #templatePreheader{
134 | /*@editable*/ background-color:#FAFAFA;
135 | }
136 |
137 | /**
138 | * @tab Header
139 | * @section preheader text
140 | * @tip Set the styling for your email's preheader text. Choose a size and color that is easy to read.
141 | */
142 | .preheaderContent div{
143 | /*@editable*/ color:#505050;
144 | /*@editable*/ font-family:Arial;
145 | /*@editable*/ font-size:10px;
146 | /*@editable*/ line-height:100%;
147 | /*@editable*/ text-align:left;
148 | }
149 |
150 | /**
151 | * @tab Header
152 | * @section preheader link
153 | * @tip Set the styling for your email's preheader links. Choose a color that helps them stand out from your text.
154 | */
155 | .preheaderContent div a:link, .preheaderContent div a:visited, /* Yahoo! Mail Override */ .preheaderContent div a .yshortcuts /* Yahoo! Mail Override */{
156 | /*@editable*/ color:#336699;
157 | /*@editable*/ font-weight:normal;
158 | /*@editable*/ text-decoration:underline;
159 | }
160 |
161 | .preheaderContent img{
162 | display:inline;
163 | height:auto;
164 | margin-bottom:10px;
165 | max-width:280px;
166 | }
167 |
168 | /* /\/\/\/\/\/\/\/\/\/\ STANDARD STYLING: HEADER /\/\/\/\/\/\/\/\/\/\ */
169 |
170 | /**
171 | * @tab Header
172 | * @section header style
173 | * @tip Set the background color and border for your email's header area.
174 | * @theme header
175 | */
176 | #templateHeader{
177 | /*@editable*/ background-color:#FFFFFF;
178 | /*@editable*/ border-bottom:0;
179 | }
180 |
181 | /**
182 | * @tab Header
183 | * @section header text
184 | * @tip Set the styling for your email's header text. Choose a size and color that is easy to read.
185 | */
186 | .headerContent{
187 | /*@editable*/ color:#202020;
188 | /*@editable*/ font-family:Arial;
189 | /*@editable*/ font-size:34px;
190 | /*@editable*/ font-weight:bold;
191 | /*@editable*/ line-height:100%;
192 | /*@editable*/ padding:0;
193 | /*@editable*/ text-align:center;
194 | /*@editable*/ vertical-align:middle;
195 | }
196 |
197 | /**
198 | * @tab Header
199 | * @section header link
200 | * @tip Set the styling for your email's header links. Choose a color that helps them stand out from your text.
201 | */
202 | .headerContent a:link, .headerContent a:visited, /* Yahoo! Mail Override */ .headerContent a .yshortcuts /* Yahoo! Mail Override */{
203 | /*@editable*/ color:#336699;
204 | /*@editable*/ font-weight:normal;
205 | /*@editable*/ text-decoration:underline;
206 | }
207 |
208 | #headerImage{
209 | height:auto;
210 | max-width:320px !important;
211 | }
212 |
213 | /* /\/\/\/\/\/\/\/\/\/\ STANDARD STYLING: MAIN BODY /\/\/\/\/\/\/\/\/\/\ */
214 |
215 | /**
216 | * @tab Body
217 | * @section body style
218 | * @tip Set the background color for your email's body area.
219 | */
220 | #templateContainer, .bodyContent{
221 | /*@editable*/ background-color:#FFFFFF;
222 | }
223 |
224 | /**
225 | * @tab Body
226 | * @section body text
227 | * @tip Set the styling for your email's main content text. Choose a size and color that is easy to read.
228 | * @theme main
229 | */
230 | .bodyContent div{
231 | /*@editable*/ color:#505050;
232 | /*@editable*/ font-family:Arial;
233 | /*@editable*/ font-size:12px;
234 | /*@editable*/ line-height:150%;
235 | /*@editable*/ text-align:left;
236 | }
237 |
238 | /**
239 | * @tab Body
240 | * @section body link
241 | * @tip Set the styling for your email's main content links. Choose a color that helps them stand out from your text.
242 | */
243 | .bodyContent div a:link, .bodyContent div a:visited, /* Yahoo! Mail Override */ .bodyContent div a .yshortcuts /* Yahoo! Mail Override */{
244 | /*@editable*/ color:#336699;
245 | /*@editable*/ font-weight:normal;
246 | /*@editable*/ text-decoration:underline;
247 | }
248 |
249 | .bodyContent img{
250 | display:inline;
251 | height:auto;
252 | margin-bottom:10px;
253 | max-width:280px;
254 | }
255 |
256 | /* /\/\/\/\/\/\/\/\/\/\ STANDARD STYLING: FOOTER /\/\/\/\/\/\/\/\/\/\ */
257 |
258 | /**
259 | * @tab Footer
260 | * @section footer style
261 | * @tip Set the background color and top border for your email's footer area.
262 | * @theme footer
263 | */
264 | #templateFooter{
265 | /*@editable*/ background-color:#FFFFFF;
266 | /*@editable*/ border-top:0;
267 | }
268 |
269 | /**
270 | * @tab Footer
271 | * @section footer text
272 | * @tip Set the styling for your email's footer text. Choose a size and color that is easy to read.
273 | * @theme footer
274 | */
275 | .footerContent div{
276 | /*@editable*/ color:#707070;
277 | /*@editable*/ font-family:Arial;
278 | /*@editable*/ font-size:11px;
279 | /*@editable*/ line-height:150%;
280 | /*@editable*/ text-align:left;
281 | }
282 |
283 | /**
284 | * @tab Footer
285 | * @section footer link
286 | * @tip Set the styling for your email's footer links. Choose a color that helps them stand out from your text.
287 | */
288 | .footerContent div a:link, .footerContent div a:visited, /* Yahoo! Mail Override */ .footerContent div a .yshortcuts /* Yahoo! Mail Override */{
289 | /*@editable*/ color:#336699;
290 | /*@editable*/ font-weight:normal;
291 | /*@editable*/ text-decoration:underline;
292 | }
293 |
294 | .footerContent img{
295 | display:inline;
296 | height:auto;
297 | margin-bottom:10px;
298 | max-width:280px;
299 | }
300 |
301 | /**
302 | * @tab Footer
303 | * @section social bar style
304 | * @tip Set the background color and border for your email's footer social bar.
305 | * @theme footer
306 | */
307 | #social{
308 | /*@editable*/ background-color:#FAFAFA;
309 | /*@editable*/ border:0;
310 | }
311 |
312 | /**
313 | * @tab Footer
314 | * @section social bar style
315 | * @tip Set the background color and border for your email's footer social bar.
316 | */
317 | #social div{
318 | /*@editable*/ text-align:left;
319 | }
320 |
321 | /**
322 | * @tab Footer
323 | * @section utility bar style
324 | * @tip Set the background color and border for your email's footer utility bar.
325 | * @theme footer
326 | */
327 | #utility{
328 | /*@editable*/ background-color:#FFFFFF;
329 | /*@editable*/ border:0;
330 | }
331 |
332 | /**
333 | * @tab Footer
334 | * @section utility bar style
335 | * @tip Set the background color and border for your email's footer utility bar.
336 | */
337 | #utility div{
338 | /*@editable*/ text-align:left;
339 | }
340 | </style>
341 | </head>
342 | <body leftmargin="0" marginwidth="0" topmargin="0" marginheight="0" offset="0">
343 | <center>
344 | <table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" id="backgroundTable">
345 | <tr>
346 | <td align="center" valign="top">
347 | <!-- // Begin Template Preheader \\ -->
348 | <table border="0" cellpadding="10" cellspacing="0" width="320" id="templatePreheader">
349 | <tr>
350 | <td valign="top" class="preheaderContent">
351 |
352 | <!-- // Begin Module: Standard Mobile Preheader \\ -->
353 | <table border="0" cellpadding="10" cellspacing="0" width="100%">
354 | <tr>
355 | <td valign="top">
356 | <div mc:edit="std_preheader_content">
357 | Use this area to offer a short teaser of your email's content. Text here will show in the preview area of some email clients.
358 | </div>
359 | </td>
360 | </tr>
361 | </table>
362 | <!-- // End Module: Standard Mobile Preheader \\ -->
363 |
364 | </td>
365 | </tr>
366 | </table>
367 | <!-- // End Template Preheader \\ -->
368 | <table border="0" cellpadding="0" cellspacing="0" width="320" id="templateContainer">
369 | <tr>
370 | <td align="center" valign="top">
371 | <!-- // Begin Template Header \\ -->
372 | <table border="0" cellpadding="0" cellspacing="0" width="320" id="templateHeader">
373 | <tr>
374 | <td class="headerContent">
375 |
376 | <!-- // Begin Module: Standard Header Image \\ -->
377 | <img src="http://gallery.mailchimp.com/653153ae841fd11de66ad181a/images/placeholder_320.gif" style="max-width:320px;" id="headerImage campaign-icon" mc:label="header_image" mc:edit="header_image" mc:allowdesigner mc:allowtext />
378 | <!-- // End Module: Standard Header Image \\ -->
379 |
380 | </td>
381 | </tr>
382 | </table>
383 | <!-- // End Template Header \\ -->
384 | </td>
385 | </tr>
386 | <tr>
387 | <td align="center" valign="top">
388 | <!-- // Begin Template Body \\ -->
389 | <table border="0" cellpadding="0" cellspacing="0" width="320" id="templateBody">
390 | <tr>
391 | <td valign="top" class="bodyContent">
392 |
393 | <!-- // Begin Module: Standard Postcard Content \\ -->
394 | <table border="0" cellpadding="20" cellspacing="0" width="100%">
395 | <tr mc:repeatable>
396 | <td valign="top">
397 | <div mc:edit="photoblog_heading00">
398 | <h1 class="h1">Heading 1</h1>
399 | </div>
400 | <img src="http://gallery.mailchimp.com/653153ae841fd11de66ad181a/images/placeholder_280.gif" style="max-width:560px;" mc:label="postcard_image" mc:edit="postcard_image" />
401 | <div mc:edit="std_content00">
402 | <h1 class="h1">Heading 1</h1>
403 | <h2 class="h2">Heading 2</h2>
404 | <h3 class="h3">Heading 3</h3>
405 | <h4 class="h4">Heading 4</h4>
406 | <strong>Getting started:</strong> Customize your template by clicking on the style editor tabs up above. Set your fonts, colors, and styles. After setting your styling is all done you can click here in this area, delete the text, and start adding your own awesome content!
407 | <br />
408 | <br />
409 | After you enter your content, highlight the text you want to style and select the options you set in the style editor in the "styles" drop down box. Want to <a href="http://www.mailchimp.com/kb/article/im-using-the-style-designer-and-i-cant-get-my-formatting-to-change" target="_blank">get rid of styling on a bit of text</a>, but having trouble doing it? Just use the "remove formatting" button to strip the text of any formatting and reset your style.
410 | <br />
411 | <br />
412 | <strong>Repeatable content blocks:</strong> Repeatable sections are noted with plus and minus signs so that you can add and subtract content blocks. You can also <a href="http://www.mailchimp.com/kb/article/how-do-i-work-with-repeatable-content-blocks" target="_blank">get a little fancy</a>: repeat blocks and remove all text to make image "gallery" sections, or do the opposite and remove images for text-only blocks! </div>
413 | </td>
414 | </tr>
415 | </table>
416 | <!-- // End Module: Standard Postcard Content \\ -->
417 |
418 | </td>
419 | </tr>
420 | </table>
421 | <!-- // End Template Body \\ -->
422 | </td>
423 | </tr>
424 | <tr>
425 | <td align="center" valign="top">
426 | <!-- // Begin Template Footer \\ -->
427 | <table border="0" cellpadding="10" cellspacing="0" width="320" id="templateFooter">
428 | <tr>
429 | <td valign="top" class="footerContent">
430 |
431 | <!-- // Begin Module: Standard Footer \\ -->
432 | <table border="0" cellpadding="10" cellspacing="0" width="100%">
433 | <tr>
434 | <td colspan="2" valign="middle" id="social">
435 | <div mc:edit="std_social">
436 | <a href="*|TWITTER:PROFILEURL|*">follow on Twitter</a> <br /> <a href="*|FACEBOOK:PROFILEURL|*">friend on Facebook</a> <br /> <a href="*|FORWARD|*">forward to a friend</a>
437 | </div>
438 | </td>
439 | </tr>
440 | <tr>
441 | <td valign="top" width="100%">
442 | <br />
443 | <div mc:edit="std_footer">
444 | <em>Copyright © *|CURRENT_YEAR|* *|LIST:COMPANY|*, All rights reserved.</em>
445 | <br />
446 | *|IFNOT:ARCHIVE_PAGE|* *|LIST:DESCRIPTION|*
447 | <br />
448 | <strong>Our mailing address is:</strong>
449 | <br />
450 | *|HTML:LIST_ADDRESS_HTML|**|END:IF|*
451 | </div>
452 | <br />
453 | <div id="monkeyRewards" mc:edit="monkeyrewards">
454 | *|IF:REWARDS|* *|HTML:REWARDS|* *|END:IF|*
455 | </div>
456 | </td>
457 | </tr>
458 | <tr>
459 | <td colspan="2" valign="middle" id="utility">
460 | <div mc:edit="std_utility">
461 | <a href="*|UNSUB|*">unsubscribe from this list</a> | <a href="*|UPDATE_PROFILE|*">update subscription preferences</a>
462 | </div>
463 | </td>
464 | </tr>
465 | </table>
466 | <!-- // End Module: Standard Footer \\ -->
467 |
468 | </td>
469 | </tr>
470 | </table>
471 | <!-- // End Template Footer \\ -->
472 | </td>
473 | </tr>
474 | </table>
475 | <br />
476 | </td>
477 | </tr>
478 | </table>
479 | </center>
480 | </body>
481 | </html>
--------------------------------------------------------------------------------
/templates/simple-basic.html:
--------------------------------------------------------------------------------
1 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 | <html>
3 | <head>
4 | <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
5 |
6 | <!-- Facebook sharing information tags -->
7 | <meta property="og:title" content="*|MC:SUBJECT|*" />
8 |
9 | <title>*|MC:SUBJECT|*</title>
10 | <style type="text/css">
11 | /* Client-specific Styles */
12 | #outlook a{padding:0;} /* Force Outlook to provide a "view in browser" button. */
13 | body{width:100% !important;} .ReadMsgBody{width:100%;} .ExternalClass{width:100%;} /* Force Hotmail to display emails at full width */
14 | body{-webkit-text-size-adjust:none;} /* Prevent Webkit platforms from changing default text sizes. */
15 |
16 | /* Reset Styles */
17 | body{margin:0; padding:0;}
18 | img{border:0; height:auto; line-height:100%; outline:none; text-decoration:none;}
19 | table td{border-collapse:collapse;}
20 | #backgroundTable{height:100% !important; margin:0; padding:0; width:100% !important;}
21 |
22 | /* Template Styles */
23 |
24 | /* /\/\/\/\/\/\/\/\/\/\ STANDARD STYLING: COMMON PAGE ELEMENTS /\/\/\/\/\/\/\/\/\/\ */
25 |
26 | /**
27 | * @tab Page
28 | * @section background color
29 | * @tip Set the background color for your email. You may want to choose one that matches your company's branding.
30 | * @theme page
31 | */
32 | body, #backgroundTable{
33 | /*@editable*/ background-color:#FAFAFA;
34 | }
35 |
36 | /**
37 | * @tab Page
38 | * @section email border
39 | * @tip Set the border for your email.
40 | */
41 | #templateContainer{
42 | /*@editable*/ border: 1px solid #DDDDDD;
43 | }
44 |
45 | /**
46 | * @tab Page
47 | * @section heading 1
48 | * @tip Set the styling for all first-level headings in your emails. These should be the largest of your headings.
49 | * @style heading 1
50 | */
51 | h1, .h1{
52 | /*@editable*/ color:#202020;
53 | display:block;
54 | /*@editable*/ font-family:Arial;
55 | /*@editable*/ font-size:34px;
56 | /*@editable*/ font-weight:bold;
57 | /*@editable*/ line-height:100%;
58 | margin-top:0;
59 | margin-right:0;
60 | margin-bottom:10px;
61 | margin-left:0;
62 | /*@editable*/ text-align:left;
63 | }
64 |
65 | /**
66 | * @tab Page
67 | * @section heading 2
68 | * @tip Set the styling for all second-level headings in your emails.
69 | * @style heading 2
70 | */
71 | h2, .h2{
72 | /*@editable*/ color:#202020;
73 | display:block;
74 | /*@editable*/ font-family:Arial;
75 | /*@editable*/ font-size:30px;
76 | /*@editable*/ font-weight:bold;
77 | /*@editable*/ line-height:100%;
78 | margin-top:0;
79 | margin-right:0;
80 | margin-bottom:10px;
81 | margin-left:0;
82 | /*@editable*/ text-align:left;
83 | }
84 |
85 | /**
86 | * @tab Page
87 | * @section heading 3
88 | * @tip Set the styling for all third-level headings in your emails.
89 | * @style heading 3
90 | */
91 | h3, .h3{
92 | /*@editable*/ color:#202020;
93 | display:block;
94 | /*@editable*/ font-family:Arial;
95 | /*@editable*/ font-size:26px;
96 | /*@editable*/ font-weight:bold;
97 | /*@editable*/ line-height:100%;
98 | margin-top:0;
99 | margin-right:0;
100 | margin-bottom:10px;
101 | margin-left:0;
102 | /*@editable*/ text-align:left;
103 | }
104 |
105 | /**
106 | * @tab Page
107 | * @section heading 4
108 | * @tip Set the styling for all fourth-level headings in your emails. These should be the smallest of your headings.
109 | * @style heading 4
110 | */
111 | h4, .h4{
112 | /*@editable*/ color:#202020;
113 | display:block;
114 | /*@editable*/ font-family:Arial;
115 | /*@editable*/ font-size:22px;
116 | /*@editable*/ font-weight:bold;
117 | /*@editable*/ line-height:100%;
118 | margin-top:0;
119 | margin-right:0;
120 | margin-bottom:10px;
121 | margin-left:0;
122 | /*@editable*/ text-align:left;
123 | }
124 |
125 | /* /\/\/\/\/\/\/\/\/\/\ STANDARD STYLING: PREHEADER /\/\/\/\/\/\/\/\/\/\ */
126 |
127 | /**
128 | * @tab Header
129 | * @section preheader style
130 | * @tip Set the background color for your email's preheader area.
131 | * @theme page
132 | */
133 | #templatePreheader{
134 | /*@editable*/ background-color:#FAFAFA;
135 | }
136 |
137 | /**
138 | * @tab Header
139 | * @section preheader text
140 | * @tip Set the styling for your email's preheader text. Choose a size and color that is easy to read.
141 | */
142 | .preheaderContent div{
143 | /*@editable*/ color:#505050;
144 | /*@editable*/ font-family:Arial;
145 | /*@editable*/ font-size:10px;
146 | /*@editable*/ line-height:100%;
147 | /*@editable*/ text-align:left;
148 | }
149 |
150 | /**
151 | * @tab Header
152 | * @section preheader link
153 | * @tip Set the styling for your email's preheader links. Choose a color that helps them stand out from your text.
154 | */
155 | .preheaderContent div a:link, .preheaderContent div a:visited, /* Yahoo! Mail Override */ .preheaderContent div a .yshortcuts /* Yahoo! Mail Override */{
156 | /*@editable*/ color:#336699;
157 | /*@editable*/ font-weight:normal;
158 | /*@editable*/ text-decoration:underline;
159 | }
160 |
161 | /* /\/\/\/\/\/\/\/\/\/\ STANDARD STYLING: HEADER /\/\/\/\/\/\/\/\/\/\ */
162 |
163 | /**
164 | * @tab Header
165 | * @section header style
166 | * @tip Set the background color and border for your email's header area.
167 | * @theme header
168 | */
169 | #templateHeader{
170 | /*@editable*/ background-color:#FFFFFF;
171 | /*@editable*/ border-bottom:0;
172 | }
173 |
174 | /**
175 | * @tab Header
176 | * @section header text
177 | * @tip Set the styling for your email's header text. Choose a size and color that is easy to read.
178 | */
179 | .headerContent{
180 | /*@editable*/ color:#202020;
181 | /*@editable*/ font-family:Arial;
182 | /*@editable*/ font-size:34px;
183 | /*@editable*/ font-weight:bold;
184 | /*@editable*/ line-height:100%;
185 | /*@editable*/ padding:0;
186 | /*@editable*/ text-align:center;
187 | /*@editable*/ vertical-align:middle;
188 | }
189 |
190 | /**
191 | * @tab Header
192 | * @section header link
193 | * @tip Set the styling for your email's header links. Choose a color that helps them stand out from your text.
194 | */
195 | .headerContent a:link, .headerContent a:visited, /* Yahoo! Mail Override */ .headerContent a .yshortcuts /* Yahoo! Mail Override */{
196 | /*@editable*/ color:#336699;
197 | /*@editable*/ font-weight:normal;
198 | /*@editable*/ text-decoration:underline;
199 | }
200 |
201 | #headerImage{
202 | height:auto;
203 | max-width:600px !important;
204 | }
205 |
206 | /* /\/\/\/\/\/\/\/\/\/\ STANDARD STYLING: MAIN BODY /\/\/\/\/\/\/\/\/\/\ */
207 |
208 | /**
209 | * @tab Body
210 | * @section body style
211 | * @tip Set the background color for your email's body area.
212 | */
213 | #templateContainer, .bodyContent{
214 | /*@editable*/ background-color:#FFFFFF;
215 | }
216 |
217 | /**
218 | * @tab Body
219 | * @section body text
220 | * @tip Set the styling for your email's main content text. Choose a size and color that is easy to read.
221 | * @theme main
222 | */
223 | .bodyContent div{
224 | /*@editable*/ color:#505050;
225 | /*@editable*/ font-family:Arial;
226 | /*@editable*/ font-size:14px;
227 | /*@editable*/ line-height:150%;
228 | /*@editable*/ text-align:left;
229 | }
230 |
231 | /**
232 | * @tab Body
233 | * @section body link
234 | * @tip Set the styling for your email's main content links. Choose a color that helps them stand out from your text.
235 | */
236 | .bodyContent div a:link, .bodyContent div a:visited, /* Yahoo! Mail Override */ .bodyContent div a .yshortcuts /* Yahoo! Mail Override */{
237 | /*@editable*/ color:#336699;
238 | /*@editable*/ font-weight:normal;
239 | /*@editable*/ text-decoration:underline;
240 | }
241 |
242 | .bodyContent img{
243 | display:inline;
244 | height:auto;
245 | }
246 |
247 | /* /\/\/\/\/\/\/\/\/\/\ STANDARD STYLING: FOOTER /\/\/\/\/\/\/\/\/\/\ */
248 |
249 | /**
250 | * @tab Footer
251 | * @section footer style
252 | * @tip Set the background color and top border for your email's footer area.
253 | * @theme footer
254 | */
255 | #templateFooter{
256 | /*@editable*/ background-color:#FFFFFF;
257 | /*@editable*/ border-top:0;
258 | }
259 |
260 | /**
261 | * @tab Footer
262 | * @section footer text
263 | * @tip Set the styling for your email's footer text. Choose a size and color that is easy to read.
264 | * @theme footer
265 | */
266 | .footerContent div{
267 | /*@editable*/ color:#707070;
268 | /*@editable*/ font-family:Arial;
269 | /*@editable*/ font-size:12px;
270 | /*@editable*/ line-height:125%;
271 | /*@editable*/ text-align:left;
272 | }
273 |
274 | /**
275 | * @tab Footer
276 | * @section footer link
277 | * @tip Set the styling for your email's footer links. Choose a color that helps them stand out from your text.
278 | */
279 | .footerContent div a:link, .footerContent div a:visited, /* Yahoo! Mail Override */ .footerContent div a .yshortcuts /* Yahoo! Mail Override */{
280 | /*@editable*/ color:#336699;
281 | /*@editable*/ font-weight:normal;
282 | /*@editable*/ text-decoration:underline;
283 | }
284 |
285 | .footerContent img{
286 | display:inline;
287 | }
288 |
289 | /**
290 | * @tab Footer
291 | * @section social bar style
292 | * @tip Set the background color and border for your email's footer social bar.
293 | * @theme footer
294 | */
295 | #social{
296 | /*@editable*/ background-color:#FAFAFA;
297 | /*@editable*/ border:0;
298 | }
299 |
300 | /**
301 | * @tab Footer
302 | * @section social bar style
303 | * @tip Set the background color and border for your email's footer social bar.
304 | */
305 | #social div{
306 | /*@editable*/ text-align:center;
307 | }
308 |
309 | /**
310 | * @tab Footer
311 | * @section utility bar style
312 | * @tip Set the background color and border for your email's footer utility bar.
313 | * @theme footer
314 | */
315 | #utility{
316 | /*@editable*/ background-color:#FFFFFF;
317 | /*@editable*/ border:0;
318 | }
319 |
320 | /**
321 | * @tab Footer
322 | * @section utility bar style
323 | * @tip Set the background color and border for your email's footer utility bar.
324 | */
325 | #utility div{
326 | /*@editable*/ text-align:center;
327 | }
328 |
329 | #monkeyRewards img{
330 | max-width:190px;
331 | }
332 | </style>
333 | </head>
334 | <body leftmargin="0" marginwidth="0" topmargin="0" marginheight="0" offset="0">
335 | <center>
336 | <table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" id="backgroundTable">
337 | <tr>
338 | <td align="center" valign="top">
339 | <!-- // Begin Template Preheader \\ -->
340 | <table border="0" cellpadding="10" cellspacing="0" width="600" id="templatePreheader">
341 | <tr>
342 | <td valign="top" class="preheaderContent">
343 |
344 | <!-- // Begin Module: Standard Preheader \ -->
345 | <table border="0" cellpadding="10" cellspacing="0" width="100%">
346 | <tr>
347 | <td valign="top">
348 | <div mc:edit="std_preheader_content">
349 | Use this area to offer a short teaser of your email's content. Text here will show in the preview area of some email clients.
350 | </div>
351 | </td>
352 | <!-- *|IFNOT:ARCHIVE_PAGE|* -->
353 | <td valign="top" width="190">
354 | <div mc:edit="std_preheader_links">
355 | Is this email not displaying correctly?<br /><a href="*|ARCHIVE|*" target="_blank">View it in your browser</a>.
356 | </div>
357 | </td>
358 | <!-- *|END:IF|* -->
359 | </tr>
360 | </table>
361 | <!-- // End Module: Standard Preheader \ -->
362 |
363 | </td>
364 | </tr>
365 | </table>
366 | <!-- // End Template Preheader \\ -->
367 | <table border="0" cellpadding="0" cellspacing="0" width="600" id="templateContainer">
368 | <tr>
369 | <td align="center" valign="top">
370 | <!-- // Begin Template Header \\ -->
371 | <table border="0" cellpadding="0" cellspacing="0" width="600" id="templateHeader">
372 | <tr>
373 | <td class="headerContent">
374 |
375 | <!-- // Begin Module: Standard Header Image \\ -->
376 | <img src="http://gallery.mailchimp.com/653153ae841fd11de66ad181a/images/placeholder_600.gif" style="max-width:600px;" id="headerImage campaign-icon" mc:label="header_image" mc:edit="header_image" mc:allowdesigner mc:allowtext />
377 | <!-- // End Module: Standard Header Image \\ -->
378 |
379 | </td>
380 | </tr>
381 | </table>
382 | <!-- // End Template Header \\ -->
383 | </td>
384 | </tr>
385 | <tr>
386 | <td align="center" valign="top">
387 | <!-- // Begin Template Body \\ -->
388 | <table border="0" cellpadding="0" cellspacing="0" width="600" id="templateBody">
389 | <tr>
390 | <td valign="top" class="bodyContent">
391 |
392 | <!-- // Begin Module: Standard Content \\ -->
393 | <table border="0" cellpadding="20" cellspacing="0" width="100%">
394 | <tr>
395 | <td valign="top">
396 | <div mc:edit="std_content00">
397 | <h1 class="h1">Heading 1</h1>
398 | <h2 class="h2">Heading 2</h2>
399 | <h3 class="h3">Heading 3</h3>
400 | <h4 class="h4">Heading 4</h4>
401 | <strong>Getting started:</strong> Customize your template by clicking on the style editor tabs up above. Set your fonts, colors, and styles. After setting your styling is all done you can click here in this area, delete the text, and start adding your own awesome content!
402 | <br />
403 | <br />
404 | After you enter your content, highlight the text you want to style and select the options you set in the style editor in the "styles" drop down box. Want to <a href="http://www.mailchimp.com/kb/article/im-using-the-style-designer-and-i-cant-get-my-formatting-to-change" target="_blank">get rid of styling on a bit of text</a>, but having trouble doing it? Just use the "remove formatting" button to strip the text of any formatting and reset your style.
405 | </div>
406 | </td>
407 | </tr>
408 | </table>
409 | <!-- // End Module: Standard Content \\ -->
410 |
411 | </td>
412 | </tr>
413 | </table>
414 | <!-- // End Template Body \\ -->
415 | </td>
416 | </tr>
417 | <tr>
418 | <td align="center" valign="top">
419 | <!-- // Begin Template Footer \\ -->
420 | <table border="0" cellpadding="10" cellspacing="0" width="600" id="templateFooter">
421 | <tr>
422 | <td valign="top" class="footerContent">
423 |
424 | <!-- // Begin Module: Standard Footer \\ -->
425 | <table border="0" cellpadding="10" cellspacing="0" width="100%">
426 | <tr>
427 | <td colspan="2" valign="middle" id="social">
428 | <div mc:edit="std_social">
429 | <a href="*|TWITTER:PROFILEURL|*">follow on Twitter</a> | <a href="*|FACEBOOK:PROFILEURL|*">friend on Facebook</a> | <a href="*|FORWARD|*">forward to a friend</a>
430 | </div>
431 | </td>
432 | </tr>
433 | <tr>
434 | <td valign="top" width="350">
435 | <div mc:edit="std_footer">
436 | <em>Copyright © *|CURRENT_YEAR|* *|LIST:COMPANY|*, All rights reserved.</em>
437 | <br />
438 | *|IFNOT:ARCHIVE_PAGE|* *|LIST:DESCRIPTION|*
439 | <br />
440 | <strong>Our mailing address is:</strong>
441 | <br />
442 | *|HTML:LIST_ADDRESS_HTML|**|END:IF|*
443 | </div>
444 | </td>
445 | <td valign="top" width="190" id="monkeyRewards">
446 | <div mc:edit="monkeyrewards">
447 | *|IF:REWARDS|* *|HTML:REWARDS|* *|END:IF|*
448 | </div>
449 | </td>
450 | </tr>
451 | <tr>
452 | <td colspan="2" valign="middle" id="utility">
453 | <div mc:edit="std_utility">
454 | <a href="*|UNSUB|*">unsubscribe from this list</a> | <a href="*|UPDATE_PROFILE|*">update subscription preferences</a>
455 | </div>
456 | </td>
457 | </tr>
458 | </table>
459 | <!-- // End Module: Standard Footer \\ -->
460 |
461 | </td>
462 | </tr>
463 | </table>
464 | <!-- // End Template Footer \\ -->
465 | </td>
466 | </tr>
467 | </table>
468 | <br />
469 | </td>
470 | </tr>
471 | </table>
472 | </center>
473 | </body>
474 | </html>
--------------------------------------------------------------------------------
/templates/simple-letterhead-centerlogo.html:
--------------------------------------------------------------------------------
1 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 | <html>
3 | <head>
4 | <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
5 | <title>*|MC:SUBJECT|*</title>
6 | <style type="text/css">
7 | /* Client-specific Styles */
8 | #outlook a{padding:0;} /* Force Outlook to provide a "view in browser" button. */
9 | body{width:100% !important;} .ReadMsgBody{width:100%;} .ExternalClass{width:100%;} /* Force Hotmail to display emails at full width */
10 | body{-webkit-text-size-adjust:none;} /* Prevent Webkit platforms from changing default text sizes. */
11 |
12 | /* Reset Styles */
13 | body{margin:0; padding:0;}
14 | img{border:0; height:auto; line-height:100%; outline:none; text-decoration:none;}
15 | table td{border-collapse:collapse;}
16 | #backgroundTable{height:100% !important; margin:0; padding:0; width:100% !important;}
17 |
18 | /* Template Styles */
19 |
20 | /* /\/\/\/\/\/\/\/\/\/\ STANDARD STYLING: COMMON PAGE ELEMENTS /\/\/\/\/\/\/\/\/\/\ */
21 |
22 | /**
23 | * @tab Page
24 | * @section background color
25 | * @tip Set the background color for your email. You may want to choose one that matches your company's branding.
26 | * @theme page
27 | */
28 | body, #backgroundTable{
29 | /*@editable*/ background-color:#FAFAFA;
30 | }
31 |
32 | /**
33 | * @tab Page
34 | * @section email border
35 | * @tip Set the border for your email.
36 | */
37 | #templateContainer{
38 | /*@editable*/ border:0;
39 | }
40 |
41 | /**
42 | * @tab Page
43 | * @section heading 1
44 | * @tip Set the styling for all first-level headings in your emails. These should be the largest of your headings.
45 | * @style heading 1
46 | */
47 | h1, .h1{
48 | /*@editable*/ color:#202020;
49 | display:block;
50 | /*@editable*/ font-family:Arial;
51 | /*@editable*/ font-size:40px;
52 | /*@editable*/ font-weight:bold;
53 | /*@editable*/ line-height:100%;
54 | margin-top:2%;
55 | margin-right:0;
56 | margin-bottom:1%;
57 | margin-left:0;
58 | /*@editable*/ text-align:left;
59 | }
60 |
61 | /**
62 | * @tab Page
63 | * @section heading 2
64 | * @tip Set the styling for all second-level headings in your emails.
65 | * @style heading 2
66 | */
67 | h2, .h2{
68 | /*@editable*/ color:#404040;
69 | display:block;
70 | /*@editable*/ font-family:Arial;
71 | /*@editable*/ font-size:18px;
72 | /*@editable*/ font-weight:bold;
73 | /*@editable*/ line-height:100%;
74 | margin-top:2%;
75 | margin-right:0;
76 | margin-bottom:1%;
77 | margin-left:0;
78 | /*@editable*/ text-align:left;
79 | }
80 |
81 | /**
82 | * @tab Page
83 | * @section heading 3
84 | * @tip Set the styling for all third-level headings in your emails.
85 | * @style heading 3
86 | */
87 | h3, .h3{
88 | /*@editable*/ color:#606060;
89 | display:block;
90 | /*@editable*/ font-family:Arial;
91 | /*@editable*/ font-size:16px;
92 | /*@editable*/ font-weight:bold;
93 | /*@editable*/ line-height:100%;
94 | margin-top:2%;
95 | margin-right:0;
96 | margin-bottom:1%;
97 | margin-left:0;
98 | /*@editable*/ text-align:left;
99 | }
100 |
101 | /**
102 | * @tab Page
103 | * @section heading 4
104 | * @tip Set the styling for all fourth-level headings in your emails. These should be the smallest of your headings.
105 | * @style heading 4
106 | */
107 | h4, .h4{
108 | /*@editable*/ color:#808080;
109 | display:block;
110 | /*@editable*/ font-family:Arial;
111 | /*@editable*/ font-size:14px;
112 | /*@editable*/ font-weight:bold;
113 | /*@editable*/ line-height:100%;
114 | margin-top:2%;
115 | margin-right:0;
116 | margin-bottom:1%;
117 | margin-left:0;
118 | /*@editable*/ text-align:left;
119 | }
120 |
121 | /* /\/\/\/\/\/\/\/\/\/\ STANDARD STYLING: PREHEADER /\/\/\/\/\/\/\/\/\/\ */
122 |
123 | /**
124 | * @tab Header
125 | * @section preheader style
126 | * @tip Set the background color for your email's preheader area.
127 | * @theme page
128 | */
129 | #templatePreheader{
130 | /*@editable*/ background-color:#FAFAFA;
131 | }
132 |
133 | /**
134 | * @tab Header
135 | * @section preheader text
136 | * @tip Set the styling for your email's preheader text. Choose a size and color that is easy to read.
137 | */
138 | .preheaderContent div{
139 | /*@editable*/ color:#707070;
140 | /*@editable*/ font-family:Arial;
141 | /*@editable*/ font-size:10px;
142 | /*@editable*/ line-height:100%;
143 | /*@editable*/ text-align:left;
144 | }
145 |
146 | /**
147 | * @tab Header
148 | * @section preheader link
149 | * @tip Set the styling for your email's preheader links. Choose a color that helps them stand out from your text.
150 | */
151 | .preheaderContent div a:link, .preheaderContent div a:visited, /* Yahoo! Mail Override */ .preheaderContent div a .yshortcuts /* Yahoo! Mail Override */{
152 | /*@editable*/ color:#336699;
153 | /*@editable*/ font-weight:normal;
154 | /*@editable*/ text-decoration:underline;
155 | }
156 |
157 | /**
158 | * @tab Header
159 | * @section social bar style
160 | * @tip Set the background color and border for your email's footer social bar.
161 | */
162 | #social div{
163 | /*@editable*/ text-align:right;
164 | }
165 |
166 | /* /\/\/\/\/\/\/\/\/\/\ STANDARD STYLING: HEADER /\/\/\/\/\/\/\/\/\/\ */
167 |
168 | /**
169 | * @tab Header
170 | * @section header style
171 | * @tip Set the background color and border for your email's header area.
172 | * @theme header
173 | */
174 | #templateHeader{
175 | /*@editable*/ background-color:#FFFFFF;
176 | /*@editable*/ border-bottom:5px solid #505050;
177 | }
178 |
179 | /**
180 | * @tab Header
181 | * @section left header text
182 | * @tip Set the styling for your email's header text. Choose a size and color that is easy to read.
183 | */
184 | .leftHeaderContent div{
185 | /*@editable*/ color:#202020;
186 | /*@editable*/ font-family:Arial;
187 | /*@editable*/ font-size:32px;
188 | /*@editable*/ font-weight:bold;
189 | /*@editable*/ line-height:100%;
190 | /*@editable*/ text-align:right;
191 | /*@editable*/ vertical-align:middle;
192 | }
193 |
194 | /**
195 | * @tab Header
196 | * @section right header text
197 | * @tip Set the styling for your email's header text. Choose a size and color that is easy to read.
198 | */
199 | .rightHeaderContent div{
200 | /*@editable*/ color:#202020;
201 | /*@editable*/ font-family:Arial;
202 | /*@editable*/ font-size:32px;
203 | /*@editable*/ font-weight:bold;
204 | /*@editable*/ line-height:100%;
205 | /*@editable*/ text-align:left;
206 | /*@editable*/ vertical-align:middle;
207 | }
208 |
209 | /**
210 | * @tab Header
211 | * @section header link
212 | * @tip Set the styling for your email's header links. Choose a color that helps them stand out from your text.
213 | */
214 | .leftHeaderContent div a:link, .leftHeaderContent div a:visited, .rightHeaderContent div a:link, .rightHeaderContent div a:visited{
215 | /*@editable*/ color:#336699;
216 | /*@editable*/ font-weight:normal;
217 | /*@editable*/ text-decoration:underline;
218 | }
219 |
220 | #headerImage{
221 | height:auto;
222 | max-width:180px !important;
223 | }
224 |
225 | /* /\/\/\/\/\/\/\/\/\/\ STANDARD STYLING: MAIN BODY /\/\/\/\/\/\/\/\/\/\ */
226 |
227 | /**
228 | * @tab Body
229 | * @section body style
230 | * @tip Set the background color for your email's body area.
231 | */
232 | #templateContainer, .bodyContent{
233 | /*@editable*/ background-color:#FDFDFD;
234 | }
235 |
236 | /**
237 | * @tab Body
238 | * @section body text
239 | * @tip Set the styling for your email's main content text. Choose a size and color that is easy to read.
240 | * @theme main
241 | */
242 | .bodyContent div{
243 | /*@editable*/ color:#505050;
244 | /*@editable*/ font-family:Arial;
245 | /*@editable*/ font-size:14px;
246 | /*@editable*/ line-height:150%;
247 | /*@editable*/ text-align:left;
248 | }
249 |
250 | /**
251 | * @tab Body
252 | * @section body link
253 | * @tip Set the styling for your email's main content links. Choose a color that helps them stand out from your text.
254 | */
255 | .bodyContent div a:link, .bodyContent div a:visited, /* Yahoo! Mail Override */ .bodyContent div a .yshortcuts /* Yahoo! Mail Override */{
256 | /*@editable*/ color:#336699;
257 | /*@editable*/ font-weight:normal;
258 | /*@editable*/ text-decoration:underline;
259 | }
260 |
261 | .bodyContent img{
262 | display:inline;
263 | height:auto;
264 | }
265 |
266 | /* /\/\/\/\/\/\/\/\/\/\ STANDARD STYLING: FOOTER /\/\/\/\/\/\/\/\/\/\ */
267 |
268 | /**
269 | * @tab Footer
270 | * @section footer style
271 | * @tip Set the background color and top border for your email's footer area.
272 | * @theme footer
273 | */
274 | #templateFooter{
275 | /*@editable*/ background-color:#FAFAFA;
276 | /*@editable*/ border-top:3px solid #909090;
277 | }
278 |
279 | /**
280 | * @tab Footer
281 | * @section footer text
282 | * @tip Set the styling for your email's footer text. Choose a size and color that is easy to read.
283 | * @theme footer
284 | */
285 | .footerContent div{
286 | /*@editable*/ color:#707070;
287 | /*@editable*/ font-family:Arial;
288 | /*@editable*/ font-size:11px;
289 | /*@editable*/ line-height:125%;
290 | /*@editable*/ text-align:left;
291 | }
292 |
293 | /**
294 | * @tab Footer
295 | * @section footer link
296 | * @tip Set the styling for your email's footer links. Choose a color that helps them stand out from your text.
297 | */
298 | .footerContent div a:link, .footerContent div a:visited, /* Yahoo! Mail Override */ .footerContent div a .yshortcuts /* Yahoo! Mail Override */{
299 | /*@editable*/ color:#336699;
300 | /*@editable*/ font-weight:normal;
301 | /*@editable*/ text-decoration:underline;
302 | }
303 |
304 | .footerContent img{
305 | display:inline;
306 | }
307 |
308 | /**
309 | * @tab Footer
310 | * @section social bar style
311 | * @tip Set the background color and border for your email's footer social bar.
312 | * @theme footer
313 | */
314 | #social{
315 | /*@editable*/ background-color:#FFFFFF;
316 | /*@editable*/ border:0;
317 | }
318 |
319 | /**
320 | * @tab Footer
321 | * @section social bar style
322 | * @tip Set the background color and border for your email's footer social bar.
323 | */
324 | #social div{
325 | /*@editable*/ text-align:left;
326 | }
327 |
328 | /**
329 | * @tab Footer
330 | * @section utility bar style
331 | * @tip Set the background color and border for your email's footer utility bar.
332 | * @theme footer
333 | */
334 | #utility{
335 | /*@editable*/ background-color:#FAFAFA;
336 | /*@editable*/ border-top:0;
337 | }
338 |
339 | /**
340 | * @tab Footer
341 | * @section utility bar style
342 | * @tip Set the background color and border for your email's footer utility bar.
343 | */
344 | #utility div{
345 | /*@editable*/ text-align:left;
346 | }
347 |
348 | #monkeyRewards img{
349 | max-width:170px !important;
350 | }
351 | </style>
352 | </head>
353 | <body leftmargin="0" marginwidth="0" topmargin="0" marginheight="0" offset="0">
354 | <center>
355 | <table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" id="backgroundTable">
356 | <tr>
357 | <td align="center" valign="top">
358 | <!-- // Begin Template Preheader \\ -->
359 | <table border="0" cellpadding="10" cellspacing="0" width="600" id="templatePreheader">
360 | <tr>
361 | <td valign="top" class="preheaderContent">
362 |
363 | <!-- // Begin Module: Standard Preheader \ -->
364 | <table border="0" cellpadding="10" cellspacing="0" width="100%">
365 | <tr>
366 | <td valign="top">
367 | <div mc:edit="std_preheader_content">
368 | Use this area to offer a short teaser of your email's content. Text here will show in the preview area of some email clients.
369 | </div>
370 | </td>
371 | <!-- *|IFNOT:ARCHIVE_PAGE|* -->
372 | <td valign="top" width="170">
373 | <div mc:edit="std_preheader_links">
374 | Email not displaying correctly?<br /><a href="*|ARCHIVE|*" target="_blank">View it in your browser</a>.
375 | </div>
376 | </td>
377 | <!-- *|END:IF|* -->
378 | </tr>
379 | </table>
380 | <!-- // End Module: Standard Preheader \ -->
381 |
382 | </td>
383 | </tr>
384 | </table>
385 | <!-- // End Template Preheader \\ -->
386 | <table border="0" cellpadding="0" cellspacing="0" width="600" id="templateContainer">
387 | <tr>
388 | <td align="center" valign="top">
389 | <!-- // Begin Template Header \\ -->
390 | <table border="0" cellpadding="0" cellspacing="0" width="600" id="templateHeader">
391 | <tr>
392 | <td class="headerContent">
393 |
394 | <!-- // Begin Module: Letterhead, Center Header Image \\ -->
395 | <table border="0" cellpadding="10" cellspacing="0" width="100%">
396 | <tr>
397 | <td class="leftHeaderContent">
398 | <div mc:edit="header_content_left">
399 | Heading 1
400 | </div>
401 | </td>
402 | <td valign="middle" width="180">
403 | <img src="http://gallery.mailchimp.com/27aac8a65e64c994c4416d6b8/images/placeholder_180x100.gif" style="max-width:180px;" id="headerImage campaign-icon" mc:label="header_image" mc:edit="header_image" mc:allowtext />
404 | </td>
405 | <td class="rightHeaderContent">
406 | <div mc:edit="header_content_right">
407 | Heading 1
408 | </div>
409 | </td>
410 | </tr>
411 | </table>
412 | <!-- // End Module: Letterhead, Center Header Image \\ -->
413 |
414 | </td>
415 | </tr>
416 | </table>
417 | <!-- // End Template Header \\ -->
418 | </td>
419 | </tr>
420 | <tr>
421 | <td align="center" valign="top">
422 | <!-- // Begin Template Body \\ -->
423 | <table border="0" cellpadding="10" cellspacing="0" width="600" id="templateBody">
424 | <tr>
425 | <td valign="top" class="bodyContent">
426 |
427 | <!-- // Begin Module: Standard Content \\ -->
428 | <table border="0" cellpadding="10" cellspacing="0" width="100%">
429 | <tr>
430 | <td valign="top">
431 | <div mc:edit="std_content00">
432 | <h2 class="h2">Heading 2</h2>
433 | <h3 class="h3">Heading 3</h3>
434 | <strong>Getting started:</strong> Customize your template by clicking on the style editor tabs up above. Set your fonts, colors, and styles. After setting your styling is all done you can click here in this area, delete the text, and start adding your own awesome content!
435 | <br />
436 | <br />
437 | <h4 class="h4">Heading 4</h4>
438 | After you enter your content, highlight the text you want to style and select the options you set in the style editor in the "styles" drop down box. Want to <a href="http://www.mailchimp.com/kb/article/im-using-the-style-designer-and-i-cant-get-my-formatting-to-change" target="_blank">get rid of styling on a bit of text</a>, but having trouble doing it? Just use the "remove formatting" button to strip the text of any formatting and reset your style.
439 | </div>
440 | </td>
441 | </tr>
442 | </table>
443 | <!-- // End Module: Standard Content \\ -->
444 |
445 | </td>
446 | </tr>
447 | </table>
448 | <!-- // End Template Body \\ -->
449 | </td>
450 | </tr>
451 | <tr>
452 | <td align="center" valign="top">
453 | <!-- // Begin Template Footer \\ -->
454 | <table border="0" cellpadding="0" cellspacing="0" width="600" id="templateFooter">
455 | <tr>
456 | <td valign="top" class="footerContent">
457 |
458 | <!-- // Begin Module: Standard Footer \\ -->
459 | <table border="0" cellpadding="10" cellspacing="0" width="100%">
460 | <tr>
461 | <td colspan="2" valign="middle" id="social">
462 | <div mc:edit="std_social">
463 | <a href="*|TWITTER:PROFILEURL|*">follow on Twitter</a> | <a href="*|FACEBOOK:PROFILEURL|*">friend on Facebook</a> | <a href="*|FORWARD|*">forward to a friend</a>
464 | </div>
465 | </td>
466 | </tr>
467 | <tr>
468 | <td valign="top" width="350">
469 | <div mc:edit="std_footer">
470 | <em>Copyright © *|CURRENT_YEAR|* *|LIST:COMPANY|*, All rights reserved.</em>
471 | <br />
472 | *|IFNOT:ARCHIVE_PAGE|* *|LIST:DESCRIPTION|*
473 | <br />
474 | <strong>Our mailing address is:</strong>
475 | <br />
476 | *|HTML:LIST_ADDRESS_HTML|**|END:IF|*
477 | </div>
478 | </td>
479 | <td valign="top" width="190" id="monkeyRewards">
480 | <div mc:edit="monkeyrewards">
481 | *|IF:REWARDS|* *|HTML:REWARDS|* *|END:IF|*
482 | </div>
483 | </td>
484 | </tr>
485 | <tr>
486 | <td colspan="2" valign="middle" id="utility">
487 | <div mc:edit="std_utility">
488 | <a href="*|UNSUB|*">unsubscribe from this list</a> | <a href="*|UPDATE_PROFILE|*">update subscription preferences</a>
489 | </div>
490 | </td>
491 | </tr>
492 | </table>
493 | <!-- // End Module: Standard Footer \\ -->
494 |
495 | </td>
496 | </tr>
497 | </table>
498 | <!-- // End Template Footer \\ -->
499 | </td>
500 | </tr>
501 | </table>
502 | <br />
503 | </td>
504 | </tr>
505 | </table>
506 | </center>
507 | </body>
508 | </html>
--------------------------------------------------------------------------------
/templates/simple-postcard.html:
--------------------------------------------------------------------------------
1 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 | <html>
3 | <head>
4 | <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
5 |
6 | <!-- Facebook sharing information tags -->
7 | <meta property="og:title" content="*|MC:SUBJECT|*" />
8 |
9 | <title>*|MC:SUBJECT|*</title>
10 | <style type="text/css">
11 | /* Client-specific Styles */
12 | #outlook a{padding:0;} /* Force Outlook to provide a "view in browser" button. */
13 | body{width:100% !important;} .ReadMsgBody{width:100%;} .ExternalClass{width:100%;} /* Force Hotmail to display emails at full width */
14 | body{-webkit-text-size-adjust:none;} /* Prevent Webkit platforms from changing default text sizes. */
15 |
16 | /* Reset Styles */
17 | body{margin:0; padding:0;}
18 | img{border:0; height:auto; line-height:100%; outline:none; text-decoration:none;}
19 | table td{border-collapse:collapse;}
20 | #backgroundTable{height:100% !important; margin:0; padding:0; width:100% !important;}
21 |
22 | /* Template Styles */
23 |
24 | /* /\/\/\/\/\/\/\/\/\/\ STANDARD STYLING: COMMON PAGE ELEMENTS /\/\/\/\/\/\/\/\/\/\ */
25 |
26 | /**
27 | * @tab Page
28 | * @section background color
29 | * @tip Set the background color for your email. You may want to choose one that matches your company's branding.
30 | * @theme page
31 | */
32 | body, #backgroundTable{
33 | /*@editable*/ background-color:#FAFAFA;
34 | }
35 |
36 | /**
37 | * @tab Page
38 | * @section email border
39 | * @tip Set the border for your email.
40 | */
41 | #templateContainer{
42 | /*@editable*/ border: 1px solid #DDDDDD;
43 | }
44 |
45 | /**
46 | * @tab Page
47 | * @section heading 1
48 | * @tip Set the styling for all first-level headings in your emails. These should be the largest of your headings.
49 | * @style heading 1
50 | */
51 | h1, .h1{
52 | /*@editable*/ color:#202020;
53 | display:block;
54 | /*@editable*/ font-family:Arial;
55 | /*@editable*/ font-size:34px;
56 | /*@editable*/ font-weight:bold;
57 | /*@editable*/ line-height:100%;
58 | margin-top:0;
59 | margin-right:0;
60 | margin-bottom:10px;
61 | margin-left:0;
62 | /*@editable*/ text-align:left;
63 | }
64 |
65 | /**
66 | * @tab Page
67 | * @section heading 2
68 | * @tip Set the styling for all second-level headings in your emails.
69 | * @style heading 2
70 | */
71 | h2, .h2{
72 | /*@editable*/ color:#202020;
73 | display:block;
74 | /*@editable*/ font-family:Arial;
75 | /*@editable*/ font-size:30px;
76 | /*@editable*/ font-weight:bold;
77 | /*@editable*/ line-height:100%;
78 | margin-top:0;
79 | margin-right:0;
80 | margin-bottom:10px;
81 | margin-left:0;
82 | /*@editable*/ text-align:left;
83 | }
84 |
85 | /**
86 | * @tab Page
87 | * @section heading 3
88 | * @tip Set the styling for all third-level headings in your emails.
89 | * @style heading 3
90 | */
91 | h3, .h3{
92 | /*@editable*/ color:#202020;
93 | display:block;
94 | /*@editable*/ font-family:Arial;
95 | /*@editable*/ font-size:26px;
96 | /*@editable*/ font-weight:bold;
97 | /*@editable*/ line-height:100%;
98 | margin-top:0;
99 | margin-right:0;
100 | margin-bottom:10px;
101 | margin-left:0;
102 | /*@editable*/ text-align:left;
103 | }
104 |
105 | /**
106 | * @tab Page
107 | * @section heading 4
108 | * @tip Set the styling for all fourth-level headings in your emails. These should be the smallest of your headings.
109 | * @style heading 4
110 | */
111 | h4, .h4{
112 | /*@editable*/ color:#202020;
113 | display:block;
114 | /*@editable*/ font-family:Arial;
115 | /*@editable*/ font-size:22px;
116 | /*@editable*/ font-weight:bold;
117 | /*@editable*/ line-height:100%;
118 | margin-top:0;
119 | margin-right:0;
120 | margin-bottom:10px;
121 | margin-left:0;
122 | /*@editable*/ text-align:left;
123 | }
124 |
125 | /* /\/\/\/\/\/\/\/\/\/\ STANDARD STYLING: PREHEADER /\/\/\/\/\/\/\/\/\/\ */
126 |
127 | /**
128 | * @tab Header
129 | * @section preheader style
130 | * @tip Set the background color for your email's preheader area.
131 | * @theme page
132 | */
133 | #templatePreheader{
134 | /*@editable*/ background-color:#FAFAFA;
135 | }
136 |
137 | /**
138 | * @tab Header
139 | * @section preheader text
140 | * @tip Set the styling for your email's preheader text. Choose a size and color that is easy to read.
141 | */
142 | .preheaderContent div{
143 | /*@editable*/ color:#505050;
144 | /*@editable*/ font-family:Arial;
145 | /*@editable*/ font-size:10px;
146 | /*@editable*/ line-height:100%;
147 | /*@editable*/ text-align:left;
148 | }
149 |
150 | /**
151 | * @tab Header
152 | * @section preheader link
153 | * @tip Set the styling for your email's preheader links. Choose a color that helps them stand out from your text.
154 | */
155 | .preheaderContent div a:link, .preheaderContent div a:visited, /* Yahoo! Mail Override */ .preheaderContent div a .yshortcuts /* Yahoo! Mail Override */{
156 | /*@editable*/ color:#336699;
157 | /*@editable*/ font-weight:normal;
158 | /*@editable*/ text-decoration:underline;
159 | }
160 |
161 |
162 |
163 | /* /\/\/\/\/\/\/\/\/\/\ STANDARD STYLING: HEADER /\/\/\/\/\/\/\/\/\/\ */
164 |
165 | /**
166 | * @tab Header
167 | * @section header style
168 | * @tip Set the background color and border for your email's header area.
169 | * @theme header
170 | */
171 | #templateHeader{
172 | /*@editable*/ background-color:#FFFFFF;
173 | /*@editable*/ border-bottom:0;
174 | }
175 |
176 | /**
177 | * @tab Header
178 | * @section header text
179 | * @tip Set the styling for your email's header text. Choose a size and color that is easy to read.
180 | */
181 | .headerContent{
182 | /*@editable*/ color:#202020;
183 | /*@editable*/ font-family:Arial;
184 | /*@editable*/ font-size:34px;
185 | /*@editable*/ font-weight:bold;
186 | /*@editable*/ line-height:100%;
187 | /*@editable*/ padding:0;
188 | /*@editable*/ text-align:center;
189 | /*@editable*/ vertical-align:middle;
190 | }
191 |
192 | /**
193 | * @tab Header
194 | * @section header link
195 | * @tip Set the styling for your email's header links. Choose a color that helps them stand out from your text.
196 | */
197 | .headerContent a:link, .headerContent a:visited, /* Yahoo! Mail Override */ .headerContent a .yshortcuts /* Yahoo! Mail Override */{
198 | /*@editable*/ color:#336699;
199 | /*@editable*/ font-weight:normal;
200 | /*@editable*/ text-decoration:underline;
201 | }
202 |
203 | #headerImage{
204 | height:auto;
205 | max-width:600px;
206 | }
207 |
208 | /* /\/\/\/\/\/\/\/\/\/\ STANDARD STYLING: MAIN BODY /\/\/\/\/\/\/\/\/\/\ */
209 |
210 | /**
211 | * @tab Body
212 | * @section body style
213 | * @tip Set the background color for your email's body area.
214 | */
215 | #templateContainer, .bodyContent{
216 | /*@editable*/ background-color:#FFFFFF;
217 | }
218 |
219 | /**
220 | * @tab Body
221 | * @section body text
222 | * @tip Set the styling for your email's main content text. Choose a size and color that is easy to read.
223 | * @theme main
224 | */
225 | .bodyContent div{
226 | /*@editable*/ color:#505050;
227 | /*@editable*/ font-family:Arial;
228 | /*@editable*/ font-size:14px;
229 | /*@editable*/ line-height:150%;
230 | /*@editable*/ text-align:left;
231 | }
232 |
233 | /**
234 | * @tab Body
235 | * @section body link
236 | * @tip Set the styling for your email's main content links. Choose a color that helps them stand out from your text.
237 | */
238 | .bodyContent div a:link, .bodyContent div a:visited, /* Yahoo! Mail Override */ .bodyContent div a .yshortcuts /* Yahoo! Mail Override */{
239 | /*@editable*/ color:#336699;
240 | /*@editable*/ font-weight:normal;
241 | /*@editable*/ text-decoration:underline;
242 | }
243 |
244 | .bodyContent img{
245 | display:inline;
246 | height:auto;
247 | }
248 |
249 | /* /\/\/\/\/\/\/\/\/\/\ STANDARD STYLING: FOOTER /\/\/\/\/\/\/\/\/\/\ */
250 |
251 | /**
252 | * @tab Footer
253 | * @section footer style
254 | * @tip Set the background color and top border for your email's footer area.
255 | * @theme footer
256 | */
257 | #templateFooter{
258 | /*@editable*/ background-color:#FFFFFF;
259 | /*@editable*/ border-top:0;
260 | }
261 |
262 | /**
263 | * @tab Footer
264 | * @section footer text
265 | * @tip Set the styling for your email's footer text. Choose a size and color that is easy to read.
266 | * @theme footer
267 | */
268 | .footerContent div{
269 | /*@editable*/ color:#707070;
270 | /*@editable*/ font-family:Arial;
271 | /*@editable*/ font-size:12px;
272 | /*@editable*/ line-height:125%;
273 | /*@editable*/ text-align:left;
274 | }
275 |
276 | /**
277 | * @tab Footer
278 | * @section footer link
279 | * @tip Set the styling for your email's footer links. Choose a color that helps them stand out from your text.
280 | */
281 | .footerContent div a:link, .footerContent div a:visited, /* Yahoo! Mail Override */ .footerContent div a .yshortcuts /* Yahoo! Mail Override */{
282 | /*@editable*/ color:#336699;
283 | /*@editable*/ font-weight:normal;
284 | /*@editable*/ text-decoration:underline;
285 | }
286 |
287 | .footerContent img{
288 | display:inline;
289 | }
290 |
291 | /**
292 | * @tab Footer
293 | * @section social bar style
294 | * @tip Set the background color and border for your email's footer social bar.
295 | * @theme footer
296 | */
297 | #social{
298 | /*@editable*/ background-color:#FAFAFA;
299 | /*@editable*/ border:0;
300 | }
301 |
302 | /**
303 | * @tab Footer
304 | * @section social bar style
305 | * @tip Set the background color and border for your email's footer social bar.
306 | */
307 | #social div{
308 | /*@editable*/ text-align:center;
309 | }
310 |
311 | /**
312 | * @tab Footer
313 | * @section utility bar style
314 | * @tip Set the background color and border for your email's footer utility bar.
315 | * @theme footer
316 | */
317 | #utility{
318 | /*@editable*/ background-color:#FFFFFF;
319 | /*@editable*/ border:0;
320 | }
321 |
322 | /**
323 | * @tab Footer
324 | * @section utility bar style
325 | * @tip Set the background color and border for your email's footer utility bar.
326 | */
327 | #utility div{
328 | /*@editable*/ text-align:center;
329 | }
330 |
331 | #monkeyRewards img{
332 | max-width:190px;
333 | }
334 | </style>
335 | </head>
336 | <body leftmargin="0" marginwidth="0" topmargin="0" marginheight="0" offset="0">
337 | <center>
338 | <table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" id="backgroundTable">
339 | <tr>
340 | <td align="center" valign="top">
341 | <!-- // Begin Template Preheader \\ -->
342 | <table border="0" cellpadding="10" cellspacing="0" width="600" id="templatePreheader">
343 | <tr>
344 | <td valign="top" class="preheaderContent">
345 |
346 | <!-- // Begin Module: Standard Preheader \ -->
347 | <table border="0" cellpadding="10" cellspacing="0" width="100%">
348 | <tr>
349 | <td valign="top">
350 | <div mc:edit="std_preheader_content">
351 | Use this area to offer a short teaser of your email's content. Text here will show in the preview area of some email clients.
352 | </div>
353 | </td>
354 | <!-- *|IFNOT:ARCHIVE_PAGE|* -->
355 | <td valign="top" width="190">
356 | <div mc:edit="std_preheader_links">
357 | Is this email not displaying correctly?<br /><a href="*|ARCHIVE|*" target="_blank">View it in your browser</a>.
358 | </div>
359 | </td>
360 | <!-- *|END:IF|* -->
361 | </tr>
362 | </table>
363 | <!-- // End Module: Standard Preheader \ -->
364 |
365 | </td>
366 | </tr>
367 | </table>
368 | <!-- // End Template Preheader \\ -->
369 | <table border="0" cellpadding="0" cellspacing="0" width="600" id="templateContainer">
370 | <tr>
371 | <td align="center" valign="top">
372 | <!-- // Begin Template Header \\ -->
373 | <table border="0" cellpadding="0" cellspacing="0" width="600" id="templateHeader">
374 | <tr>
375 | <td class="headerContent">
376 |
377 | <!-- // Begin Module: Standard Header Image \\ -->
378 | <img src="http://gallery.mailchimp.com/653153ae841fd11de66ad181a/images/placeholder_600.gif" style="max-width:600px;" id="headerImage campaign-icon" mc:label="header_image" mc:edit="header_image" mc:allowdesigner mc:allowtext />
379 | <!-- // End Module: Standard Header Image \\ -->
380 |
381 | </td>
382 | </tr>
383 | </table>
384 | <!-- // End Template Header \\ -->
385 | </td>
386 | </tr>
387 | <tr>
388 | <td align="center" valign="top">
389 | <!-- // Begin Template Body \\ -->
390 | <table border="0" cellpadding="0" cellspacing="0" width="600" id="templateBody">
391 | <tr>
392 | <td valign="top" class="bodyContent">
393 |
394 | <!-- // Begin Module: Standard Postcard Content \\ -->
395 | <table border="0" cellpadding="20" cellspacing="0" width="100%">
396 | <tr mc:repeatable>
397 | <td valign="top">
398 | <div mc:edit="postcard_heading00">
399 | <h1 class="h1">Heading 1</h1>
400 | </div>
401 | <img src="http://gallery.mailchimp.com/653153ae841fd11de66ad181a/images/placeholder_560p.gif" style="max-width:560px;" mc:label="postcard_image" mc:edit="postcard_image" mc:allowtext />
402 | <div mc:edit="std_content00">
403 | <h1 class="h1">Heading 1</h1>
404 | <h2 class="h2">Heading 2</h2>
405 | <h3 class="h3">Heading 3</h3>
406 | <h4 class="h4">Heading 4</h4>
407 | <strong>Getting started:</strong> Customize your template by clicking on the style editor tabs up above. Set your fonts, colors, and styles. After setting your styling is all done you can click here in this area, delete the text, and start adding your own awesome content!
408 | <br />
409 | <br />
410 | After you enter your content, highlight the text you want to style and select the options you set in the style editor in the "styles" drop down box. Want to <a href="http://www.mailchimp.com/kb/article/im-using-the-style-designer-and-i-cant-get-my-formatting-to-change" target="_blank">get rid of styling on a bit of text</a>, but having trouble doing it? Just use the "remove formatting" button to strip the text of any formatting and reset your style.
411 | <br />
412 | <br />
413 | <strong>Repeatable content blocks:</strong> Repeatable sections are noted with plus and minus signs so that you can add and subtract content blocks. You can also <a href="http://www.mailchimp.com/kb/article/how-do-i-work-with-repeatable-content-blocks" target="_blank">get a little fancy</a>: repeat blocks and remove all text to make image "gallery" sections, or do the opposite and remove images for text-only blocks! </div>
414 | </td>
415 | </tr>
416 | </table>
417 | <!-- // End Module: Standard Postcard Content \\ -->
418 |
419 | </td>
420 | </tr>
421 | </table>
422 | <!-- // End Template Body \\ -->
423 | </td>
424 | </tr>
425 | <tr>
426 | <td align="center" valign="top">
427 | <!-- // Begin Template Footer \\ -->
428 | <table border="0" cellpadding="10" cellspacing="0" width="600" id="templateFooter">
429 | <tr>
430 | <td valign="top" class="footerContent">
431 |
432 | <!-- // Begin Module: Standard Footer \\ -->
433 | <table border="0" cellpadding="10" cellspacing="0" width="100%">
434 | <tr>
435 | <td colspan="2" valign="middle" id="social">
436 | <div mc:edit="std_social">
437 | <a href="*|TWITTER:PROFILEURL|*">follow on Twitter</a> | <a href="*|FACEBOOK:PROFILEURL|*">friend on Facebook</a> | <a href="*|FORWARD|*">forward to a friend</a>
438 | </div>
439 | </td>
440 | </tr>
441 | <tr>
442 | <td valign="top" width="350">
443 | <div mc:edit="std_footer">
444 | <em>Copyright © *|CURRENT_YEAR|* *|LIST:COMPANY|*, All rights reserved.</em>
445 | <br />
446 | *|IFNOT:ARCHIVE_PAGE|* *|LIST:DESCRIPTION|*
447 | <br />
448 | <strong>Our mailing address is:</strong>
449 | <br />
450 | *|HTML:LIST_ADDRESS_HTML|**|END:IF|*
451 | </div>
452 | </td>
453 | <td valign="top" width="190" id="monkeyRewards">
454 | <div mc:edit="monkeyrewards">
455 | *|IF:REWARDS|* *|HTML:REWARDS|* *|END:IF|*
456 | </div>
457 | </td>
458 | </tr>
459 | <tr>
460 | <td colspan="2" valign="middle" id="utility">
461 | <div mc:edit="std_utility">
462 | <a href="*|UNSUB|*">unsubscribe from this list</a> | <a href="*|UPDATE_PROFILE|*">update subscription preferences</a>
463 | </div>
464 | </td>
465 | </tr>
466 | </table>
467 | <!-- // End Module: Standard Footer \\ -->
468 |
469 | </td>
470 | </tr>
471 | </table>
472 | <!-- // End Template Footer \\ -->
473 | </td>
474 | </tr>
475 | </table>
476 | <br />
477 | </td>
478 | </tr>
479 | </table>
480 | </center>
481 | </body>
482 | </html>
--------------------------------------------------------------------------------
/templates/transactional_basic.html:
--------------------------------------------------------------------------------
1 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 | <html>
3 | <head>
4 | <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
5 |
6 | <!-- Facebook sharing information tags -->
7 | <meta property="og:title" content="*|MC:SUBJECT|*" />
8 |
9 | <title>*|MC:SUBJECT|*</title>
10 | <style type="text/css">
11 | /* Client-specific Styles */
12 | #outlook a{padding:0;} /* Force Outlook to provide a "view in browser" button. */
13 | body{width:100% !important;} .ReadMsgBody{width:100%;} .ExternalClass{width:100%;} /* Force Hotmail to display emails at full width */
14 | body{-webkit-text-size-adjust:none;} /* Prevent Webkit platforms from changing default text sizes. */
15 |
16 | /* Reset Styles */
17 | body{margin:0; padding:0;}
18 | img{border:0; height:auto; line-height:100%; outline:none; text-decoration:none;}
19 | table td{border-collapse:collapse;}
20 | #backgroundTable{height:100% !important; margin:0; padding:0; width:100% !important;}
21 |
22 | /* Template Styles */
23 |
24 | /* /\/\/\/\/\/\/\/\/\/\ STANDARD STYLING: COMMON PAGE ELEMENTS /\/\/\/\/\/\/\/\/\/\ */
25 |
26 | /**
27 | * @tab Page
28 | * @section background color
29 | * @tip Set the background color for your email. You may want to choose one that matches your company's branding.
30 | * @theme page
31 | */
32 | body, #backgroundTable{
33 | /*@editable*/ background-color:#FAFAFA;
34 | }
35 |
36 | /**
37 | * @tab Page
38 | * @section email border
39 | * @tip Set the border for your email.
40 | */
41 | #templateContainer{
42 | /*@editable*/ border: 1px solid #DDDDDD;
43 | }
44 |
45 | /**
46 | * @tab Page
47 | * @section heading 1
48 | * @tip Set the styling for all first-level headings in your emails. These should be the largest of your headings.
49 | * @style heading 1
50 | */
51 | h1, .h1{
52 | /*@editable*/ color:#202020;
53 | display:block;
54 | /*@editable*/ font-family:Arial;
55 | /*@editable*/ font-size:34px;
56 | /*@editable*/ font-weight:bold;
57 | /*@editable*/ line-height:100%;
58 | margin-top:0;
59 | margin-right:0;
60 | margin-bottom:10px;
61 | margin-left:0;
62 | /*@editable*/ text-align:left;
63 | }
64 |
65 | /**
66 | * @tab Page
67 | * @section heading 2
68 | * @tip Set the styling for all second-level headings in your emails.
69 | * @style heading 2
70 | */
71 | h2, .h2{
72 | /*@editable*/ color:#202020;
73 | display:block;
74 | /*@editable*/ font-family:Arial;
75 | /*@editable*/ font-size:30px;
76 | /*@editable*/ font-weight:bold;
77 | /*@editable*/ line-height:100%;
78 | margin-top:0;
79 | margin-right:0;
80 | margin-bottom:10px;
81 | margin-left:0;
82 | /*@editable*/ text-align:left;
83 | }
84 |
85 | /**
86 | * @tab Page
87 | * @section heading 3
88 | * @tip Set the styling for all third-level headings in your emails.
89 | * @style heading 3
90 | */
91 | h3, .h3{
92 | /*@editable*/ color:#202020;
93 | display:block;
94 | /*@editable*/ font-family:Arial;
95 | /*@editable*/ font-size:26px;
96 | /*@editable*/ font-weight:bold;
97 | /*@editable*/ line-height:100%;
98 | margin-top:0;
99 | margin-right:0;
100 | margin-bottom:10px;
101 | margin-left:0;
102 | /*@editable*/ text-align:left;
103 | }
104 |
105 | /**
106 | * @tab Page
107 | * @section heading 4
108 | * @tip Set the styling for all fourth-level headings in your emails. These should be the smallest of your headings.
109 | * @style heading 4
110 | */
111 | h4, .h4{
112 | /*@editable*/ color:#202020;
113 | display:block;
114 | /*@editable*/ font-family:Arial;
115 | /*@editable*/ font-size:22px;
116 | /*@editable*/ font-weight:bold;
117 | /*@editable*/ line-height:100%;
118 | margin-top:0;
119 | margin-right:0;
120 | margin-bottom:10px;
121 | margin-left:0;
122 | /*@editable*/ text-align:left;
123 | }
124 |
125 | /* /\/\/\/\/\/\/\/\/\/\ STANDARD STYLING: HEADER /\/\/\/\/\/\/\/\/\/\ */
126 |
127 | /**
128 | * @tab Header
129 | * @section header style
130 | * @tip Set the background color and border for your email's header area.
131 | * @theme header
132 | */
133 | #templateHeader{
134 | /*@editable*/ background-color:#FFFFFF;
135 | /*@editable*/ border-bottom:0;
136 | }
137 |
138 | /**
139 | * @tab Header
140 | * @section header text
141 | * @tip Set the styling for your email's header text. Choose a size and color that is easy to read.
142 | */
143 | .headerContent{
144 | /*@editable*/ color:#202020;
145 | /*@editable*/ font-family:Arial;
146 | /*@editable*/ font-size:34px;
147 | /*@editable*/ font-weight:bold;
148 | /*@editable*/ line-height:100%;
149 | /*@editable*/ padding:0;
150 | /*@editable*/ text-align:center;
151 | /*@editable*/ vertical-align:middle;
152 | }
153 |
154 | /**
155 | * @tab Header
156 | * @section header link
157 | * @tip Set the styling for your email's header links. Choose a color that helps them stand out from your text.
158 | */
159 | .headerContent a:link, .headerContent a:visited, /* Yahoo! Mail Override */ .headerContent a .yshortcuts /* Yahoo! Mail Override */{
160 | /*@editable*/ color:#336699;
161 | /*@editable*/ font-weight:normal;
162 | /*@editable*/ text-decoration:underline;
163 | }
164 |
165 | #headerImage{
166 | height:auto;
167 | max-width:600px !important;
168 | }
169 |
170 | /* /\/\/\/\/\/\/\/\/\/\ STANDARD STYLING: MAIN BODY /\/\/\/\/\/\/\/\/\/\ */
171 |
172 | /**
173 | * @tab Body
174 | * @section body style
175 | * @tip Set the background color for your email's body area.
176 | */
177 | #templateContainer, .bodyContent{
178 | /*@editable*/ background-color:#FFFFFF;
179 | }
180 |
181 | /**
182 | * @tab Body
183 | * @section body text
184 | * @tip Set the styling for your email's main content text. Choose a size and color that is easy to read.
185 | * @theme main
186 | */
187 | .bodyContent div{
188 | /*@editable*/ color:#505050;
189 | /*@editable*/ font-family:Arial;
190 | /*@editable*/ font-size:14px;
191 | /*@editable*/ line-height:150%;
192 | /*@editable*/ text-align:left;
193 | }
194 |
195 | /**
196 | * @tab Body
197 | * @section body link
198 | * @tip Set the styling for your email's main content links. Choose a color that helps them stand out from your text.
199 | */
200 | .bodyContent div a:link, .bodyContent div a:visited, /* Yahoo! Mail Override */ .bodyContent div a .yshortcuts /* Yahoo! Mail Override */{
201 | /*@editable*/ color:#336699;
202 | /*@editable*/ font-weight:normal;
203 | /*@editable*/ text-decoration:underline;
204 | }
205 |
206 | /**
207 | * @tab Body
208 | * @section button style
209 | * @tip Set the styling for your email's button. Choose a style that draws attention.
210 | */
211 | .templateButton{
212 | -moz-border-radius:3px;
213 | -webkit-border-radius:3px;
214 | /*@editable*/ background-color:#336699;
215 | /*@editable*/ border:0;
216 | border-collapse:separate !important;
217 | border-radius:3px;
218 | }
219 |
220 | /**
221 | * @tab Body
222 | * @section button style
223 | * @tip Set the styling for your email's button. Choose a style that draws attention.
224 | */
225 | .templateButton, .templateButton a:link, .templateButton a:visited, /* Yahoo! Mail Override */ .templateButton a .yshortcuts /* Yahoo! Mail Override */{
226 | /*@editable*/ color:#FFFFFF;
227 | /*@editable*/ font-family:Arial;
228 | /*@editable*/ font-size:15px;
229 | /*@editable*/ font-weight:bold;
230 | /*@editable*/ letter-spacing:-.5px;
231 | /*@editable*/ line-height:100%;
232 | text-align:center;
233 | text-decoration:none;
234 | }
235 |
236 | .bodyContent img{
237 | display:inline;
238 | height:auto;
239 | }
240 |
241 | /* /\/\/\/\/\/\/\/\/\/\ STANDARD STYLING: FOOTER /\/\/\/\/\/\/\/\/\/\ */
242 |
243 | /**
244 | * @tab Footer
245 | * @section footer style
246 | * @tip Set the background color and top border for your email's footer area.
247 | * @theme footer
248 | */
249 | #templateFooter{
250 | /*@editable*/ background-color:#FFFFFF;
251 | /*@editable*/ border-top:0;
252 | }
253 |
254 | /**
255 | * @tab Footer
256 | * @section footer text
257 | * @tip Set the styling for your email's footer text. Choose a size and color that is easy to read.
258 | * @theme footer
259 | */
260 | .footerContent div{
261 | /*@editable*/ color:#707070;
262 | /*@editable*/ font-family:Arial;
263 | /*@editable*/ font-size:12px;
264 | /*@editable*/ line-height:125%;
265 | /*@editable*/ text-align:center;
266 | }
267 |
268 | /**
269 | * @tab Footer
270 | * @section footer link
271 | * @tip Set the styling for your email's footer links. Choose a color that helps them stand out from your text.
272 | */
273 | .footerContent div a:link, .footerContent div a:visited, /* Yahoo! Mail Override */ .footerContent div a .yshortcuts /* Yahoo! Mail Override */{
274 | /*@editable*/ color:#336699;
275 | /*@editable*/ font-weight:normal;
276 | /*@editable*/ text-decoration:underline;
277 | }
278 |
279 | .footerContent img{
280 | display:inline;
281 | }
282 |
283 | /**
284 | * @tab Footer
285 | * @section utility bar style
286 | * @tip Set the background color and border for your email's footer utility bar.
287 | * @theme footer
288 | */
289 | #utility{
290 | /*@editable*/ background-color:#FFFFFF;
291 | /*@editable*/ border:0;
292 | }
293 |
294 | /**
295 | * @tab Footer
296 | * @section utility bar style
297 | * @tip Set the background color and border for your email's footer utility bar.
298 | */
299 | #utility div{
300 | /*@editable*/ text-align:center;
301 | }
302 |
303 | #monkeyRewards img{
304 | max-width:190px;
305 | }
306 | </style>
307 | </head>
308 | <body leftmargin="0" marginwidth="0" topmargin="0" marginheight="0" offset="0">
309 | <center>
310 | <table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" id="backgroundTable">
311 | <tr>
312 | <td align="center" valign="top" style="padding-top:20px;">
313 | <table border="0" cellpadding="0" cellspacing="0" width="600" id="templateContainer">
314 | <tr>
315 | <td align="center" valign="top">
316 | <!-- // Begin Template Header \\ -->
317 | <table border="0" cellpadding="0" cellspacing="0" width="600" id="templateHeader">
318 | <tr>
319 | <td class="headerContent">
320 |
321 | <!-- // Begin Module: Standard Header Image \\ -->
322 | <img src="http://gallery.mailchimp.com/653153ae841fd11de66ad181a/images/placeholder_600.gif" style="max-width:600px;" id="headerImage campaign-icon" mc:label="header_image" mc:edit="header_image" mc:allowdesigner mc:allowtext />
323 | <!-- // End Module: Standard Header Image \\ -->
324 |
325 | </td>
326 | </tr>
327 | </table>
328 | <!-- // End Template Header \\ -->
329 | </td>
330 | </tr>
331 | <tr>
332 | <td align="center" valign="top">
333 | <!-- // Begin Template Body \\ -->
334 | <table border="0" cellpadding="0" cellspacing="0" width="600" id="templateBody">
335 | <tr>
336 | <td valign="top">
337 |
338 | <!-- // Begin Module: Standard Content \\ -->
339 | <table border="0" cellpadding="20" cellspacing="0" width="100%">
340 | <tr>
341 | <td valign="top" class="bodyContent">
342 | <div mc:edit="std_content00">
343 | <h1 class="h1">Heading 1</h1>
344 | <h2 class="h2">Heading 2</h2>
345 | <h3 class="h3">Heading 3</h3>
346 | <h4 class="h4">Heading 4</h4>
347 | <strong>Getting started:</strong> Transactional emails serve a defined and simple purpose. They differ from traditional mass-emails because they're generally sent on a user-by-user basis, instead of large list of users, and are generally used to deliver purchase receipts, account updates, security notifications, and more.
348 | <br />
349 | <br />
350 | Where <a href="http://www.mailchimp.com/" target="_blank">MailChimp</a> can be used to send newsletters to several subscribers in one large blast, <a href="http://www.mandrill.com/" target="_blank">Mandrill</a> is specifically positioned to send transactional emails, and offers relevant tracking and metrics that isn't necessarily available through a traditional email platform.
351 | </div>
352 | </td>
353 | </tr>
354 | <tr>
355 | <td align="center" valign="top" style="padding-top:0;">
356 | <table border="0" cellpadding="15" cellspacing="0" class="templateButton">
357 | <tr>
358 | <td valign="middle" class="templateButtonContent">
359 | <div mc:edit="std_content01">
360 | <a href="http://www.mandrill.com/" target="_blank">See What Mandrill Can Do</a>
361 | </div>
362 | </td>
363 | </tr>
364 | </table>
365 | </td>
366 | </tr>
367 | </table>
368 | <!-- // End Module: Standard Content \\ -->
369 |
370 | </td>
371 | </tr>
372 | </table>
373 | <!-- // End Template Body \\ -->
374 | </td>
375 | </tr>
376 | <tr>
377 | <td align="center" valign="top">
378 | <!-- // Begin Template Footer \\ -->
379 | <table border="0" cellpadding="10" cellspacing="0" width="600" id="templateFooter">
380 | <tr>
381 | <td valign="top" class="footerContent">
382 |
383 | <!-- // Begin Module: Transactional Footer \\ -->
384 | <table border="0" cellpadding="10" cellspacing="0" width="100%">
385 | <tr>
386 | <td valign="top">
387 | <div mc:edit="std_footer">
388 | <em>Copyright © *|CURRENT_YEAR|* *|LIST:COMPANY|*, All rights reserved.</em>
389 | <br />
390 | *|IFNOT:ARCHIVE_PAGE|* *|LIST:DESCRIPTION|*
391 | <br />
392 | <strong>Our mailing address is:</strong>
393 | <br />
394 | *|HTML:LIST_ADDRESS_HTML|**|END:IF|*
395 | </div>
396 | </td>
397 | </tr>
398 | <tr>
399 | <td valign="middle" id="utility">
400 | <div mc:edit="std_utility">
401 | <a href="*|ARCHIVE|*" target="_blank">view this in your browser</a> | <a href="*|UNSUB|*">unsubscribe from this list</a> | <a href="*|UPDATE_PROFILE|*">update subscription preferences</a>
402 | </div>
403 | </td>
404 | </tr>
405 | </table>
406 | <!-- // End Module: Transactional Footer \\ -->
407 |
408 | </td>
409 | </tr>
410 | </table>
411 | <!-- // End Template Footer \\ -->
412 | </td>
413 | </tr>
414 | </table>
415 | <br />
416 | </td>
417 | </tr>
418 | </table>
419 | </center>
420 | </body>
421 | </html>
--------------------------------------------------------------------------------
/templates/transactional_tabular.html:
--------------------------------------------------------------------------------
1 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 | <html>
3 | <head>
4 | <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
5 |
6 | <!-- Facebook sharing information tags -->
7 | <meta property="og:title" content="*|MC:SUBJECT|*" />
8 |
9 | <title>*|MC:SUBJECT|*</title>
10 | <style type="text/css">
11 | /* Client-specific Styles */
12 | #outlook a{padding:0;} /* Force Outlook to provide a "view in browser" button. */
13 | body{width:100% !important;} .ReadMsgBody{width:100%;} .ExternalClass{width:100%;} /* Force Hotmail to display emails at full width */
14 | body{-webkit-text-size-adjust:none;} /* Prevent Webkit platforms from changing default text sizes. */
15 |
16 | /* Reset Styles */
17 | body{margin:0; padding:0;}
18 | img{border:0; height:auto; line-height:100%; outline:none; text-decoration:none;}
19 | table td{border-collapse:collapse;}
20 | #backgroundTable{height:100% !important; margin:0; padding:0; width:100% !important;}
21 |
22 | /* Template Styles */
23 |
24 | /* /\/\/\/\/\/\/\/\/\/\ STANDARD STYLING: COMMON PAGE ELEMENTS /\/\/\/\/\/\/\/\/\/\ */
25 |
26 | /**
27 | * @tab Page
28 | * @section background color
29 | * @tip Set the background color for your email. You may want to choose one that matches your company's branding.
30 | * @theme page
31 | */
32 | body, #backgroundTable{
33 | /*@editable*/ background-color:#FAFAFA;
34 | }
35 |
36 | /**
37 | * @tab Page
38 | * @section email border
39 | * @tip Set the border for your email.
40 | */
41 | #templateContainer{
42 | /*@editable*/ border: 1px solid #DDDDDD;
43 | }
44 |
45 | /**
46 | * @tab Page
47 | * @section heading 1
48 | * @tip Set the styling for all first-level headings in your emails. These should be the largest of your headings.
49 | * @style heading 1
50 | */
51 | h1, .h1{
52 | /*@editable*/ color:#202020;
53 | display:block;
54 | /*@editable*/ font-family:Arial;
55 | /*@editable*/ font-size:34px;
56 | /*@editable*/ font-weight:bold;
57 | /*@editable*/ line-height:100%;
58 | margin-top:0;
59 | margin-right:0;
60 | margin-bottom:10px;
61 | margin-left:0;
62 | /*@editable*/ text-align:left;
63 | }
64 |
65 | /**
66 | * @tab Page
67 | * @section heading 2
68 | * @tip Set the styling for all second-level headings in your emails.
69 | * @style heading 2
70 | */
71 | h2, .h2{
72 | /*@editable*/ color:#202020;
73 | display:block;
74 | /*@editable*/ font-family:Arial;
75 | /*@editable*/ font-size:30px;
76 | /*@editable*/ font-weight:bold;
77 | /*@editable*/ line-height:100%;
78 | margin-top:0;
79 | margin-right:0;
80 | margin-bottom:10px;
81 | margin-left:0;
82 | /*@editable*/ text-align:left;
83 | }
84 |
85 | /**
86 | * @tab Page
87 | * @section heading 3
88 | * @tip Set the styling for all third-level headings in your emails.
89 | * @style heading 3
90 | */
91 | h3, .h3{
92 | /*@editable*/ color:#202020;
93 | display:block;
94 | /*@editable*/ font-family:Arial;
95 | /*@editable*/ font-size:26px;
96 | /*@editable*/ font-weight:bold;
97 | /*@editable*/ line-height:100%;
98 | margin-top:0;
99 | margin-right:0;
100 | margin-bottom:10px;
101 | margin-left:0;
102 | /*@editable*/ text-align:left;
103 | }
104 |
105 | /**
106 | * @tab Page
107 | * @section heading 4
108 | * @tip Set the styling for all fourth-level headings in your emails. These should be the smallest of your headings.
109 | * @style heading 4
110 | */
111 | h4, .h4{
112 | /*@editable*/ color:#202020;
113 | display:block;
114 | /*@editable*/ font-family:Arial;
115 | /*@editable*/ font-size:22px;
116 | /*@editable*/ font-weight:bold;
117 | /*@editable*/ line-height:100%;
118 | margin-top:0;
119 | margin-right:0;
120 | margin-bottom:10px;
121 | margin-left:0;
122 | /*@editable*/ text-align:left;
123 | }
124 |
125 | /* /\/\/\/\/\/\/\/\/\/\ STANDARD STYLING: HEADER /\/\/\/\/\/\/\/\/\/\ */
126 |
127 | /**
128 | * @tab Header
129 | * @section header style
130 | * @tip Set the background color and border for your email's header area.
131 | * @theme header
132 | */
133 | #templateHeader{
134 | /*@editable*/ background-color:#FFFFFF;
135 | /*@editable*/ border-bottom:0;
136 | }
137 |
138 | /**
139 | * @tab Header
140 | * @section header text
141 | * @tip Set the styling for your email's header text. Choose a size and color that is easy to read.
142 | */
143 | .headerContent{
144 | /*@editable*/ color:#202020;
145 | /*@editable*/ font-family:Arial;
146 | /*@editable*/ font-size:34px;
147 | /*@editable*/ font-weight:bold;
148 | /*@editable*/ line-height:100%;
149 | /*@editable*/ padding:0;
150 | /*@editable*/ text-align:center;
151 | /*@editable*/ vertical-align:middle;
152 | }
153 |
154 | /**
155 | * @tab Header
156 | * @section header link
157 | * @tip Set the styling for your email's header links. Choose a color that helps them stand out from your text.
158 | */
159 | .headerContent a:link, .headerContent a:visited, /* Yahoo! Mail Override */ .headerContent a .yshortcuts /* Yahoo! Mail Override */{
160 | /*@editable*/ color:#336699;
161 | /*@editable*/ font-weight:normal;
162 | /*@editable*/ text-decoration:underline;
163 | }
164 |
165 | #headerImage{
166 | height:auto;
167 | max-width:600px !important;
168 | }
169 |
170 | /* /\/\/\/\/\/\/\/\/\/\ STANDARD STYLING: MAIN BODY /\/\/\/\/\/\/\/\/\/\ */
171 |
172 | /**
173 | * @tab Body
174 | * @section body style
175 | * @tip Set the background color for your email's body area.
176 | */
177 | #templateContainer, .bodyContent{
178 | /*@editable*/ background-color:#FFFFFF;
179 | }
180 |
181 | /**
182 | * @tab Body
183 | * @section body text
184 | * @tip Set the styling for your email's main content text. Choose a size and color that is easy to read.
185 | * @theme main
186 | */
187 | .bodyContent div{
188 | /*@editable*/ color:#505050;
189 | /*@editable*/ font-family:Arial;
190 | /*@editable*/ font-size:14px;
191 | /*@editable*/ line-height:150%;
192 | /*@editable*/ text-align:left;
193 | }
194 |
195 | /**
196 | * @tab Body
197 | * @section body link
198 | * @tip Set the styling for your email's main content links. Choose a color that helps them stand out from your text.
199 | */
200 | .bodyContent div a:link, .bodyContent div a:visited, /* Yahoo! Mail Override */ .bodyContent div a .yshortcuts /* Yahoo! Mail Override */{
201 | /*@editable*/ color:#336699;
202 | /*@editable*/ font-weight:normal;
203 | /*@editable*/ text-decoration:underline;
204 | }
205 |
206 | /**
207 | * @tab Body
208 | * @section data table style
209 | * @tip Set the background color and border for your email's data table.
210 | */
211 | .templateDataTable{
212 | /*@editable*/ background-color:#FFFFFF;
213 | /*@editable*/ border:1px solid #DDDDDD;
214 | }
215 |
216 | /**
217 | * @tab Body
218 | * @section data table heading text
219 | * @tip Set the styling for your email's data table text. Choose a size and color that is easy to read.
220 | */
221 | .dataTableHeading{
222 | /*@editable*/ background-color:#D8E2EA;
223 | /*@editable*/ color:#336699;
224 | /*@editable*/ font-family:Helvetica;
225 | /*@editable*/ font-size:14px;
226 | /*@editable*/ font-weight:bold;
227 | /*@editable*/ line-height:150%;
228 | /*@editable*/ text-align:left;
229 | }
230 |
231 | /**
232 | * @tab Body
233 | * @section data table heading link
234 | * @tip Set the styling for your email's data table links. Choose a color that helps them stand out from your text.
235 | */
236 | .dataTableHeading a:link, .dataTableHeading a:visited, /* Yahoo! Mail Override */ .dataTableHeading a .yshortcuts /* Yahoo! Mail Override */{
237 | /*@editable*/ color:#FFFFFF;
238 | /*@editable*/ font-weight:bold;
239 | /*@editable*/ text-decoration:underline;
240 | }
241 |
242 | /**
243 | * @tab Body
244 | * @section data table text
245 | * @tip Set the styling for your email's data table text. Choose a size and color that is easy to read.
246 | */
247 | .dataTableContent{
248 | /*@editable*/ border-top:1px solid #DDDDDD;
249 | /*@editable*/ border-bottom:0;
250 | /*@editable*/ color:#202020;
251 | /*@editable*/ font-family:Helvetica;
252 | /*@editable*/ font-size:12px;
253 | /*@editable*/ font-weight:bold;
254 | /*@editable*/ line-height:150%;
255 | /*@editable*/ text-align:left;
256 | }
257 |
258 | /**
259 | * @tab Body
260 | * @section data table link
261 | * @tip Set the styling for your email's data table links. Choose a color that helps them stand out from your text.
262 | */
263 | .dataTableContent a:link, .dataTableContent a:visited, /* Yahoo! Mail Override */ .dataTableContent a .yshortcuts /* Yahoo! Mail Override */{
264 | /*@editable*/ color:#202020;
265 | /*@editable*/ font-weight:bold;
266 | /*@editable*/ text-decoration:underline;
267 | }
268 |
269 | /**
270 | * @tab Body
271 | * @section button style
272 | * @tip Set the styling for your email's button. Choose a style that draws attention.
273 | */
274 | .templateButton{
275 | -moz-border-radius:3px;
276 | -webkit-border-radius:3px;
277 | /*@editable*/ background-color:#336699;
278 | /*@editable*/ border:0;
279 | border-collapse:separate !important;
280 | border-radius:3px;
281 | }
282 |
283 | /**
284 | * @tab Body
285 | * @section button style
286 | * @tip Set the styling for your email's button. Choose a style that draws attention.
287 | */
288 | .templateButton, .templateButton a:link, .templateButton a:visited, /* Yahoo! Mail Override */ .templateButton a .yshortcuts /* Yahoo! Mail Override */{
289 | /*@editable*/ color:#FFFFFF;
290 | /*@editable*/ font-family:Arial;
291 | /*@editable*/ font-size:15px;
292 | /*@editable*/ font-weight:bold;
293 | /*@editable*/ letter-spacing:-.5px;
294 | /*@editable*/ line-height:100%;
295 | text-align:center;
296 | text-decoration:none;
297 | }
298 |
299 | .bodyContent img{
300 | display:inline;
301 | height:auto;
302 | }
303 |
304 | /* /\/\/\/\/\/\/\/\/\/\ STANDARD STYLING: FOOTER /\/\/\/\/\/\/\/\/\/\ */
305 |
306 | /**
307 | * @tab Footer
308 | * @section footer style
309 | * @tip Set the background color and top border for your email's footer area.
310 | * @theme footer
311 | */
312 | #templateFooter{
313 | /*@editable*/ background-color:#FFFFFF;
314 | /*@editable*/ border-top:0;
315 | }
316 |
317 | /**
318 | * @tab Footer
319 | * @section footer text
320 | * @tip Set the styling for your email's footer text. Choose a size and color that is easy to read.
321 | * @theme footer
322 | */
323 | .footerContent div{
324 | /*@editable*/ color:#707070;
325 | /*@editable*/ font-family:Arial;
326 | /*@editable*/ font-size:12px;
327 | /*@editable*/ line-height:125%;
328 | /*@editable*/ text-align:center;
329 | }
330 |
331 | /**
332 | * @tab Footer
333 | * @section footer link
334 | * @tip Set the styling for your email's footer links. Choose a color that helps them stand out from your text.
335 | */
336 | .footerContent div a:link, .footerContent div a:visited, /* Yahoo! Mail Override */ .footerContent div a .yshortcuts /* Yahoo! Mail Override */{
337 | /*@editable*/ color:#336699;
338 | /*@editable*/ font-weight:normal;
339 | /*@editable*/ text-decoration:underline;
340 | }
341 |
342 | .footerContent img{
343 | display:inline;
344 | }
345 |
346 | /**
347 | * @tab Footer
348 | * @section utility bar style
349 | * @tip Set the background color and border for your email's footer utility bar.
350 | * @theme footer
351 | */
352 | #utility{
353 | /*@editable*/ background-color:#FFFFFF;
354 | /*@editable*/ border:0;
355 | }
356 |
357 | /**
358 | * @tab Footer
359 | * @section utility bar style
360 | * @tip Set the background color and border for your email's footer utility bar.
361 | */
362 | #utility div{
363 | /*@editable*/ text-align:center;
364 | }
365 |
366 | #monkeyRewards img{
367 | max-width:190px;
368 | }
369 | </style>
370 | </head>
371 | <body leftmargin="0" marginwidth="0" topmargin="0" marginheight="0" offset="0">
372 | <center>
373 | <table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" id="backgroundTable">
374 | <tr>
375 | <td align="center" valign="top" style="padding-top:20px;">
376 | <table border="0" cellpadding="0" cellspacing="0" width="600" id="templateContainer">
377 | <tr>
378 | <td align="center" valign="top">
379 | <!-- // Begin Template Header \\ -->
380 | <table border="0" cellpadding="0" cellspacing="0" width="600" id="templateHeader">
381 | <tr>
382 | <td class="headerContent">
383 |
384 | <!-- // Begin Module: Standard Header Image \\ -->
385 | <img src="http://gallery.mailchimp.com/653153ae841fd11de66ad181a/images/placeholder_600.gif" style="max-width:600px;" id="headerImage campaign-icon" mc:label="header_image" mc:edit="header_image" mc:allowdesigner mc:allowtext />
386 | <!-- // End Module: Standard Header Image \\ -->
387 |
388 | </td>
389 | </tr>
390 | </table>
391 | <!-- // End Template Header \\ -->
392 | </td>
393 | </tr>
394 | <tr>
395 | <td align="center" valign="top">
396 | <!-- // Begin Template Body \\ -->
397 | <table border="0" cellpadding="0" cellspacing="0" width="600" id="templateBody">
398 | <tr>
399 | <td valign="top">
400 |
401 | <!-- // Begin Module: Standard Content \\ -->
402 | <table border="0" cellpadding="20" cellspacing="0" width="100%">
403 | <tr>
404 | <td valign="top" class="bodyContent">
405 | <div mc:edit="std_content00">
406 | <h1 class="h1">Heading 1</h1>
407 | <h2 class="h2">Heading 2</h2>
408 | <h3 class="h3">Heading 3</h3>
409 | <h4 class="h4">Heading 4</h4>
410 | <strong>Getting started:</strong> Transactional emails serve a defined and simple purpose. They differ from traditional mass-emails because they're generally sent on a user-by-user basis, instead of large list of users, and are generally used to deliver purchase receipts, account updates, security notifications, and more.
411 | </div>
412 | </td>
413 | </tr>
414 | <tr>
415 | <td valign="top" style="padding-top:0; padding-bottom:0;">
416 | <table border="0" cellpadding="10" cellspacing="0" width="100%" class="templateDataTable">
417 | <tr>
418 | <th scope="col" valign="top" width="25%" class="dataTableHeading" mc:edit="data_table_heading00">
419 | DATE
420 | </th>
421 | <th scope="col" valign="top" width="25%" class="dataTableHeading" mc:edit="data_table_heading01">
422 | EMAILS SENT
423 | </th>
424 | <th scope="col" valign="top" width="50%" class="dataTableHeading" mc:edit="data_table_heading02">
425 | EMAIL SUBJECT
426 | </th>
427 | </tr>
428 | <tr mc:repeatable>
429 | <td valign="top" class="dataTableContent" mc:edit="data_table_content00">
430 | SEP 29, 2012
431 | </td>
432 | <td valign="top" class="dataTableContent" mc:edit="data_table_content01">
433 | 2,760
434 | </td>
435 | <td valign="top" class="dataTableContent" mc:edit="data_table_content02">
436 | 3-MONTH PASSWORD UPDATE
437 | </td>
438 | </tr>
439 | </table>
440 | </td>
441 | </tr>
442 | <tr>
443 | <td valign="top" class="bodyContent">
444 | <div mc:edit="std_content01">
445 | Where <a href="http://www.mailchimp.com/" target="_blank">MailChimp</a> can be used to send newsletters to several subscribers in one large blast, <a href="http://www.mandrill.com/" target="_blank">Mandrill</a> is specifically positioned to send transactional emails, and offers relevant tracking and metrics that isn't necessarily available through a traditional email platform.
446 | </div>
447 | </td>
448 | </tr>
449 | <tr>
450 | <td align="center" valign="top" style="padding-top:0;">
451 | <table border="0" cellpadding="15" cellspacing="0" class="templateButton">
452 | <tr>
453 | <td valign="middle" class="templateButtonContent">
454 | <div mc:edit="std_content02">
455 | <a href="http://www.mandrill.com/" target="_blank">See What Mandrill Can Do</a>
456 | </div>
457 | </td>
458 | </tr>
459 | </table>
460 | </td>
461 | </tr>
462 | </table>
463 | <!-- // End Module: Standard Content \\ -->
464 |
465 | </td>
466 | </tr>
467 | </table>
468 | <!-- // End Template Body \\ -->
469 | </td>
470 | </tr>
471 | <tr>
472 | <td align="center" valign="top">
473 | <!-- // Begin Template Footer \\ -->
474 | <table border="0" cellpadding="10" cellspacing="0" width="600" id="templateFooter">
475 | <tr>
476 | <td valign="top" class="footerContent">
477 |
478 | <!-- // Begin Module: Transactional Footer \\ -->
479 | <table border="0" cellpadding="10" cellspacing="0" width="100%">
480 | <tr>
481 | <td valign="top">
482 | <div mc:edit="std_footer">
483 | <em>Copyright © *|CURRENT_YEAR|* *|LIST:COMPANY|*, All rights reserved.</em>
484 | <br />
485 | *|IFNOT:ARCHIVE_PAGE|* *|LIST:DESCRIPTION|*
486 | <br />
487 | <strong>Our mailing address is:</strong>
488 | <br />
489 | *|HTML:LIST_ADDRESS_HTML|**|END:IF|*
490 | </div>
491 | </td>
492 | </tr>
493 | <tr>
494 | <td valign="middle" id="utility">
495 | <div mc:edit="std_utility">
496 | <a href="*|ARCHIVE|*" target="_blank">view this in your browser</a> | <a href="*|UNSUB|*">unsubscribe from this list</a> | <a href="*|UPDATE_PROFILE|*">update subscription preferences</a>
497 | </div>
498 | </td>
499 | </tr>
500 | </table>
501 | <!-- // End Module: Transactional Footer \\ -->
502 |
503 | </td>
504 | </tr>
505 | </table>
506 | <!-- // End Template Footer \\ -->
507 | </td>
508 | </tr>
509 | </table>
510 | <br />
511 | </td>
512 | </tr>
513 | </table>
514 | </center>
515 | </body>
516 | </html>
--------------------------------------------------------------------------------