Changing the overall background color in email

BethanyRP
Member

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.

 

Screen Shot 2018-08-23 at 9.14.34 AM.png

0 Upvotes
6 Replies 6
BethanyRP
Member

Update. I figured it out. Thanks!

cybelebrooks
Member

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

cybelebrooks
Member

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

0 Upvotes
anamika123
Member

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
Top Contributor

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.
0 Upvotes
saurabhg
Participant

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.

0 Upvotes