Skip to content

Commit 91867c0

Browse files
committed
Newsletter Template Fixes
* Update fonts and spacing for header, paragraph, and li tags to match MailChimp * Make table use 90% of client width so the text isn't bleeding at the end of the screen. * Add unsubscribe link.
1 parent e1b3c37 commit 91867c0

File tree

1 file changed

+58
-53
lines changed

1 file changed

+58
-53
lines changed

.github/workflows/newsletter_template.html

Lines changed: 58 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -22,9 +22,14 @@
2222
table{
2323
border-collapse:collapse;
2424
}
25-
h1,h2,h3,h4,h5,h6{
25+
h1 {
26+
display: block;
27+
margin: .75rem 0 0 0;
28+
padding:0;
29+
}
30+
h2,h3,h4,h5,h6{
2631
display:block;
27-
margin:0;
32+
margin:.5rem 0 0 0;
2833
padding:0;
2934
}
3035
img,a img{
@@ -60,6 +65,8 @@
6065
}
6166
p,a,li,td,blockquote{
6267
mso-line-height-rule:exactly;
68+
font-family:Helvetica;
69+
margin: .5rem 0;
6370
}
6471
a[href^=tel],a[href^=sms]{
6572
color:inherit;
@@ -238,7 +245,7 @@
238245
@section Header Text
239246
@tip Set the styling for your email's header text. Choose a size and color that is easy to read.
240247
*/
241-
#templateHeader .mcnTextContent,#templateHeader .mcnTextContent p{
248+
p{
242249
/*@editable*/color:#202020;
243250
/*@editable*/font-family:Helvetica;
244251
/*@editable*/font-size:16px;
@@ -250,7 +257,7 @@
250257
@section Header Link
251258
@tip Set the styling for your email's header links. Choose a color that helps them stand out from your text.
252259
*/
253-
#templateHeader .mcnTextContent a,#templateHeader .mcnTextContent p a{
260+
p a{
254261
/*@editable*/color:#007C89;
255262
/*@editable*/font-weight:normal;
256263
/*@editable*/text-decoration:underline;
@@ -538,7 +545,7 @@
538545

539546

540547
<!-- BEGIN TEMPLATE // -->
541-
<table border="0" cellpadding="0" cellspacing="0" width="100%">
548+
<table border="0" cellpadding="0" cellspacing="0" width="90%">
542549
<tbody><tr>
543550
<td align="center" valign="top" id="templatePreheader">
544551
<!--[if (gte mso 9)|(IE)]>
@@ -606,11 +613,11 @@
606613
<table align="left" width="100%" border="0" cellpadding="0" cellspacing="0" class="mcnImageContentContainer" style="min-width:100%;">
607614
<tbody><tr>
608615
<td class="mcnImageContent" valign="top" style="padding-right: 9px; padding-left: 9px; padding-top: 0; padding-bottom: 0; text-align:center;">
609-
610-
616+
617+
611618
<img align="center" alt="" src="{{ site.url }}{{ site.baseurl }}/img/cfb-logo/cfb-logo-horiz-dark.png" width="196" style="max-width:196px; padding-bottom: 0; display: inline !important; vertical-align: bottom;" class="mcnImage">
612-
613-
619+
620+
614621
</td>
615622
</tr>
616623
</tbody></table>
@@ -675,12 +682,12 @@
675682
<table align="center" border="0" cellspacing="0" cellpadding="0">
676683
<tr>
677684
<![endif]-->
678-
685+
679686
<!--[if mso]>
680687
<td align="center" valign="top">
681688
<![endif]-->
682-
683-
689+
690+
684691
<table align="left" border="0" cellpadding="0" cellspacing="0" style="display:inline;">
685692
<tbody><tr>
686693
<td valign="top" style="padding-right:10px; padding-bottom:9px;" class="mcnFollowContentItemContainer">
@@ -689,12 +696,12 @@
689696
<td align="left" valign="middle" style="padding-top:5px; padding-right:10px; padding-bottom:5px; padding-left:9px;">
690697
<table align="left" border="0" cellpadding="0" cellspacing="0" width="">
691698
<tbody><tr>
692-
699+
693700
<td align="center" valign="middle" width="24" class="mcnFollowIconContent">
694701
<a href="{{ site.twitter_url }}" target="_blank"><img src="https://cdn-images.mailchimp.com/icons/social-block-v2/color-twitter-48.png" alt="Twitter" style="display:block;" height="24" width="24" class=""></a>
695702
</td>
696-
697-
703+
704+
698705
</tr>
699706
</tbody></table>
700707
</td>
@@ -703,16 +710,16 @@
703710
</td>
704711
</tr>
705712
</tbody></table>
706-
713+
707714
<!--[if mso]>
708715
</td>
709716
<![endif]-->
710-
717+
711718
<!--[if mso]>
712719
<td align="center" valign="top">
713720
<![endif]-->
714-
715-
721+
722+
716723
<table align="left" border="0" cellpadding="0" cellspacing="0" style="display:inline;">
717724
<tbody><tr>
718725
<td valign="top" style="padding-right:10px; padding-bottom:9px;" class="mcnFollowContentItemContainer">
@@ -721,12 +728,12 @@
721728
<td align="left" valign="middle" style="padding-top:5px; padding-right:10px; padding-bottom:5px; padding-left:9px;">
722729
<table align="left" border="0" cellpadding="0" cellspacing="0" width="">
723730
<tbody><tr>
724-
731+
725732
<td align="center" valign="middle" width="24" class="mcnFollowIconContent">
726733
<a href="{{ site.facebook_url }}" target="_blank"><img src="https://cdn-images.mailchimp.com/icons/social-block-v2/color-facebook-48.png" alt="Facebook" style="display:block;" height="24" width="24" class=""></a>
727734
</td>
728-
729-
735+
736+
730737
</tr>
731738
</tbody></table>
732739
</td>
@@ -735,16 +742,16 @@
735742
</td>
736743
</tr>
737744
</tbody></table>
738-
745+
739746
<!--[if mso]>
740747
</td>
741748
<![endif]-->
742-
749+
743750
<!--[if mso]>
744751
<td align="center" valign="top">
745752
<![endif]-->
746-
747-
753+
754+
748755
<table align="left" border="0" cellpadding="0" cellspacing="0" style="display:inline;">
749756
<tbody><tr>
750757
<td valign="top" style="padding-right:10px; padding-bottom:9px;" class="mcnFollowContentItemContainer">
@@ -753,12 +760,12 @@
753760
<td align="left" valign="middle" style="padding-top:5px; padding-right:10px; padding-bottom:5px; padding-left:9px;">
754761
<table align="left" border="0" cellpadding="0" cellspacing="0" width="">
755762
<tbody><tr>
756-
763+
757764
<td align="center" valign="middle" width="24" class="mcnFollowIconContent">
758765
<a href="{{ site.url }}{{ site.baseurl }}" target="_blank"><img src="https://cdn-images.mailchimp.com/icons/social-block-v2/color-link-48.png" alt="Website" style="display:block;" height="24" width="24" class=""></a>
759766
</td>
760-
761-
767+
768+
762769
</tr>
763770
</tbody></table>
764771
</td>
@@ -767,16 +774,16 @@
767774
</td>
768775
</tr>
769776
</tbody></table>
770-
777+
771778
<!--[if mso]>
772779
</td>
773780
<![endif]-->
774-
781+
775782
<!--[if mso]>
776783
<td align="center" valign="top">
777784
<![endif]-->
778-
779-
785+
786+
780787
<table align="left" border="0" cellpadding="0" cellspacing="0" style="display:inline;">
781788
<tbody><tr>
782789
<td valign="top" style="padding-right:10px; padding-bottom:9px;" class="mcnFollowContentItemContainer">
@@ -785,12 +792,12 @@
785792
<td align="left" valign="middle" style="padding-top:5px; padding-right:10px; padding-bottom:5px; padding-left:9px;">
786793
<table align="left" border="0" cellpadding="0" cellspacing="0" width="">
787794
<tbody><tr>
788-
795+
789796
<td align="center" valign="middle" width="24" class="mcnFollowIconContent">
790797
<a href="{{ site.linkedin_url }}" target="_blank"><img src="https://cdn-images.mailchimp.com/icons/social-block-v2/color-linkedin-48.png" alt="LinkedIn" style="display:block;" height="24" width="24" class=""></a>
791798
</td>
792-
793-
799+
800+
794801
</tr>
795802
</tbody></table>
796803
</td>
@@ -799,16 +806,16 @@
799806
</td>
800807
</tr>
801808
</tbody></table>
802-
809+
803810
<!--[if mso]>
804811
</td>
805812
<![endif]-->
806-
813+
807814
<!--[if mso]>
808815
<td align="center" valign="top">
809816
<![endif]-->
810-
811-
817+
818+
812819
<table align="left" border="0" cellpadding="0" cellspacing="0" style="display:inline;">
813820
<tbody><tr>
814821
<td valign="top" style="padding-right:0; padding-bottom:9px;" class="mcnFollowContentItemContainer">
@@ -817,12 +824,12 @@
817824
<td align="left" valign="middle" style="padding-top:5px; padding-right:10px; padding-bottom:5px; padding-left:9px;">
818825
<table align="left" border="0" cellpadding="0" cellspacing="0" width="">
819826
<tbody><tr>
820-
827+
821828
<td align="center" valign="middle" width="24" class="mcnFollowIconContent">
822829
<a href="{{ site.youtube_url }}" target="_blank"><img src="https://cdn-images.mailchimp.com/icons/social-block-v2/color-youtube-48.png" alt="YouTube" style="display:block;" height="24" width="24" class=""></a>
823830
</td>
824-
825-
831+
832+
826833
</tr>
827834
</tbody></table>
828835
</td>
@@ -831,11 +838,11 @@
831838
</td>
832839
</tr>
833840
</tbody></table>
834-
841+
835842
<!--[if mso]>
836843
</td>
837844
<![endif]-->
838-
845+
839846
<!--[if mso]>
840847
</tr>
841848
</table>
@@ -864,7 +871,7 @@
864871
</td>
865872
</tr>
866873
</tbody></table>
867-
<!--
874+
<!--
868875
<td class="mcnDividerBlockInner" style="padding: 18px;">
869876
<hr class="mcnDividerContent" style="border-bottom-color:none; border-left-color:none; border-right-color:none; border-bottom-width:0; border-left-width:0; border-right-width:0; margin-top:0; margin-right:0; margin-bottom:0; margin-left:0;" />
870877
-->
@@ -879,31 +886,31 @@
879886
<table align="left" border="0" cellspacing="0" cellpadding="0" width="100%" style="width:100%;">
880887
<tr>
881888
<![endif]-->
882-
889+
883890
<!--[if mso]>
884891
<td valign="top" width="600" style="width:600px;">
885892
<![endif]-->
886893
<table align="left" border="0" cellpadding="0" cellspacing="0" style="max-width:100%; min-width:100%;" width="100%" class="mcnTextContentContainer">
887894
<tbody><tr>
888-
895+
889896
<td valign="top" class="mcnTextContent" style="padding-top:0; padding-right:18px; padding-bottom:9px; padding-left:18px;">
890-
897+
891898
<em>Copyright © {{ post.year }} Code for Boston, All rights reserved.</em><br>
892899
<br>
893900
<br>
894901
<strong>Our mailing address is:</strong><br>
895902
972 Mission St, 5th floor, San Francisco, CA 94103
896903
<br>
897904
<br>
898-
Want to change how you receive these emails?<br>
905+
<a href="{{{unsubscribe}}}">Click here to unsubscribe.</a>
899906
<br>
900907
</td>
901908
</tr>
902909
</tbody></table>
903910
<!--[if mso]>
904911
</td>
905912
<![endif]-->
906-
913+
907914
<!--[if mso]>
908915
</tr>
909916
</table>
@@ -927,6 +934,4 @@
927934
</tr>
928935
</tbody></table>
929936
</center>
930-
<script type="text/javascript" src="/DSqAWJzcJ/kD/OF/1jBmd4y2LPt_FA/OSaurbSh/WGYpAQ/by/tCXyAxBHoB"></script>
931-
932937
</body></html>

0 commit comments

Comments
 (0)