CMS Development

BethanyRP
Member

Changing the overall background color in email

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
saurabhg
Participant

Changing the overall background color in email

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

Changing the overall background color in email

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
BethanyRP
Member

Changing the overall background color in email

Update. I figured it out. Thanks!

cybelebrooks
Participant

Changing the overall background color in email

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

cybelebrooks
Participant

Changing the overall background color in email

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

Changing the overall background color in email

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