Re: How to Update Social Media Logos (Twitter & TikTok) in Marketo Email Assets?

rross1CY

Hi everyone,

I'm looking for guidance on updating the social media icons in my Marketo email assets. Specifically, I want to:

Replace the old Twitter logo with the updated one.
Add a TikTok logo with a hyperlink to our TikTok profile.

Does anyone have experience with this? Are there specific steps or best practices for customizing the HTML in Marketo to make these changes? Any tips on sizing, linking, or avoiding rendering issues across email clients would also be appreciated!

Thanks in advance for your help!

Ronnie Ross, M.Ed

Miray

Hi @rross1CY Are you using a snippet for the social footer? I highly recommend using a snippet as it makes management and updates much easier. For changing the images, you can grab the social icons from anywhere, resize them as needed, and then add them to the Marketo asset library. Once they're in the library, you can use the images in Marketo emails, snippets, or landing pages.

Disha_Goyal6

Hi @rross1CY., please share the HTML and after that we will guide you. Otherwise here is the best practices

1. Update the existing icon with new icon but make sure they are in same size

2. If you are using td structure in icons then you have to add new td otherwise it will be same as that of others.

Let me know if you need help with coding.

rross1CY

Hey Disha find the HTML below.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml" style="width: 100%;" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>

<meta class="mktoColor" id="emailBackgroundColor" mktoname="Email Background Color" default="#eeeeee" />
<meta class="mktoColor" id="prehead3BackgroundColor" mktoname="Module Background" default="#ffffff" />
<meta class="mktoList" id="freetextbackground" mktoname="Module Background" default="#EF3E33" values="#ef3e33,#00a4b3,#f9a12d,#0b6672,#fed51e,#4f3a6b,#a92020" mktomodulescope="true" />
<meta class="mktoNumber" id="prehead3Spacer" mktoname="Top Spacer" default="15" min="1" max="300" units="px" step="1" />
<meta class="mktoNumber" id="prehead3Spacer2" mktoname="Spacer Below Right Image" default="10" min="1" max="300" units="px" step="1" />
<meta class="mktoNumber" id="prehead3Spacer3" mktoname="Bottom Spacer" default="15" min="1" max="300" units="px" step="1" />
<meta class="mktoColor" id="header3BackgroundColor" mktoname="Module Background" default="#ffffff" />
<meta class="mktoNumber" id="header3Spacer" mktoname="Top Spacer" default="40" min="1" max="300" units="px" step="1" />
<meta class="mktoColor" id="header3ButtonBackgroundColor" mktoname="Right Button Background Color" default="#ef3e33" />
<meta class="mktoColor" id="header3BorderColor" mktoname="Right Button Border Color" default="#ef3e33" />
<meta class="mktoNumber" id="header3BorderSize" mktoname="Right Button Border Width" default="1" min="0" max="20" units="px" step="1" />
<meta class="mktoNumber" id="header3Spacer2" mktoname="Bottom Spacer" default="40" min="1" max="300" units="px" step="1" />
<meta class="mktoString" id="header3LinkText" mktoname="Right Button Text" default="READ MORE" />
<meta class="mktoString" id="header3Link" mktoname="Right Button Link" default="https://www.cityyear.org" />
<meta class="mktoNumber" id="TwoArticlesTopSpacer" mktoname="Top Spacer" default="10" min="1" max="300" units="px" step="1" mktomodulescope="true" />
<meta class="mktoNumber" id="twoArticles3Spacer2" mktoname="Spacer Below Left Image" default="30" min="1" max="300" units="px" step="1" />
<meta class="mktoNumber" id="TwoArticlesSpacerBelowImage" mktoname="Spacer Below Images" default="10" min="1" max="300" units="px" step="1" mktomodulescope="true" />
<meta class="mktoNumber" id="TwoArticlesSpacerBelowText" mktoname="Spacer Below" default="15" min="0" max="300" units="px" step="1" mktomodulescope="true" />
<meta class="mktoNumber" id="VideoSpacerTop" mktoname="Top Spacer" default="30" min="1" max="300" units="px" step="1" mktomodulescope="true" />
<meta class="mktoNumber" id="VideoSpacerBottom" mktoname="Bottom Spacer" default="30" min="1" max="300" units="px" step="1" mktomodulescope="true" />
<meta class="mktoColor" id="textimagePostBackgroundColor" mktoname="Module Background" default="#ffffff" />
<meta class="mktoNumber" id="textimagePostSpacer" mktoname="Top Spacer" default="60" min="1" max="300" units="px" step="1" />
<meta class="mktoNumber" id="textimagePostSpacer2" mktoname="Spacer Below Image" default="30" min="1" max="300" units="px" step="1" />
<meta class="mktoNumber" id="textimagePostSpacer3" mktoname="Spacer Below Title" default="30" min="1" max="300" units="px" step="1" />
<meta class="mktoNumber" id="textimagePostSpacer4" mktoname="Spacer Below Text" default="30" min="1" max="300" units="px" step="1" />
<meta class="mktoColor" id="textimagePostButtonBackgroundColor" mktoname="Button Background Color" default="#ef3e33" />
<meta class="mktoColor" id="textimagePostBorderColor" mktoname="Button Border Color" default="#ef3e33" />
<meta class="mktoNumber" id="textimagePostBorderSize" mktoname="Button Border Width" default="3" min="0" max="20" units="px" step="1" />
<meta class="mktoNumber" id="textimagePostSpacer5" mktoname="Bottom Spacer" default="40" min="1" max="300" units="px" step="1" />
<meta class="mktoString" id="textimagePostLinkText" mktoname="Button Text" default="READ MORE" />
<meta class="mktoString" id="textimagePostLink" mktoname="Button Link" default="www.cityyear.org" />
<meta class="mktoNumber" id="FreeImageSpacerTop" mktoname="Top Spacer" default="0" min="0" max="300" units="px" step="1" mktomodulescope="true" />
<meta class="mktoNumber" id="FreeImageSpacerBottom" mktoname="Bottom Spacer" default="15" min="1" max="300" units="px" step="1" mktomodulescope="true" />
<meta class="mktoNumber" id="SectionHeaderSpacerTop" mktoname="Top Spacer" default="5" min="1" max="300" units="px" step="1" mktomodulescope="true" />
<meta class="mktoNumber" id="SectionHeaderSpacerBottom" mktoname="Bottom Spacer" default="10" min="1" max="300" units="px" step="1" mktomodulescope="true" />
<meta class="mktoNumber" id="SubSectionHeaderSpacerTop" mktoname="Top Spacer" default="1" min="1" max="300" units="px" step="1" mktomodulescope="true" />
<meta class="mktoNumber" id="SubSectionHeaderSpacerBottom" mktoname="Bottom Spacer" default="1" min="1" max="300" units="px" step="1" mktomodulescope="true" />
<meta class="mktoNumber" id="FreeTextSpacerTop" mktoname="Top Spacer" default="10" min="1" max="300" units="px" step="1" mktomodulescope="true" />
<meta class="mktoNumber" id="FreeTextSpacerBottom" mktoname="Bottom Spacer" default="10" min="1" max="300" units="px" step="1" mktomodulescope="true" />
<meta class="mktoColor" id="SeparatorColor" mktoname="Separator Color" default="#a1a1a1" mktomodulescope="true" />
<meta class="mktoNumber" id="SeparatorSizeHeight" mktoname="Separator Height" default="2" min="0" max="10" units="px" step="1" mktomodulescope="true" />
<meta class="mktoNumber" id="SeparatorSpacerTop" mktoname="Top Spacer" default="10" min="1" max="30" units="px" step="1" mktomodulescope="true" />
<meta class="mktoNumber" id="SeparatorSpacerBottom" mktoname="Bottom Spacer" default="10" min="1" max="30" units="px" step="1" mktomodulescope="true" />
<meta class="mktoNumber" id="threeArticlesSpacer" mktoname="Top Spacer" default="15" min="1" max="300" units="px" step="1" mktomodulescope="true" />
<meta class="mktoNumber" id="ThreeArticlesSpacerBelowImages" mktoname="Spacer Below Images" default="15" min="1" max="300" units="px" step="1" mktomodulescope="true" />
<meta class="mktoNumber" id="threeArticlesSpacer11" mktoname="Bottom Spacer" default="15" min="1" max="300" units="px" step="1" mktomodulescope="true" />
<meta class="mktoColor" id="contacts3BackgroundColor" mktoname="Module Background" default="#ffffff" />
<meta class="mktoNumber" id="contacts3Spacer" mktoname="Top Spacer" default="40" min="1" max="300" units="px" step="1" />
<meta class="mktoNumber" id="contacts3Spacer2" mktoname="Bottom Spacer" default="40" min="1" max="300" units="px" step="1" />
<meta class="mktoString" id="contacts3LinkText" mktoname="Right Link Text" default="" />
<meta class="mktoString" id="contacts3Link" mktoname="Right Link" default="mailto:" />
<meta class="mktoString" id="contacts3LinkText2" mktoname="Right Link Text" default="" />
<meta class="mktoString" id="contacts3Link2" mktoname="Right Link" default="mailto:" />
<meta class="mktoList" id="SectionHeaderColor" mktoname="Section Header Color" default="#ef3e33" values="#ef3e33,#00a4b3,#f9a12d,#0b6672,#fed51e,#4f3a6b,#a92020" mktomodulescope="true" />
<meta class="mktoList" id="linkcolor" mktoname="Link Color" default="#ef3e33" values="#ef3e33,#00a4b3,#f9a12d,#0b6672,#fed51e,#4f3a6b,#a92020" mktomodulescope="true" />
<meta class="mktoNumber" id="CallToActionSpacerTop" mktoname="Spacer Above CTA" default="15" min="1" max="300" units="px" step="1" mktomodulescope="true" />
<meta class="mktoNumber" id="CallToActionSpacerBottom" mktoname="Spacer Below CTA" default="15" min="1" max="300" units="px" step="1" mktomodulescope="true" />
<meta class="mktoString" id="CallToActionLinkText" mktoname="CTA Text" default="READ MORE" mktomodulescope="true" />
<meta class="mktoString" id="CallToActionLink" mktoname="CTA Link" default="www.cityyear.org" mktomodulescope="true" />
<meta class="mktoList" id="CallToActionBackgroundColor" mktoname="CTA Color" default="#ef3e33" values="#ef3e33,#00a4b3,#f9a12d,#0b6672,#fed51e,#4f3a6b,#a92020" mktomodulescope="true" />
<meta class="mktoNumber" id="BlankSpaceSpacerBottom" mktoname="Spacer Height" default="25" min="1" max="300" units="px" step="1" mktomodulescope="true" />
<meta class="mktoNumber" id="ArticleSpacerTop" mktoname="Top Spacer" default="15" min="1" max="300" units="px" step="1" mktomodulescope="true" />
<meta class="mktoNumber" id="ArticleSpacerBottom" mktoname="Bottom Spacer" default="15" min="1" max="300" units="px" step="1" mktomodulescope="true" />
<meta class="mktoNumber" id="EventSpacerTop" mktoname="Top Spacer" default="15" min="1" max="300" units="px" step="1" mktomodulescope="true" />
<meta class="mktoNumber" id="EventSpacerBottom" mktoname="Bottom Spacer" default="15" min="1" max="300" units="px" step="1" mktomodulescope="true" />
<meta class="mktoColor" id="footerBackgroundColor" mktoname="Module Background" default="#ffffff" />
<meta class="mktoString" id="SocialLinkWebsite" mktoname="Website Link" default="https://www.cityyear.org/" mktomodulescope="true" />
<meta class="mktoString" id="SocialLinkFacebook" mktoname="Facebook Link" default="https://www.facebook.com/cityyear" mktomodulescope="true" />
<meta class="mktoString" id="SocialLinkInstagram" mktoname="Instagram Link" default="https://www.instagram.com/cityyear/?hl=en" mktomodulescope="true" />
<meta class="mktoString" id="SocialLinkTwitter" mktoname="Twitter Link" default="https://twitter.com/cityyear" mktomodulescope="true" />
<meta class="mktoString" id="unsubLink" mktoname="Unsubscribe Link" default="https://pages.cityyear.org/Change-Email-Preferences.html" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
<meta name="robots" content="noindex,nofollow" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<style>/* Some resets and issue fixes */
#outlook a { padding:0; }
body{ width:100% !important; -webkit-text; size-adjust:100%; -ms-text-size-adjust:100%; margin:0; padding:0; }
.ReadMsgBody { width: 100%; }
.ExternalClass {width:100%;}
.backgroundTable {margin:0 auto; padding:0; width:100%;!important;}
table td {border-collapse: collapse;}
.ExternalClass * {line-height: 115%;}
/* End reset */</style>
<style> @media only screen and (max-width: 800px) {table.m_boxing { width: 100% !important } } </style>
<style media="all"> @-ms-viewport { width: device-width; } </style>
<style media="all">
@media only screen and (max-width: 640px) {.m_video .mktoVideo tr:first-child img { width: 100% !important; height: auto !important; max-height: auto !important; min-height: auto !important } body { width: auto !important } table[class="table600"] { width: 450px !important }
table[class="table-inner"] { width: 86% !important } table[class="table1-2"] { width: 47% !important; clear: both } table[class="table1-3"] { width: 29.4% !important } table[class="table1-4"] { width: 100% !important; text-align: left !important } table[class="table2-3"] { width: 64% !important;
text-align: left !important } table[class="table3-3"] { width: 100% !important; text-align: left !important; clear: both } table[class="footer-logo"] { width: 10% !important; text-align: right !important } td[class="outer"] { min-width: 0 !important } td[class="stack"] { padding-bottom: 40px
!important } .stack-tablet { padding-bottom: 20px !important; overflow: visible !important; float: none !important; mso-hide: none !important; display: block !important } img[class="mobile-img"] { width: 100% !important; height: auto !important } td[class="center-tablet"] { text-align: left
!important } td[class="hide-tablet"] { display: none !important } table[class="footer-column"] { width: 47% !important; text-align: left !important } tr[class="stack-tablet"] { padding-bottom: 0px !important; display: block !important } .m_hr .table-inner { width: 100% !important } .respimage {
width: 100% !important; height: auto } .m_prehead .cta table { float: none; padding-top: 0; padding-right: auto; padding-bottom: 0; padding-left: auto } .m_prehead2 .menu { text-align: left !important } .m_prehead2 tr[class="stack-tablet"] { padding-bottom: 0 !important; display: block !important }
.m_prehead3 .head { text-align: left !important } .m_prehead3 tr[class="stack-tablet"] { padding-bottom: 0 !important; display: block !important } .m_header td.center-tablet, .m_header2 td.center-tablet, .m_header3 td.center-tablet { text-align: left !important } .m_header td a, .m_header2 td
a, .m_header3 td a { padding-top: 0px !important } .m_header .cta table, .m_header2 .cta table, .m_header3 .cta table { float: none !important; padding-top: 0 !important; padding-right: auto !important; padding-bottom: 0 !important; padding-left: auto !important } .m_header .social, .m_header2 .social,
.m_header3 .social { text-align: left !important } .m_photo-l .table1-3, .m_photo-r .table1-3, .m_photo-l2 .table1-3, .m_photo-r2 .table1-3 { width: 100% !important } .m_photo-l .table2-3, .m_photo-r .table2-3, .m_photo-l2 .table2-3, .m_photo-r2 .table2-3 { width: 100% !important } .m_photo-l
.table2-3 .legenda, .m_photo-r .table2-3 .legenda, .m_photo-l2 .table2-3 .legenda, .m_photo-r2 .table2-3 .legenda { display: none } .m_photo-l .table2-3 .hide-tablet, .m_photo-r .table2-3 .hide-tablet, .m_photo-l2 .table2-3 .hide-tablet, .m_photo-r2 .table2-3 .hide-tablet { display: none }
.m_photo-l .image-title, .m_photo-r .image-title, .m_photo-l2 .image-title, .m_photo-r2 .image-title { text-align: left !important } .m_two-articles .table1-2, .m_two-articles2 .table1-2, .m_two-articles3 .table1-2 { width: 100% !important } .m_two-articles img, .m_two-articles2 img,
.m_two-articles3 img { width: 100% !important; height: auto } .m_two-articles .stack-tablet, .m_two-articles2 .stack-tablet, .m_two-articles3 .stack-tablet { height: 15px } .m_contacts .table1-2 { width: 100% !important } .m_contacts .table1-2 .contents { width: 100% !important } .m_contacts
.table1-2 .contents td { text-align: left !important } .m_contacts img { width: 100% !important } .m_contacts2 .col, .m_contacts3 .col { border-top-style: none !important; border-right-style: none !important; border-bottom-style: none !important; border-left-style: none !important; padding-left:
0 !important } .m_contacts2 .table1-3, .m_contacts3 .table1-3 { width: 100% !important } .m_contacts2 .table1-3 .contents, .m_contacts3 .table1-3 .contents { width: 100% !important } .m_contacts2 .table1-3 .contents td, .m_contacts3 .table1-3 .contents td { text-align: left !important }
.m_social2 .table3-3 { width: 100% !important } .m_social2 .social { text-align: left !important } .m_team .spacer, .m_three-articles .spacer { width: 28px !important } .m_footer .text, .m_footer .unsub { text-align: center !important;
} } @media only screen and (max-width: 479px) {body { width: auto !important } table[class="table600"] { width: 305px !important
} table[class="table-inner"] { width: 80% !important; float: none !important } table[class="table1-2"] { width: 100% !important; clear: both } table[class="table1-3"] { width: 100% !important; clear: both } table[class="table1-4"] { width: 100% !important; text-align: left !important }
table[class="table2-3"] { width: 100% !important; text-align: left !important } table[class="table3-3"] { width: 100% !important; text-align: left !important; clear: both } table[class="footer-logo"] { width: 60% !important; text-align: left !important } td[class="outer"] { min-width: 0
!important } td[class="td3-1"] { width: 60% !important; text-align: left !important } .stack-smartphone { padding-bottom: 10px !important; overflow: visible !important; float: none !important; display: block !important; mso-hide: none !important } td[class="center-smartphone"] { text-align:
center !important } img[class="mobile-img"] { width: 100% !important } td[class="center-tablet"] { text-align: left !important } td[class="hide-smartphone"] { display: none !important } table[class="footer-column"] { width: 100% !important; text-align: left !important } .respimage { width:
305px !important; height: auto } .m_hr .table-inner { width: 100% !important } }
</style>
</head>
<body style="margin-bottom: 0;-webkit-text-size-adjust: 100%;padding-bottom: 0;min-width: 100%;margin-top: 0;margin-right: 0;-ms-text-size-adjust: 100%;margin-left: 0;padding-top: 0;padding-right: 0;padding-left: 0;width: 100%;-webkit-text: ;size-adjust: 100%;margin: 0;padding: 0;">




<div style="display:none; white-space:nowrap; font:15px arial; line-height:0;">
                                                           
</div>

<table width="100%" cellpadding="0" cellspacing="0" style="min-width:100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; border-collapse: collapse;">
<tbody>
<tr>
<td class="outer" valign="top" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; word-break: break-word; -webkit-hyphens: none; -moz-hyphens: none; hyphens: none; min-width: 600px; border-collapse: collapse; background-color: ${emailBackgroundColor};">
<table width="650" align="center" id="boxing" border="0" cellpadding="0" cellspacing="0" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; border-collapse: collapse;" class="m_boxing">
<tbody>
<tr>
<td class="mktoContainer boxedbackground" id="template-wrapper" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; word-break: break-word; -webkit-hyphens: none; -moz-hyphens: none; hyphens: none; border-collapse: collapse; padding-top:30px;">
<table id="free-image" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; border-collapse: collapse; background-color:#ffffff;" align="center" border="0" cellpadding="0" cellspacing="0" width="100%" class="mktoModule m_free-image" mktoname="Free Image">
<tbody>
<tr>
<td style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;border-collapse: collapse; background-color:#eeeeee;" valign="top">
<table class="table600" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; border-collapse: collapse; margin-top: 0; margin-right:auto; margin-bottom: 0; margin-left:auto; background-color:white;" align="center" border="0" cellpadding="0" cellspacing="0" width="600">
<tbody>
<tr>
<td style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;border-collapse: collapse;line-height:${FreeImageSpacerTop};font-size:${FreeImageSpacerTop};" height="${FreeImageSpacerTop}"> </td>
</tr>
<tr>
<td style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; word-break: break-word; -webkit-hyphens: none; -moz-hyphens: none; hyphens: none; border-collapse: collapse;">
<center>
<div style="display:inline-block" class="mktoImg respimage" mktoname="Photo" id="photo4" mktolockimgsize="true">
<a><img class="respimage" src="https://pages.cityyear.org/rs/458-ZZA-943/images/MarketoHeaders_FY20_Strength.jpg" style="-ms-interpolation-mode: bicubic; outline: none; border-right-width: 0; border-bottom-width: 0; border-left-width: 0; text-decoration: none; border-top-width: 0; width: auto; height: auto; max-width: 100%; display: block; line-height: 100%;" height="auto" width="600" /></a>
</div>
</center> </td>
</tr>
<tr>
<td style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;border-collapse: collapse;line-height:${FreeImageSpacerBottom};font-size:${FreeImageSpacerBottom};" height="${FreeImageSpacerBottom}"> </td>
</tr>
</tbody>
</table> </td>
</tr>
</tbody>
</table>
<table id="free-text" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; border-collapse: collapse; background-color:#ffffff;" align="center" border="0" cellpadding="0" cellspacing="0" width="100%" class="mktoModule m_free-text" mktoname="Free Text">
<tbody>
<tr>
<td style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;border-collapse: collapse;background-color:#eeeeee;" valign="top">
<center>
<table class="table600" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; border-collapse: collapse; margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto; background-color:#ffffff;" align="center" border="0" cellpadding="0" cellspacing="0" width="600">
<tbody>
<tr>
<td style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;border-collapse: collapse;line-height:${FreeTextSpacerTop};font-size:${FreeTextSpacerTop};" height="${FreeTextSpacerTop}"> </td>
</tr>
<tr>
<td class="secondary-font text" style="-webkit-hyphens:none; -webkit-text-size-adjust:100%; mso-table-lspace:0pt; mso-table-rspace:0pt; word-break:break-word; -ms-text-size-adjust:100%; -moz-hyphens:none; hyphens:none; font-family:Helvetica, Arial, sans-serif; font-size:16px; line-height:128%; color:#000000; border-collapse:collapse; padding-left:30px; padding-right:30px;">
<div class="mktoText" mktoname="Text" id="text4">
<p>Hi {{lead.First Name:default=edit me}}, <br /><br />Ready to take your interest in City Year to the next level? We're excited to invite you to our upcoming monthly info session tailored for individuals exploring City Year as part of their career journey.<br /><br />Here's what's in store:<br /></p>
<ul>
<li><strong>Explore</strong> the unique opportunities available within City Year and how they align with your goals.</li>
<li><strong>Hear</strong> personal stories and experiences from current AmeriCorps members and/or Alums, giving you a firsthand look at life in the field.</li>
<li><strong>Learn</strong> about the resources and support systems in place to help you thrive in your service.</li>
</ul>
<p>Whether you're nearing the application process or already envisioning yourself as part of our dedicated team, this session is designed to empower you with the knowledge and inspiration you need to make an informed decision.<br /><br />Don't miss out on this chance to deepen your connection with City Year and discover where your passion for service can take you. <br /><br />We can't wait to see you there!<br /><br />{{lead.Lead Owner First Name:default=edit me}} {{lead.Lead Owner Last Name:default=edit me}}<br /></p>
</div> </td>
</tr>
<tr>
<td style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;border-collapse: collapse;line-height:${FreeTextSpacerBottom};font-size:${FreeTextSpacerBottom};" height="${FreeTextSpacerBottom}"> </td>
</tr>
</tbody>
</table>
</center> </td>
</tr>
</tbody>
</table>
<table id="callToAction" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; border-collapse: collapse; background-color:#ffffff;" align="center" border="0" cellpadding="0" cellspacing="0" width="100%" class="mktoModule m_callToAction" mktoname="Call To Action">
<tbody>
<tr>
<td style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;font-family: Helvetica, Arial, sans-serif;border-collapse: collapse; background-color:#eeeeee;" valign="top">
<table class="table600" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; border-collapse: collapse; margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto; background-color:#ffffff;" align="center" border="0" cellpadding="0" cellspacing="0" width="600">
<tbody>
<tr>
<td style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;font-family: helvetica, Arial, sans-serif;border-collapse: collapse;line-height:${CallToActionSpacerTop};font-size:${CallToActionSpacerTop};" height="${CallToActionSpacerTop}"> </td>
</tr>
<tr>
<td class="cta" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; word-break: break-word; -webkit-hyphens: none; -moz-hyphens: none; hyphens: none; font-family: Helvetica, Arial, sans-serif; border-collapse: collapse;">
<center>
<table style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; border-collapse: collapse;" align="center" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100: none; -moz-hyphens: none; hyphens: none; font-family: Helvetica, Arial, sans-serif; border-collapse: collapse;" align="center" bgcolor="${CallToActionBackgroundColor}"> <a href="${CallToActionLink}" target="_blank" class="primary-font button" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;display:
inline-block;font-size: 14px;font-family:Helvetica, Arial, sans-serif;color: #ffffff;padding-top: 10px;padding-right: 20px;padding-bottom:10px; padding-left:20px;background-color:${CallToActionBackgroundColor};text-decoration: none; text-transform:uppercase; letter-spacing:1px; font-weight:bold;">${CallToActionLinkText}</a> </td>
</tr>
</tbody>
</table>
</center> </td>
</tr>
<tr>
<td style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;font-family: Helvetica, Arial, sans-serif;border-collapse: collapse;line-height:${CallToActionSpacerBottom};font-size:${CallToActionSpacerBottom};" height="${CallToActionSpacerBottom}"> </td>
</tr>
</tbody>
</table> </td>
</tr>
</tbody>
</table>
<table id="blankSpace2d6c13d47-747e-4cc7-a5f1-a6463662bcfb" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; border-collapse: collapse;" align="center" border="0" cellpadding="0" cellspacing="0" width="100%" class="mktoModule m_blankSpace" mktoname="Blank Spacer">
<tbody>
<tr>
<td style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;font-family: Helvetica, Arial, sans-serif;border-collapse: collapse;background-color:#eeeeee;" valign="top">
<table class="table600" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; border-collapse: collapse; margin-top: 0; margin-right: auto; margin-bottom:0; margin-left:auto; background-color:#ffffff;" align="center" border="0" cellpadding="0" cellspacing="0" width="600">
<tbody>
<tr>
<td style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;font-family: Helvetica, Arial, sans-serif;border-collapse: collapse;line-height:${BlankSpaceSpacerBottom};font-size:${BlankSpaceSpacerBottom};" height="${BlankSpaceSpacerBottom}"> </td>
</tr>
</tbody>
</table> </td>
</tr>
</tbody>
</table>
<table align="center" border="0" cellpadding="0" cellspacing="0" class="mktoModule m_footer" id="footer" mktoname="Footer" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; border-collapse: collapse;" width="100%">
<tbody>
<tr>
<td bgcolor="#ededed;" class="background" style="-moz-hyphens: none;-webkit-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-ms-text-size-adjust: 100%;hyphens: none;background-color: #ededed;border-top-width: 0px;border-style: none;border-collapse: collapse;" valign="top">

<table align="center" border="0" cellpadding="0" cellspacing="0" class="table600" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; border-collapse: collapse; margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto;" width="600">
<tbody>
<tr>
<td class="padding-y" style="-webkit-hyphens: none; -webkit-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; word-break: break-word; -ms-text-size-adjust: 100%; -moz-hyphens: none; hyphens: none; padding-top: 35px; padding-bottom: 40px; border-collapse: collapse;">

<table border="0" cellpadding="0" cellspacing="0" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; border-collapse: collapse;" width="100%">
<tbody>
<tr>
<td class="secondary-font text" style="-moz-hyphens: none;-webkit-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-ms-text-size-adjust: 100%;hyphens: none;color: #333333;font-size: 11px;font-family:Helvetica, Arial, sans-serif;text-align: left;border-collapse: collapse;"> <span class="secondary-font" style="display:inline;font-family:Helvetica, Arial, sans-serif;"></span>
<div class="mktoText" id="NSPblock" mktoname="NSP" style="display:inline-block;">
<span class="secondary-font" style="display:inline;font-family:Helvetica, Arial, sans-serif;"></span>
<p style="margin-top: 0px; margin-bottom: 25px;"><span class="secondary-font" style="display:inline;font-family:Helvetica, Arial, sans-serif;"><img alt="National Strategic Partners" border="none" constrain="true" height="auto" imagepreview="false" src="https://pages.cityyear.org/rs/458-ZZA-943/images/NLShrzntlLft_black_AmeriCorps20th-bain.png" width="100%" /></span> </p>
</div> </td>
</tr>
</tbody>
</table>


<table border="0" cellpadding="0" cellspacing="0" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; border-collapse: collapse;" width="100%">
<tbody>
<tr>
<td class="secondary-font text" style="-moz-hyphens: none;-webkit-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-ms-text-size-adjust: 100%;hyphens: none; color:#333333; font-size:11px;font-family:Helvetica, Arial, sans-serif;text-align: left; border-collapse: collapse; border-top:solid; border-width:1px; padding-bottom:20px;
line-height:1px; font-size:1px;" height="1">
<div style="display:inline-block;">
</div> </td>
</tr>
</tbody>
</table>


<table align="left" border="0" cellpadding="0" cellspacing="0" class="table1-2" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; border-collapse: collapse;" width="350">
<tbody>
<tr>
<td class="secondary-font text" style="-moz-hyphens: none;-webkit-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace:0pt; word-break: break-word;-webkit-hyphens: none;-ms-text-size-adjust: 100%;hyphens: none;color: #333333;font-size:11px; line-height:13px; font-family:Helvetica, Arial, sans-serif;text-align: left;border-collapse: collapse;">
<div class="mktoText" id="footerText" mktoname="Footer – Legal" style="margin-bottom:10px;padding-bottom:3px">
<p style="margin:0px;">City Year, Inc. © $date.get('yyyy') <br /> 287 Columbus Ave., Boston, MA 02116</p>
</div> </td>
</tr>
</tbody>
</table>


<table align="right" border="0" cellpadding="0" cellspacing="0" class="table1-2" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; border-collapse: collapse;" width="230">
<tbody>
<tr>
<td class="secondary-font text" style="-moz-hyphens: none; -webkit-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; word-break: break-word; -webkit-hyphens: none; -ms-text-size-adjust: 100%; hyphens: none; color: #333333; font-size: 11px; font-family: Helvetica, Arial, sans-serif; text-align: right; border-collapse: collapse; padding-bottom:10px;">
<div id="footerText3" style="display:inline-block">
<p style="margin-top:0px; margin-bottom:10px;"> <a class="secondary-font" href="${SocialLinkWebsite}" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-decoration: none; color: #000000; font-family: Helvetica, Arial, sans-serif; padding-right:0px;" target="_blank" title="City Year Website"> <img alt="Website" constrain="true" width="27" height="21" imagepreview="false" src="https://pages.cityyear.org/rs/458-ZZA-943/images/footer_icon_website_fy20.png" /></a> <a class="secondary-font" href="${SocialLinkFacebook}" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-decoration: none; color: #000000; font-family: Helvetica, Arial, sans-serif; padding-right:0px;" target="_blank" title="Facebook"> <img alt="Facebook" constrain="true" width="30" height="21" imagepreview="false" src="https://pages.cityyear.org/rs/458-ZZA-943/images/footer_icon_facebook_fy20.png" /></a> <a class="secondary-font" href="${SocialLinkInstagram}" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-decoration: none; color: #000000; font-family: Helvetica, Arial, sans-serif; padding-right:0px;" target="_blank" title="Instagram"> <img alt="Instagram" constrain="true" width="29" height="21" imagepreview="false" src="https://pages.cityyear.org/rs/458-ZZA-943/images/footer_icon_instagram_fy20.png" /></a> <a class="secondary-font" href="${SocialLinkTwitter}" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-decoration: none; color: #000000; font-family: Helvetica, Arial, sans-serif; padding-right:0px;" target="_blank" title="Twitter"> <img alt="Twitter" constrain="true" width="29" height="21" imagepreview="false" src="https://pages.cityyear.org/rs/458-ZZA-943/images/footer_icon_twitter_fy19.png" /></a> <br /> </p>
</div> </td>
</tr>
</tbody>
</table>


<table border="0" cellpadding="0" cellspacing="0" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; border-collapse: collapse;" width="100%">
<tbody>
<tr>
<td class="secondary-font text" style="-moz-hyphens: none;-webkit-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-ms-text-size-adjust: 100%;hyphens: none;color: #333333;font-size: 11px;font-family:Helvetica, Arial, sans-serif;text-align: left; border-collapse: collapse; border-top:solid; border-width:1px; padding-bottom:15px;">
<div style="display:inline-block;">
</div> </td>
</tr>
</tbody>
</table>


<table width="100%" cellpadding="0" cellspacing="0" style="min-width:100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; border-collapse: collapse;">
<tbody>
<tr>
<td class="unsub" style="-moz-hyphens: none;-webkit-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-ms-text-size-adjust: 100%;hyphens: none;color: #333333;font-size: 11px;font-family:Helvetica, Arial, sans-serif;text-align: left;border-collapse: collapse;"> <span class="secondary-font" style="display:inline;font-family:Helvetica,
Arial, sans-serif;"></span>
<div id="footerText2" style="display:inline-block;">
<span class="secondary-font" style="display:inline;font-family:Helvetica, Arial, sans-serif;">To stop receiving these emails, you can</span>
</div> <span class="secondary-font" style="display:inline;font-family:Helvetica, Arial, sans-serif;"></span> <a class="secondary-font" href="${unsubLink}" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;text-decoration: none; color:#333333; font-family:Helvetica, Arial, sans-serif; text-decoration:underline;">manage your email preferences</a>. </td>
</tr>
</tbody>
</table>
 </td>
</tr>
</tbody>
</table>
 </td>
</tr>
</tbody>
</table></td>
</tr>
</tbody>
</table> </td>
</tr>
</tbody>
</table>

</body>
</html>

Ronnie Ross, M.Ed

Dave_Roberts

To put this into play at the template level and keeps things in line with your current experience, you'd want to add a new variable to the <head> of your template, just below the id="SocialLinkTwitter" item that looks like this:

<meta class="mktoString" id="SocialLinkTiktok" mktoname="Tik Tok Link" default="__INSERT LINK TO YOUR TIK TOK__" mktomodulescope="true" />

Find the link to your Tik Tok and place that into the default="___" attribute in place of the underscored text placeholder.

Then, toward the bottom of your template, there's a section with your social icons. You'll want to basically copy on of the existing links (<a> ... </a>) and modify that to suit the new Tik Tok link. In the example below, I've added the shell HTML for the new icon/link, it just needs to be updated with the URL of your Tik Tok logo and the dimension of that image.

<p style="margin-top:0px; margin-bottom:10px;"> <a class="secondary-font" href="${SocialLinkWebsite}" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-decoration: none; color: #000000; font-family: Helvetica, Arial, sans-serif; padding-right:0px;" target="_blank" title="City Year Website"> <img alt="Website" constrain="true" width="27" height="21" imagepreview="false" src="https://pages.cityyear.org/rs/458-ZZA-943/images/footer_icon_website_fy20.png" /></a> <a class="secondary-font" href="${SocialLinkFacebook}" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-decoration: none; color: #000000; font-family: Helvetica, Arial, sans-serif; padding-right:0px;" target="_blank" title="Facebook"> <img alt="Facebook" constrain="true" width="30" height="21" imagepreview="false" src="https://pages.cityyear.org/rs/458-ZZA-943/images/footer_icon_facebook_fy20.png" /></a> <a class="secondary-font" href="${SocialLinkInstagram}" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-decoration: none; color: #000000; font-family: Helvetica, Arial, sans-serif; padding-right:0px;" target="_blank" title="Instagram"> <img alt="Instagram" constrain="true" width="29" height="21" imagepreview="false" src="https://pages.cityyear.org/rs/458-ZZA-943/images/footer_icon_instagram_fy20.png" /></a> <a class="secondary-font" href="${SocialLinkTwitter}" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-decoration: none; color: #000000; font-family: Helvetica, Arial, sans-serif; padding-right:0px;" target="_blank" title="Twitter"> <img alt="Twitter" constrain="true" width="29" height="21" imagepreview="false" src="https://pages.cityyear.org/rs/458-ZZA-943/images/footer_icon_twitter_fy19.png" /></a> <a class="secondary-font" href="${SocialLinkTiktok}" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-decoration: none; color: #000000; font-family: Helvetica, Arial, sans-serif; padding-right:0px;" target="_blank" title="Tik Tok"> <img alt="Tik Tok" constrain="true" width="__29__" height="__21__" imagepreview="false" src="__YOUR NEW TIK TOK LOGO FILE PATH GOES HERE__" /></a> <br /> </p>

To get started here, try to find a Tik Tok logo that's 21 pixel in height (or modify the logo you have to be 21px tall and a proportional width to match your other icons). Load that icon into your Design Studio. Next get the URL for that image after you upload it and check the dimensions of that image while you're in there. Finally, grab the code above and replace the width="__29__" and height = "__21__" attribute values with the actual dimensions of your logo. The height should probably stay the same (21) but maybe the width will be different. You'll also want to update the src="..." attribute with the URL to your new logo image in Design Studio. Once you've got the "__UNDERSCORED__" text from the example above modified, you can replace the existing code in your template with this new code.

PRO TIP: If you're not super comfortable editing the HTML of your template, you might want to clone the template first and then work with the cloned version of the template to make sure you get the code setup right before copy/pasting the modified code back into your production template. Alternately, grab all the code from your Email Template and save it as an .html file before you start editing to provide yourself with a safe backup just in case something goes sideways.

michellechopin

In addition to the guidance provided by others, once you make the change to either your snippet or template, you have to do one of two things (depending on what you change):

Snippet: You will have to go through the emails that need to have the updated snippet and replace the prior/old module in your emails with the new version
- This is how ours have to be done - not sure if that's standard or a template setup
Template: You have to re-approve all emails that you want to use that template
- When we have updates for these, we will only update current emails and leave older/previously sent ones either in draft format or we discard the draft so future humans can see what things looked like/how they changed

One final note, if you've migrated your Marketo instance to IMS*, you will have a new email editor shortly (I believe the last update said it's being launched next week) - snippets will only work in the old editor/format; they're called "fragments" in the new editor and are only applicable to the new editor. So, if you're eligible for the new editor, you might want to hold off making any changes/edits until that's in place so you only have to do them once 😊

*If you haven't migrated to IMS yet and you want to know more/have questions, RSVP to the AMA session on Feb 11 and Community leaders will be ready to guide you through all that you need to know.

Dave_Roberts

To replace the Twitter logo with the new one, the best route that I've found for this is to replace the actual image that's loaded from your design studio.

Let's say that right now you've got:

social-icon-twitter.jpg that's 20x20 pixels.

Create a new image that's exactly 20x20 pixels (same dimensions) and name it "social-icon-twitter.jpg" (same name and file extension).

Use the Replace Image/File feature in design studio to upload your new "X" logo in place of the old "bird" logo. In this way, you don't have to go thru any of your templates or email assets to do anything and the change will take place instantly across your instance.