This discussion has been locked. The information referenced herein may be inaccurate due to age, software updates, or external references.
You can no longer post new replies to this discussion. If you have a similar question you can start a new discussion in this forum.

CSS in email alerts

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

  • 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="">ORIONSERVER/.../${Node.StatusLED}" alt="${Node.StatusDescription}" width="16" height="16">
    </td>
    <td align="left" valign="middle" class='12'>
    <a href="">ORIONSERVER/.../NodeDetails.aspx / ${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="">ORIONSERVER/.../blank.gif" alt="${StatusDescription}" width="1" height="1">
    </td>
    <td align="left" valign="middle" class='12'>
    <a href="">ORIONSERVER/.../DetachResource.aspx
    </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="">ORIONSERVER/.../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.

  • 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

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

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

  • There's a Feature Request for that.


    Have you voted it up, yet?

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