Changing the overall background color in email

BethanyRP · ‎Aug 23, 2018

I can change the background color of an individual module in regular template mode by adding inline styling, however, I want to change the overall background color of my email to #cccccc. When I clone the email to .html file and update all the background color tolkens with the hex code (tried both with and without #), it still doesn't update the background. Please help!

I'm essentially trying to replicate the basic design of this email with an overall gray background and a white module within it.

saurabhg · ‎Sep 22, 2021

If you are using email templates to create your marketing emails, then the easiest way is to go to Designs Tools module in HubSpot, either create a new Email template or clone an existing one.
Then in the template, under Head and body options > Additional <head> markup > click on Expand and add the following code:

<style>
#bodyCell {background-color: #edfaff!important;}
#templateTable {background-color: #edfaff!important;}
#headerTable {background-color: #edfaff!important;}
#contentCell {background-color: #edfaff!important;}
#footerTable {background-color: #edfaff!important;}
</style>

Preview the email template and make any changes to the background-color values as per your requirement for each section of the email template.
Publish changes and then start creating your marketing email using this template.

Jon_McLaren · ‎Feb 7, 2019

To all looking to know how to do this in a drag n drop email template, without changing the background color globally, you need to add a style tag to the head of your email template

<style type="text/css" data-hse-inline-css="true">
/*replace #cccccc with your background color hex code, do not use shorthand hex codes like #333 use the full 6 character version*/
#backgroundTable{background-color:#cccccc!important;}
</style>

The data-hse-inline-css will inline your css into the html itself.

Messages posted by this account have been preserved for their historical usefulness. Jon has a new profile now.

BethanyRP · ‎Aug 23, 2018

Update. I figured it out. Thanks!

cybelebrooks · ‎Oct 11, 2018

please share how you did it. I'm trying to do the same thing!

cybelebrooks · ‎Nov 5, 2018

It's a global setting under Settings: Marketing: email:
Not one at a time, but easily change the default for all the templates.

anamika123 · ‎Feb 5, 2019

but it's globle setting...if i change here , that change will reflect in all my email templates ...what if i want to get the change in only one email template

CMS Development