Adding external stylesheets to the email notification html code on Kingston platform

[Jay Abey]

Hi there,

I am currently trying out stuff on my own developer instance.

I want to apply the following css styling to a button on my email notification (System Notification > Email > Notifications).

css style code:

button:hover{
background-color:#494647;
color: #fff;
}

I have tried following methods and failed to get the output.

1. Creating a stylesheet with this code under "Service Portal > CSS" and linking it inside the email notification's html code as below:

<link href="<sys_id of stylesheet>.cssdbx" rel="stylesheet" />

2. Creating a stylesheet with this code under "Content Management > Design > Style Sheets" and linking it inside the email notification's html code as below:

<link href="<sys_id of stylesheet>.cssdbx" rel="stylesheet" />

3. Adding the style code in <style> tags inside the email notification's html code as below:

<style type="text/css">

button:hover{
background-color:#76903b;
color: #fff;
}

</style>

Would you know a way to achieve this?

Thanks in advance

[Raju Koyagura]

If you are looking for something like below in the email notification, try using source code option in the notifications HTML area and add your styles to it.

[Chris Sanford1 · Accepted solution]

Your number 3 worked for me in my dev instance.

HTML Source Code:

Mouse hover (You can't see the mouse pointer in the screenshot but I am hovering):

[Jay Abey]

Hi Chris,

You are right. What happening was I was using inline styling inside <button> tag as well along with the button hover effects inside <style> tags which made the hover effects not to work. So now I have put all the styling inside the <style> tags.

I came across something else while using style tags though 

Would you know how to get rid of this <span> tag or why it keep getting added to the code automatically?

Thanks in advance,
Jay