cancel
Showing results for 
Search instead for 
Did you mean: 
Create Post
Highlighted
Level 9

CSS in email alerts

Jump to solution

Attended SWUG 2019 in Atlanta and saw some fantastic examples of alerts and trying to replicate that within my own environment has proven elusive.  I'm hoping to include CSS in my alerts, to bring attention to the pertinent information w/o having to use html markup.

I've searched THWACK but I've not gotten any hits on info regarding the email alerts. 

Help appreciated

Wes

Tags (3)
1 Solution

Accepted Solutions
Highlighted
Community Manager
Community Manager

Re: CSS in email alerts

Jump to solution

There are a few examples around.  I posted one years ago when I was trying to get some help on an alert.  This is an example you can use.  You'll need to update the variables to the new syntax (${NodeCaption} and other stuff like that).

pastedImage_1.png

<html>
<head>
<title>Orion Alert: ${AlertName} for ${Caption}</title>
<style type="text/css">/*<![CDATA[*/.o{BACKGROUND-COLOR: #e0e0e0;} .11{FONT-FAMILY: Verdana; font-size: 7pt; COLOR:#000000; text-align: LEFT; vertical-align:TOP}.12{FONT-FAMILY: Verdana; font-size: 7pt; COLOR:#000000; text-align: LEFT; vertical-align:CENTER}.13{FONT-FAMILY: Verdana; font-size: 7pt; COLOR:#000000; text-align: LEFT; vertical-align:BOTTOM}.21{FONT-FAMILY: Verdana; font-size: 7pt; COLOR:#000000; text-align: CENTER; vertical-align:TOP}.22{FONT-FAMILY: Verdana; font-size: 7pt; COLOR:#000000; text-align: CENTER; vertical-align:CENTER}.23{FONT-FAMILY: Verdana; font-size: 7pt; COLOR:#000000; text-align: CENTER; vertical-align:BOTTOM}.31{FONT-FAMILY: Verdana; font-size: 7pt; COLOR:#000000; text-align: RIGHT; vertical-align:TOP}.32{FONT-FAMILY: Verdana; font-size: 7pt; COLOR:#000000; text-align: RIGHT; vertical-align:CENTER}.33{FONT-FAMILY: Verdana; font-size: 7pt; COLOR:#000000; text-align: RIGHT; vertical-align:BOTTOM}.h1{FONT-FAMILY: Verdana; font-size: 12pt; COLOR:navy; text-align: LEFT; font-weight: BOLD; vertical-align:CENTER}.h2{FONT-FAMILY: Verdana; font-size: 10pt; COLOR:gray; text-align: LEFT; font-weight: BOLD; vertical-align:CENTER}.h3{FONT-FAMILY: Verdana; font-size: 7pt; COLOR:gray; text-align: LEFT; font-weight: BOLD; vertical-align:CENTER}.h4{FONT-FAMILY: Verdana; font-size: 7pt; COLOR:gray; text-align: LEFT; vertical-align:CENTER}.chl{FONT-FAMILY: Verdana; font-size: 7pt; font-weight: BOLD; COLOR:white; text-align: LEFT;}.chc{FONT-FAMILY: Verdana; font-size: 7pt; font-weight: BOLD; COLOR:white; text-align: CENTER;}.chr{FONT-FAMILY: Verdana; font-size: 7pt; font-weight: BOLD; COLOR:white; text-align: RIGHT;}.toc{text-align: LEFT;}/*]]>*/</style>
</head>
<body>
<table cellspacing="0" cellpadding="1" width="792" border="0">
<tr>
<td>
<table cellspacing="0" cellpadding="0" width="792" border="0">
<tr> <td class='h1'>${Node.Caption} (${Node.IP_Address}) has lost IP Routing with Neighbor at ${NeighborIP}</td>
</tr>
<tr> <td class='h2'>This alert has been triggered because BGP Status on ${Node.Caption} (${Node.IP_Address}) has been lost with Neighbor (${NeighborIP}).</td>
</tr>
<tr>
<td> </td>
</tr>
</table>
<table cellspacing="0" cellpadding="1" width="792" border="1" bordercolor="#003366">
<tr>
<td>
<table cellspacing="0" cellpadding="3" width="100%" border="0">
<tr>
<td align="left" valign="middle" bgcolor="#003366" class='chl'>Node</td>
<td width="16" align="left" valign="middle" class='12'>
<img src="http://ORIONSERVER/Orion/images/StatusIcons/${Node.StatusLED}" alt="${Node.StatusDescription}" width="16" height="16">
</td>
<td align="left" valign="middle" class='12'>
<a href="http://ORIONSERVER/Orion/NetPerfMon/NodeDetails.aspx?NetObject=N:${Node.NodeID}">${Node.Caption} / ${Node.IP_Address}</a>
</td>
</tr>
<tr> <td align="left" valign="middle" bgcolor="#003366" class='chl'>Neighbor IP</td>
<td width="16" align="left" valign="middle" class='12'>
<img src="http://ORIONSERVER/NetPerfMon/images/blank.gif" alt="${StatusDescription}" width="1" height="1">
</td>
<td align="left" valign="middle" class='12'>
<a href="http://ORIONSERVER/Orion/DetachResource.aspx?ResourceID=1802&NetObject=N:${Node.NodeID}">${NeighborIP}</a>
</td>
</tr>
<tr> <td align="left" valign="middle" bgcolor="#003366" class='chl'>Current Status</td>
<td width="16" align="left" valign="middle" class='12'>
<img src="http://ORIONSERVER/NetPerfMon/images/blank.gif" width="1" height="1" alt="${InterfaceTypeDescription}">
</td>
<td align="left" valign="middle" class='12'>${DisplayName} (${ProtocolStatus})</td>
</tr>
<tr>
<td align="left" valign="middle" bgcolor="#003366" class='chl'>DNS Name</td>
<td width="16" align="left" valign="middle" class='12'> </td>
<td align="left" valign="middle" class='12'>${Node.DNS}</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>

This was me doing it by hand years ago, so my CSS is elementary at best.  But it should give you a good jumping off point.

"Shoot for the stars to reach the moon"

View solution in original post

7 Replies
Highlighted
Community Manager
Community Manager

Re: CSS in email alerts

Jump to solution

There are a few examples around.  I posted one years ago when I was trying to get some help on an alert.  This is an example you can use.  You'll need to update the variables to the new syntax (${NodeCaption} and other stuff like that).

pastedImage_1.png

<html>
<head>
<title>Orion Alert: ${AlertName} for ${Caption}</title>
<style type="text/css">/*<![CDATA[*/.o{BACKGROUND-COLOR: #e0e0e0;} .11{FONT-FAMILY: Verdana; font-size: 7pt; COLOR:#000000; text-align: LEFT; vertical-align:TOP}.12{FONT-FAMILY: Verdana; font-size: 7pt; COLOR:#000000; text-align: LEFT; vertical-align:CENTER}.13{FONT-FAMILY: Verdana; font-size: 7pt; COLOR:#000000; text-align: LEFT; vertical-align:BOTTOM}.21{FONT-FAMILY: Verdana; font-size: 7pt; COLOR:#000000; text-align: CENTER; vertical-align:TOP}.22{FONT-FAMILY: Verdana; font-size: 7pt; COLOR:#000000; text-align: CENTER; vertical-align:CENTER}.23{FONT-FAMILY: Verdana; font-size: 7pt; COLOR:#000000; text-align: CENTER; vertical-align:BOTTOM}.31{FONT-FAMILY: Verdana; font-size: 7pt; COLOR:#000000; text-align: RIGHT; vertical-align:TOP}.32{FONT-FAMILY: Verdana; font-size: 7pt; COLOR:#000000; text-align: RIGHT; vertical-align:CENTER}.33{FONT-FAMILY: Verdana; font-size: 7pt; COLOR:#000000; text-align: RIGHT; vertical-align:BOTTOM}.h1{FONT-FAMILY: Verdana; font-size: 12pt; COLOR:navy; text-align: LEFT; font-weight: BOLD; vertical-align:CENTER}.h2{FONT-FAMILY: Verdana; font-size: 10pt; COLOR:gray; text-align: LEFT; font-weight: BOLD; vertical-align:CENTER}.h3{FONT-FAMILY: Verdana; font-size: 7pt; COLOR:gray; text-align: LEFT; font-weight: BOLD; vertical-align:CENTER}.h4{FONT-FAMILY: Verdana; font-size: 7pt; COLOR:gray; text-align: LEFT; vertical-align:CENTER}.chl{FONT-FAMILY: Verdana; font-size: 7pt; font-weight: BOLD; COLOR:white; text-align: LEFT;}.chc{FONT-FAMILY: Verdana; font-size: 7pt; font-weight: BOLD; COLOR:white; text-align: CENTER;}.chr{FONT-FAMILY: Verdana; font-size: 7pt; font-weight: BOLD; COLOR:white; text-align: RIGHT;}.toc{text-align: LEFT;}/*]]>*/</style>
</head>
<body>
<table cellspacing="0" cellpadding="1" width="792" border="0">
<tr>
<td>
<table cellspacing="0" cellpadding="0" width="792" border="0">
<tr> <td class='h1'>${Node.Caption} (${Node.IP_Address}) has lost IP Routing with Neighbor at ${NeighborIP}</td>
</tr>
<tr> <td class='h2'>This alert has been triggered because BGP Status on ${Node.Caption} (${Node.IP_Address}) has been lost with Neighbor (${NeighborIP}).</td>
</tr>
<tr>
<td> </td>
</tr>
</table>
<table cellspacing="0" cellpadding="1" width="792" border="1" bordercolor="#003366">
<tr>
<td>
<table cellspacing="0" cellpadding="3" width="100%" border="0">
<tr>
<td align="left" valign="middle" bgcolor="#003366" class='chl'>Node</td>
<td width="16" align="left" valign="middle" class='12'>
<img src="http://ORIONSERVER/Orion/images/StatusIcons/${Node.StatusLED}" alt="${Node.StatusDescription}" width="16" height="16">
</td>
<td align="left" valign="middle" class='12'>
<a href="http://ORIONSERVER/Orion/NetPerfMon/NodeDetails.aspx?NetObject=N:${Node.NodeID}">${Node.Caption} / ${Node.IP_Address}</a>
</td>
</tr>
<tr> <td align="left" valign="middle" bgcolor="#003366" class='chl'>Neighbor IP</td>
<td width="16" align="left" valign="middle" class='12'>
<img src="http://ORIONSERVER/NetPerfMon/images/blank.gif" alt="${StatusDescription}" width="1" height="1">
</td>
<td align="left" valign="middle" class='12'>
<a href="http://ORIONSERVER/Orion/DetachResource.aspx?ResourceID=1802&NetObject=N:${Node.NodeID}">${NeighborIP}</a>
</td>
</tr>
<tr> <td align="left" valign="middle" bgcolor="#003366" class='chl'>Current Status</td>
<td width="16" align="left" valign="middle" class='12'>
<img src="http://ORIONSERVER/NetPerfMon/images/blank.gif" width="1" height="1" alt="${InterfaceTypeDescription}">
</td>
<td align="left" valign="middle" class='12'>${DisplayName} (${ProtocolStatus})</td>
</tr>
<tr>
<td align="left" valign="middle" bgcolor="#003366" class='chl'>DNS Name</td>
<td width="16" align="left" valign="middle" class='12'> </td>
<td align="left" valign="middle" class='12'>${Node.DNS}</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>

This was me doing it by hand years ago, so my CSS is elementary at best.  But it should give you a good jumping off point.

"Shoot for the stars to reach the moon"

View solution in original post

Highlighted
Level 9

Re: CSS in email alerts

Jump to solution

Thank you.  This is an excellent starter.  I changed my search and found a few but most were highly involved, I can borrow from your code. 
Much appreciated

WR

Highlighted
Community Manager
Community Manager

Re: CSS in email alerts

Jump to solution

Borrow, steal, acquire, repurpose, import, whatever.  I have no ego where my code is involved.

"Shoot for the stars to reach the moon"
Highlighted
Level 9

Re: CSS in email alerts

Jump to solution

Probably worth noting for posterity...

I'd been using Eclipse to write the HTML in the traditional format, using spaces and blank lines to make it more readable.  When I got the format I wanted in my html I'd copy/paste to the trigger actions editor only to find wildly varying results.  After reading a bit of related posts I learned of the html condenser.   So I copied my html into said condenser pasted the output into the trigger action alert and VIOLA, a beautifully formatted email.  Not big white wasted space near the top and unexplained blank lines.  A noob issue but maybe it saves someone a few minutes of their day.

0 Kudos
Community Manager
Community Manager

Re: CSS in email alerts

Jump to solution

There's a Feature Request for that.


Have you voted it up, yet?

"Shoot for the stars to reach the moon"
Highlighted

Re: CSS in email alerts

Jump to solution

KMSigma​ - can you send out the link to the other posts about adding CSS formatting to alerts?  I've been searching around the THWACK Community​ and this is the only one I can find.  Might be because I'm worn out from the "30 minute" drive which I guess in NY really means 90 minutes because that is how long it took us to get to our second hotel.

0 Kudos
Highlighted
Community Manager
Community Manager

Re: CSS in email alerts

Jump to solution

This is the link i included:

https://thwack.solarwinds.com/thread/39984#231706

Which may be linked earlier in this message elsewhere.

I've got the complete HTML in an inline format, (because you needed to do that at the time).  It works though.

"Shoot for the stars to reach the moon"
0 Kudos