Adding Custom Color Setting to the Email Templates

SOLVE
Occasional Contributor

I can change the background color and color of other elements of an individual module in regular template mode by adding inline styling. However, I want to add the color setting for changing the overall color of my email. I tried to clone the email to .html file and update all the color tokens with the hex code, it still doesn't update the color. 

 

I also tried to create a color setting variable using hubl module but it doesn't support "export_to_template_context" now. What should be the replacement for exporting it to entire template? 

 

Please help!

1 Accepted solution

Accepted Solutions
Highlighted
Regular Contributor

I think I ran into a similar problem before and here is my workaround.

 

In the "additional head" of the email template, I've added these lines of code:

<style type="text/css" data-hse-inline-css="true">

#contentCell {
  /* adjusts the color of the body wrapper */
}

#contentTableInner {
  /* adjusts the color of the body */
}

#backgroundTable {
  /* adjusts the color of the page, minus the header and footer */
}

#headerTable {
  /* adjusts the color of the header containing address book */
}

#footerTable {
  /* adjusts the color of the subscription links section */
  background-color: #dedede;
}

body {
  /* background-color: whatever you want */
}
  
</style>

And in whichever part of the email I'm targetting, I add the necessary background-color code.

background-color: #123123;

 

Hopefully that helps! 

2 Replies 2
Highlighted
Regular Contributor

I think I ran into a similar problem before and here is my workaround.

 

In the "additional head" of the email template, I've added these lines of code:

<style type="text/css" data-hse-inline-css="true">

#contentCell {
  /* adjusts the color of the body wrapper */
}

#contentTableInner {
  /* adjusts the color of the body */
}

#backgroundTable {
  /* adjusts the color of the page, minus the header and footer */
}

#headerTable {
  /* adjusts the color of the header containing address book */
}

#footerTable {
  /* adjusts the color of the subscription links section */
  background-color: #dedede;
}

body {
  /* background-color: whatever you want */
}
  
</style>

And in whichever part of the email I'm targetting, I add the necessary background-color code.

background-color: #123123;

 

Hopefully that helps! 

Occasional Contributor

thank you so much Smiley Happy

Reply
0 Upvotes