Hola! ¡Tenemos nuestra Comunidad en Español!

How to share CSS styles across email templates?

Occasional Contributor

I'm having trouble achieving what I think should be a straightforward use case: I've defined a bunch of global, standard CSS styles that I want to apply across multiple email templates, but I don't know how to do so. The goal is to be able to edit these styles in a single place and have the changes reflected across all email templates.

 

This is easy to do in page templates where you have the option of attaching stylesheets, but I see no such option in email templates. So far I've tried including my separate stylesheet file in the "Additional head markup" section of the template builder, like so

 

<style type="text/css" data-hse-inline-css="true">
{{ get_public_template_url('Custom/Email/MINE/email-styles-master.css') }}
</style>

But these styles are not coming through. Is there a proper way to do this (perhaps using HubL tags)?

Reply
0 Upvotes
2 Replies
Highlighted
Advisor

Hi @needle ,

Have you tried to edit the code as following:

from:

 

<style type="text/css" data-hse-inline-css="true">
{{ get_public_template_url('Custom/Email/MINE/email-styles-master.css') }}
</style>

to:

 

<style type="text/css" data-hse-inline-css="true" href="https://www.YOURDOMAIN.COM/Custom/Email/MINE/email-styles-master.css">

so that the "href" part is the complete URL to the CSS? You can find it in the <head>-tag of a template when you insert it.

 

Furthermore it's possible to add a "external" CSS file to the E-Mail template - but you shouldn't do this. Most likely the E-Mail client will display many issues and/or block the Mail because of "spam".

 

Unfortunately the best way to achive a great looking E-Mail template is still by doing it with inline-styling(and tables). 

 

Here are some links for you what you can and can't use in E-Mail styling

 

- CSS Support Guide | Campaign Monitor

Email Client CSS Support | Mailchimp

- Can I Use in HTML Emails

 

 

regards

Anton








check Did my post help answer your query? Help the Community by marking it as a solution
Reply
0 Upvotes
Occasional Contributor

Thank you for the reply @Anton. I tried to edit the code as you suggested, but it results in an error in the editor. I added my CSS as a file in the HubSpot file manager, and referenced it like this in the template

<style rel="stylesheet" data-hse-inline-css="true" href="https://cdn2.hubspot.net/hubfs/[HubSpot_ID]/Global-Assets/global-email-css.css">

However, this is throwing an error in the editor:

Error:Additional <head> markup
Syntax error in "[missing {{token}} value]"

To be clear, my goal isn't to dump these CSS rules in the email head because, as you say, they need to be inlined for the email to render correctly. Is there a way to include global CSS styles in my HubSpot email templates, and have them be inlined by HubSpot?

Reply
0 Upvotes