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,iVBORw0KGgoAAAANSUhEUgAAAJYAAABeCAYAAADBuu07AAAACXBIWXMAAAPoAAAD6AG1e1JrAAAgAElEQVR4nO1dB3gU17U+u0svErsC924nbnluiWO/uIDBpqhLqLddCQlJSKKDACEJARKiCCE6uIArrrHBNrZWdPcSx4njFufFBcdx4hTHJTZI2nn/mTlXe1mLFscRMXO+7/9m5vbyzznn3rkrEdliiy222GKLLbbYYosttthiiy222GKLLbbYYosttthiiy222PKtZNMTO6lu1QZq2nAfrd30EC1cewfVLF9HZRW1VFo5nybPWUTT5y+lSTX1Xd1UW/5b5KFtT9OU6jqaVbuYZgJVCxodk6tqXUXTZ7u8pZNdibljHb7SqZQ/YQalFpZR4cyarm6yLce6bN7xPC2/5W5KKS6i0ooqqlu+1jVz/mKaXFNLxdNnE4hFaQUlNCot21k0tZKuvTGSkvOKaPzcRV3ddFuOVXn8mZdpxa330EqgatEyql+x3jWvcRVrLjc0VjGItQDEKkzNLzk9ITOXEr1jnTG4JuQWmflzp1ZQwYw5XdsJW44teXTXS7Rk3QaqXbqG6prWUvXiJtei1bfQvKZVo2bXL/0IxDKKps02ckomGdBQX8Zl+5Jjs/IoNjO3R2yGz5FcUErxIFl0Zh4VTKvs6u7YcqzI8ts3UUV9A81pWE61y9a4Fq+6lRavvHV0/bJ1xuz6JmNi5bz9Y6fMbM0qnrBvdM5YIyYtx4hKybo4KjmTEvPH0ciULEdkajaNwnNKfklXd8eWY0Hu2NxMM+uWUOXCRlqwcp1ryeoNTKorlqy+ra2ucY0xY/7i1vEVNUb+pOmBjMIyY7RvbCtMoBGd7v09MC86w9c/Ki2HQCznSBBrxOgM8k2c0dXdsqWrZcbCZTRuchUtWnMLLVy+lmoaGnvMb1z9Bhx3o7q+qXVKda0B/yoA/yqQmj8ukJCTz6RqB5mMaBAMhHoqMiWr+/DENIIGc9wYnwKHflxXd8uWrpSmux+i6XPrKatgEptCV8X8BqpYsHQR/CpjZu3ifVPm1BmlM2oCeROmGeljywLQVoGYDB+TKTAqJSsA02dASxkjEtM2xmaPoWFJ6a6krAIamphMMRm5lFoypau7aEtXSE3janOvatrcBc7yeQtpWk39pVPnLGifVl0XgPkLFE2rYFIF0gstUsFZDzCpRiZlGCNGp381IimjYPjo9LnQVjvgvPcYmpBEw+KTnTfEjqYhMYlw7sd0dRdt+U/LvU/upNIZ1TSpaj5NqJjrnFgxlybMnvvg+Fk1xrjyytYxE6cb2eMmmuYv0VsQiEn3GqylQKb2mxLTjJsSUveCRMOGxCVfMywuOWlIVGLSsPik3kwqwMHEunpENCUXlXV1V235T0jL86/Rxgcep+olTTRx9lwaN7PaWVxeSdBQl5XOnGMUTa0w2PRl5JcF4rwFvAJkLWWAUAY0UwA+lAEiBYbGJRtD45IsxCYZIJMBMr1ybVR8j2tHRNGwuBQaHBVva63jQZ547hVzZ33+0tU0f9kaalp/pxOmsMfEihrWVuOhwT4vmDzjT9BU+5LzikxSDYcPNTwehEpICZiEik0KMImAAIjUBrQDXwI7Bkcn3D8kLrE/EwpwXo9rpNcm1vda/C+8Qitv30SLV99GdSvW0tI1t7gWr7yVFq66mSrqGtxTqutiSmdWT86fVF6XVTzhwaTcwk/ZUb9xdLpJKtZMQiYd7SCTAbwGrAWRmoBKkOpMJhXgiLWJ9f2VXb943STV0nUbqGHtBpDrVteSdbfRwpU3n1e7bM3tlQsb/wzHPVAGUwiNZYBY+0GsViYWTKAiVkDMnUkqIRTDvAeJOjA4KvZSgInljLFN4fdX7tncQkvW3GaSatGa27otXbeR74eAYF/WNa01qhc1GdPnLgyUzaoJgFiBrOKJRnJukcGrQDjsBpz1ABx1Q5lBMX+KVCZAoq8sYsX+JjIuj4ZHZ9L10QkUk2UT63spjz39Evyqu0wTCDK5mtZvpMb1G3/csPa2rxav3mCAWPuqFze1l89baG4xjJ0yM8CrwZQxxYG4rDxzz2qEaQ5TmVzsY30tPpZJLiGYrrHKrze1VayLzaGtsb6HsnnHC9S47g42fQTT51yz8X5quu2uE0Cqj/BswBS2zm9cbVQuXBaYPrfe1FhjJwuxrF32QDQc+JHJmYHho9PbQS4Dq8K34MS/JKvCL0Cwf4Jc+0Cu90GkCibTVTdFsxmkITEJNrG+b7IFpGpYs8H6VLPiFseO535Brv7htGrDvXtANCbVfjaDNQ0rAhULGoypvMs+c04AzjvvXxmp+eMM/nwDP8vaFLXIxVsObTclppaBZJ8xyYZGJ54Dcp0HYvVhMl0XPZrEcafBsYn2Ptb3RZ58/lW6/eGt1ACTt2D5OnbQqX75+m6LVt5CyzfctbRh/QajfsX6fUyquUtXBqCtjPJ5iwKTKufxxqi5hwXn3YApNIkVCwc+ClqLfa1RyZn7edcdmAGSNQJfxWSN7TkqI5uuGWlqKZciFSMqzdfVw2HL0chdm7fR8o2baNWd91HTLffQzfdvplsf2EK3PLAZGmojH9IDbuarE8TqxuQC0gEDZGurbVobqAWpqhYtC8ysXWLwN8GyWXOMwqmzDF/ZFINPMfA+lkYsk1zQXK2RTLCUrHUg2Sjg4/jsMT24TTEZeY7I5CyTULw5GpnppbSSiV09VLYciazZtIXq4S+xA16+YAmt2rSVps9dRFULlzlrlqxwwV9ygTguPv2Jq2PxypuFZOuzgfa65esMpGmf27DSUKSaVrMgMKFiLp9gMOQzjpFWUGok5RYaIA2bQj7NEBC0Cck2gWSXAxtjsvIocUyxMyWviPqcfpq5055cYJu//xpZtuF+kg/FJspm1jgmV9a6Zi9eZh4lhq9k7qaz+WMyzW9aTfUr11+C+7sAXv0Z80AqEDBIqjkg1ey5pgnk/Stf2WRoq/GmGUz0Fhi8KgSZFExiyf0DINfZuA6Gc0+Ak083gJBdPUy2HI00bniAplTX0oTZNTS5aj6VVc51zpq3GNpqIVXUN/UDUa4DYfLmN64ZB2KVgUhLgD2spZhUpvlbtqYd5DNXgB2a6gBSTTGyiiZAW5V0aKtY60CfCXbiozN8rfJ8d2S6l7z5ZQQ/i0YlZVE8NFfetFldPVS2HI3MblhGxVNnUenMappQUeOcVDWPyuc09gax5s+qXfJBZX2jMWfJcmPe0lWmZmIyaWhFWIDjqoRUU+co86eRqtgiFftWrK06JRY0Vky6aRp38XmrUek5zsTcMcQnSGNzCrp6mGw5GlmwZgMVTplJRdMqQKo5zvGz5rDmOndS1fy3QBCs6BYaIFf77PrGtupFTa3wn1rhnLcuXHVzG0gVwNVYsGxdAHEWqaCpxotPxVsL3tLJRmbReCO1oCQgpDL3r2AGA0Im0wzKPbSW1zxCg/trcCVcuwEUl5NPBeUVXT1cthypLFxzG8Vl5rOmcoybNptKpleGQ3P9H59Dn1g57+sp1XXt/J1vxvxFgVl1DYHKhY0BaK8ACBaobVodqFu6hkllzKpbEijXSMWOes64SXwy1PSpRvvGmqRiTcWk4s85ynHXHHjWXG0gFz+/hvvu0Ra5nHyNzc6n/Ck2uY55qWxYSXnjy2lyTR0VTp3lLCqv5Os6aC/2jb4GwQzeLZ84e15gclVtYMqcOt5BN5hkrJ1m1TUafIXJNPgnXEhr/oyL96qs1Z/lT4npMz/hMKGEVAGNTLrm4qv4Wr5HErN9FJXC5PI5AErMzaei8uquHjpbDiV5UysIBCAQwQHw9WRomn+wCeNveiCZeXx4HHylkhlVAZNoM+cYfAqUHXMT0FC8R8VOOvIYueOndvhTrKXiQBT+OReTh0kj13b+wUSoGdSuHL5fyHUXEyo6zetAOGsvypkytauHzpZDibdsKvlKJlFOySRXjnUtYJ8IznYrE4TPo7P2YbPGYMKp+zETy438icFnTs8/ODX9qfxxJqnMfSr+tU1wO0FppneBLzRtpchkWD4WE9BMa5IL5BwvJtEVlZpFqQX2xugxK8Wz5xNvOuZOnE7p+eMcmYVllFE4fg8TI6toQhu0jnm8BQiwBuLwzMLx5j5U+thSc5OTr7yLzrDCSjr2qMSX0ld+TJR2IVAz8LH4UqbDrkjW4XeZ5PKJVvN9guvAaGgshDkS4cgXVczr6iG0JVQKp1fxBMF3yaKkvCInNAwB17OmATnagQCDV3IcxmThFR3/kibBixVdRl4gGn4SE4c/yySASInefJNQ/BwvhFKmTyON2gBdz865hLcrM2iSSjRWh/+V7hOT6C1TWotNY06p/dOvY0oKZ82lJN9YikzOpFseb6HolCxXvLeAQJot7GiDQK1MItzzT7KM0db2gKG2B+SDcWBkYpp5IoF/CMFh0UGTd4AzriMmuAG6BOTYaqXl3XbeHPWG+mGy/eBrizEJ5vXz9gPg4GtOqe1nHVOSUTSB/9gGRWFyQK7u/C0OxBnJ5IHGaYOZMfeZtG0BkyBRqdnmDx9GjE5vuykxrY1/TQMEbkpM5eMu/LMtk2hMOj4GwzAJp30HBL4WYjGpaoSEraKZAhqxDKW1gubQ+0fce0wHHubQJtYxJLwHlJCdb5pBEMbFBIvPzI0Agd6Ls4jUprYElK+jNBT/PAuEamVCyQ8f9gNt/AMI/nUNn1vnI8ZMspEg2ShLm/FH5VZAkYPxATROLHCpPLdrm6NBP0tfKVq+2H7kuUw2TZ22KTxGpKh8DsVm+xSpzL89hetZwDtx0Eq4trJ2ipUJlWMs5s/coaX4R6RfD7NItfv6mPjd2o8d+Phw29DYpNZh8cmtNyaktg5PTGvnc1WcV0wlE+M5wAdN9ENcF0ZbxHrkQK1lmj7zGvS3zLB2iR8qxHLlTCzv6iG1hSWnbCpINUYRixK8xbwv9JKYnv368RUmg5zqbIOmYqKYPxoFcX552dWDeydkj6Grho7MuWZEzLPXR8V/KeRSaVizMRk/h+n8VWRSRgOIdRMwFGUvBv4k2wp3gjAXWVpKtJZGKt3Pign6WXHRlp/lsjXWMSKpBaUwg3lMLFeMtWwvkQncp5OKzRYfuDMddP51Mv9hjqSMvwyJTqxIxuoxIStvDJ8+KJ5RFYZwuviq6wb+bFT0TdBiWTCL+TCLadBaQ2ASz+UTCXEZvtOR/kXNFBqWr2X6UQm4nyRhMHXQTBmW5tJWhvpqMlatDHNKbY3V5TJm0ixiLdOhrbLyeuL+d0KoduVcsz9kaquULPVXXrbflJCafOqZF7hyyiaHR6Z71ypyRKblfIbrsyjjjrTCMvfgyAQCuQjEIhCLQEQyz1Kl55yndtlZMwpR9otpWwltxURZJyvEoNnL8GofpTsc+CHRyseaaGusLpX8qZWUXzGdYlJzCMRwiY9SKBPVKqu1gJzcZBO4F8RqvCkh46LR3qJeCd6Ca+NyxtyGNF+Zu+DpPl3z/HNYQopv+/Nv0dXDRnUDsVw3xIx2DYlLdsakebvH5aCuDO85SPelIkuMtbWgfCbTGef9NIRPjDaPzWjbFWwOxe/C8z6VHmmd9qqwi2XmvIcoMiWDxPxRYvYYPjHwpkYs9YfO/EAmNJE7KjUbJsybgfBPQ0zYfvGRngbKMeGekalZdGNiGg1PTqXM4gmUmFNIIB+ZmojrTPfFSd421kYgxj553hidniUbnib4vtSKg0+V0WEGlbb6FHlPYGLhBXFkl0zu6qE9viUxH294Zh5pk5crk7dPzj09CVwwEmYrShCd5mXz9U/RMpzmTUzwRcD5MG0nxlrlmMThcnlP7Ia4FLIca5/5sRhlF+N6HcLqoq3vfV9rBN2JvP2iZU/K2vTMoZG+bD4e80m09a2wPdrSjvstx923UbSVIzIjh0pm2n+iu0vFWzZNSGCdaQIeFn/nC5nkRRwOQjHxesakm2QZJabKkD0kRo11uiCHYjO8DiGqI1qRTABCuCxthVWfmEuNUFxnQnLGWIdFSl830aRXIfwFIBr5Ppb9rHbRkNyOR6NTspDHLNckVv7k2V09tMe38DaDaBenTObNHaQR4sDsNTBhQAhHQtZYOPh5bC7nALsRvw15dvHKDqS7kIkAU+RMtMqCac2nzKIJMIMTKSojm+tyMLGQLgz3jwOfA38DXkf9I00Sm8T0OSwNZ5KxT7R14kGZW95+aFdtRL3nCOFNrcs/rCgsn9vVQ3t8i0ksc3VmTiaTYSDu6zFp98WYZ528m4EK0QYdvliHFjJXbT5l5jrApznTiiZSUUXw0F1acanKJxrJzH8GrufEp45R2s3a7kj3qbqc8pnmB0j7gqbdAuLPFVvl5JmakE822KdIjwHRiCUE8elmS4gjhApOttIObH4cYvIcOrGSir75UyzeWwoS0ueIU6YyzUtDb0S+HGWOfcE6TXid/KucJG8Ba8OfIGwU8l+NNOKHjaWomKEUhZVtaif12tIFUlK9wDRVrGGEWKZ/xLvXmDTAvHcqs2RpIpg2LOcZXrnmhKCkYv4366qYJ3WNIXHMSZEyOgcO/k8TTULFQuuk5ZeYdSntyOY1c0wxXykmmNc04QmpmeYf/4i1z2Ede5I/vYLSxoyjuKy8oKlL8ZKuQZgQBeVV37quollzKWdCOfH3PP70wkTk06reCdPIO34qFc2wzGc+6rIIz23JMkmFezaNLrXYiE3PpoTR8dB2eUhvn3U/JqXQnPDpFmC2csoEpRaKusAh5h9GMOkyBUojdmhJDsPKtsj+B0222GKLLbbYcjyLA3AJnBpcIeG6cFg3Ldwhz66jrOto2+eQfN3owPYdDnq7jxSOkHaEjsmhcKR9O1R9B5ODzZfePr0sfbwOJaH9+1ZypAPw7yijs4E73GAe6WB/V/JtxsdBR9/+Q6VXhPou5Dsp92wgB6gD1gN3ALcASwE+mZYKXAmESXr+a3VegD/VXyNhV8lzLtCnkzrUgP0A4F9ujtfyHmzyVPjFkn4ScDlwrdwXHgHGSd9c0n4VVnSQ9ByeD8QAJ4S0PU7acbg604ErOul7Z8Jjy/8lk/8q28mHSK+P0YlALMB/H2klsFGwAuB/5ZoGXAR0l/QjAD4IlnyYcgdLWyZIP92HaPdhpRH4J2AcAXIlTwTwhYStkrAGef4KOEXC9AFS9zxZf5e0fwTCO0kbKi9qbTgHuP0I26vA/etNFqmPJh+3s1Brx/NHmf/n1PlLprTD8JD0m0LilajJ53FfDfzpCOtX5T0qz2+HlNtNu6/W8vF4pXXS7sOKauhirbB/AHuAh4D7gc3ATuB14C+S5qeSj5n8voQtlLC58rwXOEnCQsmiBixDq7c+JC40ba6WVm1fb5Tnz4EPDgFuI5OXCcFalkn5KRAAPgHe1dLp+EDSqHp/JvX6tbF6/yB1vgd8puWdeZD+8di8QsGXcb/cDwlJr+bqXClbldsGvAE0Aw8ADwItEvY3SXO75N0kzy9odStSnSplqHK5nAH0LYTf4P+TwnYDnoOk60XWhFwreVhYy3woeRdL2HwKaqGDEUuXpylIjnNC0qtrX62NTALV4dsk7HUJY63QT9J3BmXCWWN9KnnV4fOBUgbDLePAedh8fhXSx23yvFWe+4fU00/awqbqJUl7l6RVBFETOo6Ck1kM/Erun+pkrBxaeYw7yXIJenaSls3fOdL+n0jYvZLvpZC00cDHFCT3eC2uGx2lqEnjQflACt1FlvnqcZi8anC+DbHUmziEggO1MSROdapSS6P/xf1bJew3ZJGGyc8T2jsEfSROyQ8paIbHHqavLHsl7Xp5DiWWIpKqS90PIks7cNparW9qPJi8f5D45ySsTOurcjnUfMRqcStC2uigwy8S7pG8r0gbee7rtTJ/AVyqlfcvL1hUI+7TCme7+iqwA3hE4nhA2fxkAqdp+b+txlIEUiq6nSznn0WRiomuTPALIfk2SPiXZPkNneEt4PdkTZzy45hY/6Cgb8iLhyhgJDBKEEmW78PkbaMDtdtOCprCN4HfhtT5W6lXmSKeSKXl9RXdUgqOe6yE9Zf8hrS7nzZetRTU7meFjFNnoupSaZTGYr+YTeW7FNRSCyio+Y5aS3VWMQur/ocpOICHAndqvJZPvXH/CrHUG8GmSS0CHpcwtZJZodV9o4SpN1gRS/eDDob9FFzdnK/Vd6R4j4Krw+1HmZctQqTkVZPGK9yvJf7+kHGJ1PLqxzCWa205mMvSmahx1hWIDnYzlMLgcf+3bO3ohVxG1hKbtxtulobwRLO95zdROZaMK6QRf6SDE0utCjvbwFNQBNJV8ggJ46XylxR0JknLx6J8LDZVvDzmLYJiuepgP8ZHQa3BGutzCmo7NousXVolbB9ZZOU3+tdkaa3TtXFSTi77Q7kU3LZQKNbacbfWrx9pZTyiha8D8sgyg1wWv7hqxccW5ALJM0dr30USxi9ZKBGUSdQ3OlmUZXhX6uNtIWUNPpMxUvJd7ZN1KgkUHIx8CVNOXyixPqKjW1WwmVIrTOW43knBwVUDqRNL+VivHmU/mFjKea8ma/l+FvBjskyY6iOTubuWT9X7JB1I9sPJbyT9NHlWvlK7VldnUJr4Psk3VIt77Ajr1kX5WM9rYbzKfE4rl1eQ/SXuW5lElxS2DEgE/ocsTcO2vaeACXIeWVpMNYD9EH4rDqax/kzWCpIbfiFZ5icUTJaTKPjGFUle1hy8ffFXeW7Q2soSSiz2SS6X8lgrXNwJVFx3aZMiVknIeDDJlMPN4FWrMoGKZEpj7SJrU/l/OqmP67pA+qT8OfWbL7XyY99G+WVvanhLrkqbMIZJ3s1aGK/usqQ/PEc9BGzyeUU4XMZupORVpvBlssZc9YfHc5VWLo+n2rRW8UcsKvH/0oFvCZs79pvekAFgU8A2WH+7/JJXd97V75mUg8nquvUQUP7FupD2qD0dBdaIERLnCEmrTOHh6mqVNJyWB5l3ttUek/q7jd0o+IYygR/Q2sCmQ99Bb9HG6lB1hvqs/MLma8/qVCKb6B4a1AqWV2jKF1RahuP8IeWyOec54rl6Tdqr+5CbJa8ilr7doJs8LwVdBNaW07W4I/a7VEJ+k1lFsro+3M47O6FLKOir8JvxZ4lbKmH1hykjFLdKPuWQjwyJVxpFHwBFrDvp6OpSmpYnWBFbaZFQbcjSFJI3U8J3H0V9TD7WSLzqZIdbaUrWSJ3tP4X2Ub2oDPVPeHjueJuENeuh5ozJze7FEsmnXpZQ10FfqbKm/bVWBr9Ep2vpjkj0hPwm8OqM1adPOsHfivj0P6tb3nUOC8nPjeHNt+spuPw9Q57/9yDgcq4RDCbLxFJBnz56W9jXuQ64mg7tRP5A6vrZIepQ+JnDMs1sMrpL2Vy/ucDI7t3b8fagQWScdx4Ncjp1cl0pabme6319+nDcxVq9nUFvA6dVmvBEyXetjBOLc0i3blSN/hf16vWNT18uh6O3pOe2Xmr89Ke0tF8/PR37i+yz8SenCQK+Z3/4ErI2bPW0gyW8M1Ht7Ct18heWkZLvqOVov5QfKu0RMXp4z56U0qsXxQIZvXuTccYZNBJhbw4a5DTOPptOcLk6RsO47LID8nLaqn796Ocej1nXIKS9tHv3A9KAGBSN8lJRfiIwtEcPOs0RbNqNSN8XaXoBZwJMpscGDKBdHg9tA7bg3jj/fDKuuqojT0d7TjrJVDN9kC8cdevgdne0AfdhB/Cz03FzGFdcQdtR36sDB9IbIPbWvn3pyxNOoMDJJzvuCw93Le3fn65HX+KBSOCdiAgyTmR+Ure/nnDCtzlNcjD5d5xy6bQB+hJVP+vkpIN/bdfjHBSypXBN9+7djMsvJ+OUU2hJ//69n3W7z9ozYMBF2wYMuLglIuLsPR7PoJ1ut6MFk/qo2937kfDwgRu6dw8zFi8mA4P8J8A47TR6GYPKk78daX+Bicjs2dP1iMcTthv5a/r162WceSYZp55KD7jd7j1u97m7Uf6egQMvQNlnPRge7uG3nScNca77wsL63xMWFvb4gAH9UGbfJ9zufn6Px8QTeN4SHt4XBOvL6a5E+7cOGND/Ybc77JcREX0fcrv734vwB0PwWHh4GIjAvHOi7jCkCWfSshg33PCN8eI+vYg+bUGf/Cgb6P1EeDg96XY7W9xu2g1si4jo3zxgwDncl50RERfu9HjOQP89L4Fcn2AMTna59PNXyk/Ut3c6m98jIZo+h119ZOlAYe3z64EDHS9jgKARBj3mdq/c4Xa/g4FphWYwtrndBgbQwID+BXgbWI5nN9JsbwkP//Th3r3XPNSnD20JC3Ngsmkrytk6cKATZCSQKexpj2c7SPIZiLOWJ2GL2/1T4BGU8xGXrcD1gTB/2Bwe/vrjHk8e6vAgz9sg1IeIex/pP0D8uwj/HfAuP4Pk7+H+I5T/yxciIs58yu3ejXbtRdh7OzyeD3YhzQHweH6PNnz2otvte+Wsswgvz/NI+1dgOvKyk+Uiw+j4Uv9HEAPlmf1C3ctR52fAA7ugvXBlXAhsQv69qh9+C+3AH4HXkX/Gr0Cu3w8a5Hh54MAunev/mHyNgeMBMgdu0KDeuP+FPzg4rwMvmvB4XsN1r4Q/I4N6lQwgh1VImAukMpegW8PC+PlRiX8Tk9oT10uA/dA8xqMDBnyJ6y/x/ALwMjTAm7h+IumnY7L6M2lQ96c8+ULsfRLP17+AWH+Vyf4tcLZJPiv+M8R9ius/dEh6js/fduqpDq0+A/WkPAMTh2V2tzfR9lfxsuyJiOgm/Zrht8jPaV9pscLOkTZx2H6E/Ur68pI/LOwNXD+WuJVqbJ7Bte2kkw47L//1svfkk80OS8djZSBYK53SjMFls8eA5uBrX4T/CLjAb5kFRpxGxFQOexIEaga5oLGWSPgfMOinS/omv0WqTcaPfkQwXR11vHjmmY6WsLABSHslcKI5eR5PBOI8uA7aZk3yUiHBfGhTF64ntFhpwpG+L2swk+wezyXN7Iu53T3Q9m4auK/9ENcdacNaLCKql2M/8KS6Gu8AAAXvSURBVBNuZ4uVziQVyJQk8a1yfVEnG9C8LSysZ4s1RgRS0bYhQ8jfvz+X/2OEnd4RB7w3aFBXT/t3L3vRSR5E6XSUmDx+0/J4kPF8EeLOwv0JmHSLgBapHLh2k/vxfstcfom0l8ig5wsBeLKu8cvAAg0cDk31LEg1CmbzCjyfj3RngJBuPxzflmBarsO6Z6Ja5dbqGrKF2y9p8Ny7xTKPXK8XuAoEGozr9c0WrsP9UMT/QModIObq78g3R9r7McJPNsuzzN1lQBvwxXaPp1rSvCx9nCZt+TUQ72cS4aVD3jO39+8fsQUuhtZvp2rncUMsv+V8sobpjnu/DJ7SQupN/sJv+Tl+xGVwHtZouHfKIK8QcvHbHInwryRvisT3kOsPWYNpZTMCfsu0sbl6C2Xchwm4UibCZRJMtAewoMWqp6rF0iwc7hQy9jHbeGDbO8PPJX0E7j802+3xnITrTIl/vhnOOYg1SGtrvJCMx+Y5acvJ3N6D9IXN8ztI+4iQmcfKcfxoLKy+WpQG4sEeMIAJMAa4AyZgj9/ys9hc/D1kAPNkcLs9B5+h2fKnHpe4NpncKhlQF/w32hMe7ny1Xz++noK4WcCDfssnedsfHs4T+LlW/lfIe6FJLhDHHzTXCyS+siVosoIay+N5X+KbEXd/i0WihwT3I/xJoEw0r9svfiPyXSDl38vP0E4bcX1Cyqr3W3UNF2I9s1VcAYwRk3Mqwu7D9TmkeWvHwIEftlgvSccLivKvUZrrw+OBWO9ZE2ealMfZ3wmudizgzX0KDi0GpBf8iF4IWyaD/YiYQaeA33D2wV7zW07u7TLhZhxPBJOKcnPpNVxV+Vz3dtSx58c/JqwweyE9k+4ZmYwyIYzriIllvQQBtO1Eie8Ufovw4UIsTn+h9If7+GIHKTyeu/1qjDyeYUKUZ5uttjj8QdeA2KcDqczTjrj28lsa8TFpb63013X8aCxlStzuYTKpVX7LYWVH9lzxsc738xvr8Twlg94gk+MSbaUm/lYZyHSl0UxfBQTbwxuM/fpNh8ZiczoBcZHsk6Hes0GqsxB2McJ8fl4JWmVESxk6sWrFFFboxBKwxvq9aMxxuB+J+DhcYzXEID4RuIIXI4h/H2jF/Q+ZnM0WUU7188rO7d6Ktvdksyja5gYh27PS9wKk2YWXaAquXO5lSHMOSHXWDouoqaY5tPoyRvXluNBYH1o+lpqc+hBzF+prqbDnMYCDWvS3Vmktt3uzpCvRSGFqJb9FwBcOW76FtbwPtgtmVr3pUl+jrgGkfMd2a6LZx/rbEZa/q+Wkkzjv55JOaSxzQfIk6m4OElb5d8Ml72vy/Pg36uh8vO7fhVXoNnHe9x4PxGK1zAPYbJlAVt0jMBC84roT2CFmgd/e7cA61kQt1lLdJFVL0BQoghUDW4DBinBP9uplHjrn45fNERGs/dihZ5PGPtZTUj4TbivKW4yyh4hG0M2yIm6KlB/fEa7SejzsHy7F9Xbg5oNgnWne3O5Sf0QE523yW/7UyX6rL9wPx6PsNwZfHNW3ixD/gKktrfE6DUgA5gH3IW438JKMWbPfchtG7bQ0NqkVLm/xfO/lPZhCJlWz7ltpE7qTV4u6z6VvBWh+knnP+15amAKT6hPDoB1Op64FDqhPiErirOtE1bcf9K2FA+pQ2iC0raFQ9bOGe9TSoAcSGPe74VP+Dr4SY3eoz6n62737N8arxdo3M9uip99lEcvsD3952G99Q/x+SyvezN0HDpzLXMVZGsKhEcshYS59ckPIwFdHi1WGQw34kz17muTio5RSjvKZzDpa5KOyijMdfuUwi1OskcphbkGItuxAMF4tJg4JEMvBXwa2W/6l0obEO+OfaRP/jphiXXOa6a0FiEMfL27bTt5MttyLYD9FW+0GPjseSKXkHbyZHapa1yAhb7IK00nF+18dpki/19/mEE3SEhofeq/Vo9CsaZvONF6zELCD6PxCqKuCPKt6tjEBgmbUxFsh3/L2MrG0+FDNeUBfOtPs6hk+5jtd6Fv9P9uCqiiwDU6mAAAAAElFTkSuQmCC" 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>
  • Looks very nice. Would you like to share some code as well?

  • This looks great! Would also like to see the code as well, if you don't mind.

  • Yes,  I have always used the HTML/CSS style email alerts.  I always found that pretty emails get read and others get ......  well let's just say they are overlooked...  here is a sample of our alert trigger email and our alert reset email.  I like this because when they are viewed on a smartphone the contact numbers can be tapped to call them contact and the address info can be immediately pulled up in a maps app for direction on how to get to the location.  I like to use HTML Tables when building the alerts....  You can see its possible to use HTML/CSS to construct tables and formated text and not have all of the extra lines or spaces added in. These emails are created without having the database hack to remove extra lines and spaces.  

    Trigger Email Alert

    Screen Shot 2020-11-20 at 11.25.55 AM 2.png

     Reset email alert:

    Screen Shot 2020-11-20 at 11.31.00 AM.png

  • k1gaudineer - I really like what you did with your alerts.  Do you mind sharing the code?

  • This looks beautiful! I wasn't able to get any of the fancy tables / colors to work, though. The formatting looks all wrong when I executed a test e-mail alert (HTML is enabled). Any ideas? EDIT: resolved by compressing the code via https://www.textfixer.com/html/compress-html-compression.php

     - I like yours as well! I'd love to see the code if you are willing to share.

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

  • I had the same problem but by executing following sqlscript the problem was resolved :

    UPDATE [dbo].[WebSettings]
    SET SettingValue = 'FALSE'
    WHERE SettingName = 'Email_ReplaceNewLinesHtml'
    AND SettingValue <> 'FALSE'
    Credits to KMSigma