5 Replies Latest reply on Mar 25, 2019 1:56 PM by KMSigma

    CSS in email alerts

    wes.reneau

      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

        • Re: CSS in email alerts
          KMSigma

          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).

          <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.

          2 of 2 people found this helpful