Email notification CSS styling

edhefford
Kilo Expert

Hello ServiceNow friends, I am trying, trying and trying even more to create some basic CSS Styling for outbound email notifications.

I am working on the below notification, basic for now, but all I need is to change the background color of the email body.

The table will remain white, which is the easy bit, but I cannot for the life of me figure this out, or if this is possible using the Email Layout styling.

Example1.JPG

If anyone has any thoughts, id be forever in your debt.

Thanks,

Ed

5 REPLIES 5

Bryan Tay3
Mega Guru

hi Ed,



I had tried it on my instance and i think u can change the css style by adding "style" tag on the souce code on the "message html" field.


find_real_file.png


find_real_file.png


Hope this helps.


roehltablada
Mega Guru

Hi Ed,



The easiest way to create this is to find an HTML designer tool and build it there.



For the images, you can either embed them in the HTML or link them from an external source in the Internet. The former will increase the size of the email while the former will display the image only when connected to the Internet and that the image is publicly available.



Make sure the styles are part of the HTML and not in a separate file.




Regards,



Roehl Tablada


Hi @RoehlTablada, Thanks for this information. I've build the template within an HTML editor, all styled correctly, but still no change in background color. The code is fine, but ServiceNow seems to strip it out of the email layout when it saves. Unsure of what else we can try. Thanks, Ed


Hi Ed,



When I did this, I noticed the <style>...</style> was being messed up by the ServiceNow's HTML editor. So my solution was to use an email script. Use the code: template.print('<div><style>...</style></div>').



Try placing the '<div><style>...</style></div>' in the notification. It might work, too.




Regards,



Roehl Tablada