Modify or Inject Custom CSS into Blog Notification Emails (Mktg Starter)

[BradOliver]

Short: Anyone know how I can inject custom CSS into the HubSpot provided Blog Notification emails in Marketing Hub Starter?  I've tried everything I can think of, but none of it works.

Long: Many of our client's blogs feature an embedded video at the top of the blog page (in what is the summary). When the blog post email notifications are sent, there is a large empty space under each featured image because the container (<div>) that contains the embedded video on the post is rendered empty in the email (as it should be).

I've tried about half a dozen different things to add custom CSS to remove/hide this element, but it always gets stripped out in the emails sent.  For example, I can modify the email template to add a code section where I can place a <style>...</style> section, but it warns that most email clients don't support internal CSS, and they don't.

BTW, Inline Styles won't work here because I would need to add to them to the blog post content, and that would impact the blog post, not just the email.

Any ideas on how I can add this CSS to these emails?

 

[Anton · Accepted solution]

Hey @BradOliver, 

unfortunately you can't create custom email modules in starter. Otherwise I'd have an idea. 

So the only possible solution would be to exclude the video from the summary. 

You could try the |sanitize filter. the email body(source-code view) would look like this:

<div style="{% unless loop.last %} margin-bottom: 32px{% else %}margin-bottom:64px{% endunless %};">
<h2><a href="{{post.url}}" style="color: #3366ff;">{{ post.title }}</a></h2>
<p>{{ post.author_line }} {{ post.publish_date }}</p>
{{ post.featured_image }}
<div>{{ post.summary|sanitize_html("STRIP") }}</div>
<p><a href="{{post.url}}">Read more »</a></p>
</div>

(default email body for example)

best, 

Anton

[BradOliver]

You, sir, are a steely-eyed missle man!

It worked, thank you!!!!!!!

[Anton]

😁

You're welcome!

[BradOliver]

Thanks Anton, I will give it a shot and report back.