7 Replies Latest reply on Jul 11, 2019 8:58 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
            • Re: CSS in email alerts
              wes.reneau

              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

                • Re: CSS in email alerts
                  KMSigma

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

                    • Re: CSS in email alerts
                      wes.reneau

                      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.