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.

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

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.

saurabhg · a month ago

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.

CMS Development

Changing the overall background color in email