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.

Sample HTML & CSS Alert Template

After viewing the THWACKcamp 2020 session on Crafting Alerts That Get Noticed, I realized that I never took the opportunity to share my own Email Template.

For the betterment of the community, I've decided to share this with everyone.

silverbacksays_0-1605808068926.png

Based on the alert type (or if it's a reset event) you can choose the section you want to include and comment out or delete the others.

I have a few of my own recommendations:

  • Like  mentioned in his session, separating the alert-based information from the triggered object-based information is a good idea.  I put the alert-based variables in the "General" section (either at the top, the bottom, or possibly both).
  • For the object-based variables, I prefer to use them in the shaded areas to draw the eye quickly.
  • If you want to include icons (jpg, png, or gif) you can Base64-encode them and embed them directly in the HTML.  It saves some of the trouble of updating links or relying on a steady internet connection.  I've done this with my logo at the bottom as an example.

I provide this here for everyone's enjoyment.  Please feel free to make edits and ask questions.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link rel="icon" sizes="" href="https://yt3.ggpht.com/a-/AN66SAzzGZByUtn6CpHHJVIEOuqQbvAqwgPiKy1RTw=s900-mo-c-c0xffffffff-rj-k-no" type="image/jpg" />
    <title>SolarWinds Orion Email Alert Template</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style>
        body {
            background-color: #f0f0f0;
            font-family: Arial, sans-serif;
            color: #404040;
        }

        .center {
            text-align: center;
        }

        .tight {
            padding: 15px 30px;
        }

        td {
            padding: 20px 50px 30px 50px;
        }

        td.notification {
            padding: 10px 50px 30px 50px;
        }

        small,
        .small {
            font-size: 12px;
        }

        .footer {
            padding: 15px 30px;
        }

        .footer p {
            font-size: 12px;
            margin: 0;
            color: #606060;
        }

        a,
        a:hover,
        a:visited {
            color: #000000;
            text-decoration: underline;
        }

        h1,
        h2 {
            font-size: 22px;
            color: #404040;
            font-weight: normal;
        }

        p {
            font-size: 15px;
            color: #606060;
        }

        .general {
            background-color: white;
        }

        .notification h1 {
            font-size: 26px;
            color: #000000;
            font-weight: normal;
        }

        .notification p {
            font-size: 18px;
        }

        .notification p.small {
            font-size: 14px;
        }

        .icon {
            width: 32px;
            height: 32px;
            line-height: 32px;
            display: inline-block;
            text-align: center;
            border-radius: 16px;
            margin-right: 10px;
        }

        .failure {
            border-top: 20px #b02020 solid;
            background-color: #db9c9b;
        }

        .critical {
            border-top: 20px #c05050 solid;
            background-color: #e2afae;
        }

        .warning {
            border-top: 20px #c08040 solid;
            background-color: #e0c4aa;
        }

        .healthy {
            border-top: 20px #80c080 solid;
            background-color: #c6e2c3;
        }

        .information {
            border-top: 20px #50a0c0 solid;
            background-color: #b5d5e2;
        }

        .failure p {
            color: #3d120f;
        }

        .critical p {
            color: #3d211f;
        }

        .warning p {
            color: #44311c;
        }

        .healthy p {
            color: #364731;
        }

        .information p {
            color: #273c47;
        }

        .failure .icon {
            background-color: #b02020;
            color: #ffffff;
        }

        .critical .icon {
            background-color: #c05050;
            color: #ffffff;
            font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
        }

        .warning .icon {
            background-color: #c08040;
            color: #ffffff;
            font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
        }

        .healthy .icon {
            background-color: #80c080;
            color: #ffffff;
        }

        .information .icon {
            background-color: #50a0c0;
            color: #ffffff;
            font-family: Georgia, "Times New Roman", Times, serif;
            font-style: italic;
        }

        .content {
            width: 600px;
        }

        @media only screen and (max-width: 600px) {
            .content {
                width: 100%;
            }
        }

        @media only screen and (max-width: 400px) {
            td {
                padding: 15px 25px;
            }

            h1,
            h2 {
                font-size: 20px;
            }

            p {
                font-size: 13px;
            }

            small,
            .small {
                font-size: 11px;
            }

            td.notification {
                text-align: center;
                padding: 10px 25px 15px 25px;
            }

            .notification h1 {
                font-size: 22px;
            }

            .notification p {
                font-size: 16px;
            }

            .notification p.small {
                font-size: 12px;
            }

            .icon {
                display: block;
                margin: 0 auto 10px auto;
            }
        }
    </style>
</head>

<body style="margin: 0; padding: 0">
    <table style="border: none" cellpadding="0" cellspacing="0" width="100%">
        <tr>
            <td style="padding: 15px 0">
                <table style="border: none; margin-left: auto; margin-right: auto" cellpadding="0" cellspacing="0" width="600" class="content">
                    <!-- Start: Small header text in pale grey email background -->
                    <tr>
                        <td class="center tight small"><a href="https://www.solarwinds.com/solutions/orion" target="_blank">SolarWinds Orion</a> Email Alert Template</td>
                    </tr>
                    <!-- End: Small header text in pale grey email background -->

                    <!-- Start: White block with text content -->
                    <tr>
                        <td class="general center">
                            <h1>General Section</h1>
                            <p>This is a general section with some more information inside it.</p>
                            <p class="small">Any supplementary information</p>
                            <p class="small"><a href="#attribution">Template Attribution</a></p>
                        </td>
                    </tr>
                    <!-- End: White block with text content -->

                    <!-- Start: Failure Notification -->
                    <tr>
                        <td class="failure notification">
                            <h1><span class="icon">&times;</span>Failure</h1>
                            <p>The "something or other" system has failed</p>
                            <p class="small">Any supplementary information</p>
                        </td>
                    </tr>
                    <!-- End: Failure Notification -->

                    <!-- Start: Critical Notification -->
                    <tr>
                        <td class="critical notification">
                            <h1><span class="icon">&excl;</span>Critical</h1>
                            <p>The "something or other" system is critical</p>
                            <p class="small">Any supplementary information</p>
                        </td>
                    </tr>
                    <!-- End: Critical Notification -->

                    <!-- Start: Warning Notification -->
                    <tr>
                        <td class="warning notification">
                            <h1><span class="icon">&quest;</span>Warning</h1>
                            <p>The "something or other" system warning</p>
                            <p class="small">Any supplementary information</p>
                        </td>
                    </tr>
                    <!-- End: Warning Notification -->

                    <!-- Start: Healthy Notification -->
                    <tr>
                        <td class="healthy notification">
                            <h1><span class="icon">&check;</span>Healthy</h1>
                            <p>The "something or other" system is healthy</p>
                            <p class="small">Any supplementary information</p>
                        </td>
                    </tr>
                    <!-- End: Healthy Notification -->

                    <!-- Start: Information Notification -->
                    <tr>
                        <td class="information notification">
                            <h1><span class="icon">i</span>Information</h1>
                            <p>The "something or other" system information</p>
                            <p class="small">Any supplementary information</p>
                        </td>
                    </tr>
                    <!-- End: Information Notification -->

                    <!-- Start: White block with text content -->
                    <tr>
                        <td class="general center">
                            <h2>General Section</h2>
                            <p>This is a general section with some more information inside it.</p>
                            <p class="small">Any supplementary information</p>
                        </td>
                    </tr>
                    <!-- End: White block with text content -->

                    <!-- Start: Footer block in pale grey email background -->
                    <tr>
                        <td class="footer">
                            <table style="border: none" id="attribution">
                                <tr>
                                    <td><a href="https://silverback.systems/" target="_blank"><img src="data&colon;image/png;base64,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" alt="Silverback Systems Services Ltd" /></a>
                                    <td>Template Provided Courtesy of <a href="https://silverback.systems/" target="_blank">Silverback Systems Services Ltd</a></td>
                                </tr>
                            </table>
                            <p> <a href="https://www.solarwinds.com/">Any Links</a> | <a href="https://www.solarwinds.com/">Another Link</a> </p>
                        </td>
                    </tr>
                    <!-- End: Footer block in pale grey email background -->
                </table>
            </td>
        </tr>
    </table>
</body>

</html>
Parents
  • Hi all,

    Thank you for the code shared. I am not a web guru by any means, but I kind of get how HTML works. I am attempting to re-create KMSigma's alert from his video.

    From your comments and his video, i've gotten things a good way started, but something wierd is happening. When I do a simulate and see the alert right in the solarwinds page, after I did that 'compressing' that someone below mentioned, it works... although it still doesnt look exactly like KMSigma in his video, its gotten a lot closer.

    As you can see, there is a big gap between where "Message:" starts and the alert message itself.

    Also... when I do a simulate and execute (just emailing myself the alert for testing), I get the email and it prints out all of my css info as text in my email. Here's 2 screenshots since I have to scroll to display the issue-

    As you can see at the very bottom, i'm definitely getting somewhere, just need to figure out the code to make my tables actually have visible borders and get the <title> to actually show.

    Here's the code in use (i removed the host and domain of the internal URLs)-

    <!DOCTYPE html>
    <html>
      <head>
        <title>
          Orion Alert: ${N=Alerting;M=AlertName} for ${N=SwisEntity;M=Caption} on ${N=SwisEntity;M=Node.Caption}
        </title>
        <style type="text/css">
          .alert_header {
            font-family: calibri;
            font-size16pt;
            color#292929;
            text-alignleft;
            font-weightbold;
            vertical-aligncenter;
          }

          .alert_description {
            font-family: calibri;
            font-size14pt;
            color#444444;
            text-alignleft;
            font-weightbold;
            vertical-aligncenter;
          }

          .alert_details {
            font-family: calibri;
            font-size10pt;
            colorgray;
            text-alignleft;
            font-weightbold;
            vertical-aligncenter;
          }

          .header_table {
            bordernone;
            width100%;
          }

          .metrics_table {
            border1px solid #04C9D7;
            border-collapsecollapse;
            width100%;
          }

          th {
            font-family: calibri;
            font-size12pt;
            font-weightbold;
            colorwhite;
            background-color#f99d1c;
            text-alignleft;
            vertical-alignmiddle;
          }

          td {
            font-family: calibri;
            font-size12pt;
            font-weightnormal;
            color#423491;
            background-color#eeeeee;
            text-alignleft;
            vertical-alignmiddle;
          }

          body {
            background-color#eeeeee/* not quite white */
          }
        </style>
      </head>

      <body>
        <table cellspacing="0" cellpadding="1" width="792px">
          <tr>
            <td>
              <table class="header_table" cellspacing="0" cellpadding="0">
                <tr>
                  <td class="alert_header">
                    ${N=SwisEntity;M=Caption} on ${N=SwisEntity;M=Node.Caption} has less than 10% and 1GB free space.
                  </td>
                </tr>
                <tr>
                  <td class="alert_description">
                    There is less than 10% and 1GB free on ${N=SwisEntity;M=Caption} on ${N=SwisEntity;M=Node.Caption}.
                    <ol>
                      <li>Temporary files have already been deleted by an alert action</li>
                      <li>Web logs older than 14 days have already been deleted by an alert action</li>
                    </ol>
                  </td>
                </tr>
                <tr>
                  <td class="alert_details">
                    Alert Name: ${N=Alerting;M=AlertName} / Trigger Time: ${N=Alerting;M=AlertTriggerTime;F=DateTime}
                  </td>
                </tr>
              </table>
              <table class="metrics_table" cellspacing="0" cellpadding="1" width="792">
                <tr>
                  <td>
                    <table cellspacing="0" cellpadding="3" width="100%">
                      <tr>
                        <th>Node</th>
                        <td>
                          <img src="">xxxxx/.../${N=SwisEntity;M=Node.StatusLED}" alt="${N=SwisEntity;M=Node.StatusDescription}" width="16" height="16" />
                        </td>
                        <td>
                          <a href="">xxxxx/.../NodeDetails.aspx>${N=SwisEntity;M=Node.Caption} / ${N=SwisEntity;M=Node.IP_Address}</a>
                        </td>
                      </tr>
                      <tr>
                        <th>Volume</th>
                        <td>
                          <img src="">xxxxx/.../${N=SwisEntity;M=Icon}" alt="${N=SwisEntity;M=Caption}" width="16" height="16" />
                        </td>
                        <td>
                          <a href="">xxxxx/.../VolumeDetails>${N=SwisEntity;M=Caption}</a>
                        </td>
                      </tr>
                      <tr>
                        <th>Volume Status</th>
                        <td>
                          <img src="">xxxxx/.../${N=SwisEntity;M=StatusIcon}" width="16" height="16" alt="${N=SwisEntity;M=Status}" />
                        </td>
                        <td>${N=SwisEntity;M=StatusDescription}</td>
                      </tr>
                      <tr>
                        <th>Free Space</th>
                        <td></td>
                        <td>
                          ${N=SwisEntity;M=VolumeSpaceAvailable} of ${N=SwisEntity;M=VolumeSize} (${N=SwisEntity;M=VolumePercentAvailable} free)
                        </td>
                      </tr>
                    </table>
                  </td>
                </tr>
              </table>
            </td>
          </tr>
          <tr>
            <td class="alert_details">
              Alert Description: ${N=Alerting;M=AlertDescription}
            </td>
          </tr>
          <tr>
            <td class="alert_details">
              Acknowledge ${N=Alerting;M=AcknowledgeUrl}
            </td>
          </tr>
        </table>
      </body>
    </html>

    Any help is very appreciated, thank you.

Reply
  • Hi all,

    Thank you for the code shared. I am not a web guru by any means, but I kind of get how HTML works. I am attempting to re-create KMSigma's alert from his video.

    From your comments and his video, i've gotten things a good way started, but something wierd is happening. When I do a simulate and see the alert right in the solarwinds page, after I did that 'compressing' that someone below mentioned, it works... although it still doesnt look exactly like KMSigma in his video, its gotten a lot closer.

    As you can see, there is a big gap between where "Message:" starts and the alert message itself.

    Also... when I do a simulate and execute (just emailing myself the alert for testing), I get the email and it prints out all of my css info as text in my email. Here's 2 screenshots since I have to scroll to display the issue-

    As you can see at the very bottom, i'm definitely getting somewhere, just need to figure out the code to make my tables actually have visible borders and get the <title> to actually show.

    Here's the code in use (i removed the host and domain of the internal URLs)-

    <!DOCTYPE html>
    <html>
      <head>
        <title>
          Orion Alert: ${N=Alerting;M=AlertName} for ${N=SwisEntity;M=Caption} on ${N=SwisEntity;M=Node.Caption}
        </title>
        <style type="text/css">
          .alert_header {
            font-family: calibri;
            font-size16pt;
            color#292929;
            text-alignleft;
            font-weightbold;
            vertical-aligncenter;
          }

          .alert_description {
            font-family: calibri;
            font-size14pt;
            color#444444;
            text-alignleft;
            font-weightbold;
            vertical-aligncenter;
          }

          .alert_details {
            font-family: calibri;
            font-size10pt;
            colorgray;
            text-alignleft;
            font-weightbold;
            vertical-aligncenter;
          }

          .header_table {
            bordernone;
            width100%;
          }

          .metrics_table {
            border1px solid #04C9D7;
            border-collapsecollapse;
            width100%;
          }

          th {
            font-family: calibri;
            font-size12pt;
            font-weightbold;
            colorwhite;
            background-color#f99d1c;
            text-alignleft;
            vertical-alignmiddle;
          }

          td {
            font-family: calibri;
            font-size12pt;
            font-weightnormal;
            color#423491;
            background-color#eeeeee;
            text-alignleft;
            vertical-alignmiddle;
          }

          body {
            background-color#eeeeee/* not quite white */
          }
        </style>
      </head>

      <body>
        <table cellspacing="0" cellpadding="1" width="792px">
          <tr>
            <td>
              <table class="header_table" cellspacing="0" cellpadding="0">
                <tr>
                  <td class="alert_header">
                    ${N=SwisEntity;M=Caption} on ${N=SwisEntity;M=Node.Caption} has less than 10% and 1GB free space.
                  </td>
                </tr>
                <tr>
                  <td class="alert_description">
                    There is less than 10% and 1GB free on ${N=SwisEntity;M=Caption} on ${N=SwisEntity;M=Node.Caption}.
                    <ol>
                      <li>Temporary files have already been deleted by an alert action</li>
                      <li>Web logs older than 14 days have already been deleted by an alert action</li>
                    </ol>
                  </td>
                </tr>
                <tr>
                  <td class="alert_details">
                    Alert Name: ${N=Alerting;M=AlertName} / Trigger Time: ${N=Alerting;M=AlertTriggerTime;F=DateTime}
                  </td>
                </tr>
              </table>
              <table class="metrics_table" cellspacing="0" cellpadding="1" width="792">
                <tr>
                  <td>
                    <table cellspacing="0" cellpadding="3" width="100%">
                      <tr>
                        <th>Node</th>
                        <td>
                          <img src="">xxxxx/.../${N=SwisEntity;M=Node.StatusLED}" alt="${N=SwisEntity;M=Node.StatusDescription}" width="16" height="16" />
                        </td>
                        <td>
                          <a href="">xxxxx/.../NodeDetails.aspx>${N=SwisEntity;M=Node.Caption} / ${N=SwisEntity;M=Node.IP_Address}</a>
                        </td>
                      </tr>
                      <tr>
                        <th>Volume</th>
                        <td>
                          <img src="">xxxxx/.../${N=SwisEntity;M=Icon}" alt="${N=SwisEntity;M=Caption}" width="16" height="16" />
                        </td>
                        <td>
                          <a href="">xxxxx/.../VolumeDetails>${N=SwisEntity;M=Caption}</a>
                        </td>
                      </tr>
                      <tr>
                        <th>Volume Status</th>
                        <td>
                          <img src="">xxxxx/.../${N=SwisEntity;M=StatusIcon}" width="16" height="16" alt="${N=SwisEntity;M=Status}" />
                        </td>
                        <td>${N=SwisEntity;M=StatusDescription}</td>
                      </tr>
                      <tr>
                        <th>Free Space</th>
                        <td></td>
                        <td>
                          ${N=SwisEntity;M=VolumeSpaceAvailable} of ${N=SwisEntity;M=VolumeSize} (${N=SwisEntity;M=VolumePercentAvailable} free)
                        </td>
                      </tr>
                    </table>
                  </td>
                </tr>
              </table>
            </td>
          </tr>
          <tr>
            <td class="alert_details">
              Alert Description: ${N=Alerting;M=AlertDescription}
            </td>
          </tr>
          <tr>
            <td class="alert_details">
              Acknowledge ${N=Alerting;M=AcknowledgeUrl}
            </td>
          </tr>
        </table>
      </body>
    </html>

    Any help is very appreciated, thank you.

Children