Hello,
I prepared an html mail template for librenms. But I need to set the template color to be red when there is an alert, green when there is a recovery. How can I do this?
<html>
<style type="text/css">
body {
margin: 15px;
font-family: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 20px;
color: #333333;
background-color: #fff;
font-weight: 400;
}
.box {
position: relative;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
background: #ffffff;
margin-bottom: 10px;
width: 100%;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.24);
}
.no-padding {
padding: 0 !important;
}
.table {
max-width: 600px;
background-color: #fff;
border-collapse: collapse;
border-spacing: 0;
color: #333;
}
.table th, .table td {
padding: 5px 10px;
line-height: 20px;
text-align: left;
vertical-align: top;
border-top: 1px solid #f4f4f4;
}
.table tbody > tr:nth-child(even) > td, .table tbody > tr:nth-child(even) > th {
background-color: #f9f9f9;
}
.table .state-marker, .state-marker {
padding: 0px;
margin: none;
width: 7px;
}
.table tbody > tr > td.state-marker {
background-color: #004774;
}
.table .ALERT .state-marker {
background-color: #bd1e1e;
}
.table tbody > tr.ALERT > td {
background-color: #ffebee;
}
.ALERT {
color: red;
}
.table .ACKNOWLEDGED .state-marker {
background-color: rgb(187, 135, 4);
}
.table tbody > tr.ACKNOWLEDGED > td {
background-color: #fff8eb;
}
.ACKNOWLEDGED {
color: goldenrod;
}
.table .RECOVERED .state-marker {
background-color: rgb(0, 92, 0);
}
.table tbody > tr.RECOVERED > td {
background-color: #ebffec;
}
.RECOVERED {
color: green;
}
.header { font-size: 20px; font-weight: bold; padding: 10px;}
</style>
<table>
<tbody>
<tr>
<td style="width: auto; height: auto; border-color: black; border: 1px;" colspan="2">
<div style="text-align: center;"><img src="https://www.xxxxx.com/wp-content/uploads/2019/11/xxxxx.png" alt="" style="width:100%; height:100%;"/></div>
</td>
</tr>
<tr>
<td style="width: 477px; text-align: center; background-color: #ffad33; height: 18px; border-color: black;" colspan="2">
<p style="text-align: center;">
<strong>
<span style="font-size: 18px;">Device Status Change</span>
</strong>
</p>
</td>
</tr>
<tr>
<td style="width: 477px; background-color: white; border-color: black;" colspan="2">
<p style="text-align: center;">
<strong>
<span style="font-family: Arial; font-size: 14pt; text-align: center;">
@if ($alert->state == 1) <span class="ALERT">{{ $alert->severity }} @endif
@if ($alert->state == 2) <span class="ACKNOWLEDGED">acknowledged @endif</span>
@if ($alert->state == 3) <span class="RECOVERED">recovering @endif</span>
@if ($alert->state == 0) <span class="RECOVERED">recovered @endif</span>
</span>
</strong>
</p>
</td>
</tr>
<tr>
<td style="width: 477px; background-color: #ffad33; text-align: center; height: 18px; border-color: #000000;" colspan="2">
<p style="text-align: center;">
<strong>
<span style="font-size: 14pt; font-family: Arial;">
<span style="font-size: 18px;">Alert Information</span>
</span>
</strong>
</p>
</td>
</tr>
<tr>
<td style="height: auto; text-align: left;">
<span style="font-family: Arial;">
<strong>
<span style="font-family: Arial;">
<strong>
<span style="font-size: 10pt;">
<strong>Alert Title</strong>
</span>
</strong>
</span>
</strong>
</span>
</td>
<td style="width: 358px; text-align: left; border-color: #000000;">
<p style="text-align: left;">
<span style="font-size: 10pt; font-family: Arial;">{{ $alert->name }}</span>
</p>
</td>
</tr>
<tr>
<td style="height: auto; text-align: left;">
<span style="font-family: Arial;">
<strong>
<span style="font-family: Arial;">
<strong>
<span style="font-size: 10pt;">
<strong>Status</strong>
</span>
</strong>
</span>
</strong>
</span>
</td>
<td style="width: 358px; text-align: left; border-color: #000000;" colspan="2">
<p style="text-align: left;">
<span style="font-size: 10pt; font-family: Arial;">
@if ($alert->state != 0)<span style="font-size: 10pt; font-family: Arial;"><strong><p>Down</p></strong></span>
@else<span style="font-size: 10pt; font-family: Arial;"><strong><p>UP</p></strong></span>
@endif
</span>
</p>
</td>
</tr>
<tr>
<td style="height: auto; text-align: left;">
<span style="font-family: Arial;">
<strong>
<span style="font-family: Arial;">
<strong>
<span style="font-size: 10pt;">
<strong>Duration</strong>
</span>
</strong>
</span>
</strong>
</span>
</td>
<td style="width: 358px; text-align: left; border-color: #000000;">
<p style="text-align: left;">
<span style="font-size: 10pt; font-family: Arial;">{{$alert->elapsed}}</span>
</p>
</td>
</tr>
<tr>
<td style="height: auto; text-align: left;">
<span style="font-family: Arial;">
<strong>
<span style="font-family: Arial;">
<strong>
<span style="font-size: 10pt;">
<strong>Device Type</strong>
</span>
</strong>
</span>
</strong>
</span>
</td>
<td style="width: 358px; text-align: left; border-color: #000000;">
<p style="text-align: left;">
<span style="font-size: 10pt; font-family: Arial;">{{$alert->type}}</span>
</p>
</td>
</tr>
<tr>
<td style="height: auto; text-align: left;">
<span style="font-family: Arial;">
<strong>
<span style="font-family: Arial;">
<strong>
<span style="font-size: 10pt;">
<strong>Device Location</strong>
</span>
</strong>
</span>
</strong>
</span>
</td>
<td style="width: 358px; text-align: left; border-color: #000000;">
<p style="text-align: left;">
<span style="font-size: 10pt; font-family: Arial;">{{$alert->location}}</span>
</p>
</td>
</tr>
<tr style="height: 23px;">
<td style="width: 477px; background-color: #ffad33; text-align: center; height: 18px; border-color: #000000;" colspan="2">
<span style="font-size: 14pt; font-family: Arial;">
<strong>HOST
<strong>INFORMATION</strong>
</strong>
</span>
</td>
</tr>
<tr>
<td style="height: auto; text-align: left;">
<span style="font-family: Arial;">
<strong>
<span style="font-family: Arial;">
<strong>
<span style="font-size: 10pt;">
<strong>System Name</strong>
</span>
</strong>
</span>
</strong>
</span>
</td>
<td style="width: 358px; text-align: left; border-color: #000000;">
<p style="text-align: left;">
<span style="font-size: 10pt; font-family: Arial;">{{ $alert->sysName }}</span>
</p>
</td>
</tr>
<tr>
<td style="height: auto; text-align: left;">
<span style="font-family: Arial;">
<strong>
<span style="font-family: Arial;">
<strong>
<span style="font-size: 10pt;">
<strong>Device IP</strong>
</span>
</strong>
</span>
</strong>
</span>
</td>
<td style="width: 358px; text-align: left; border-color: #000000;">
<p style="text-align: left;">
<span style="font-size: 10pt; font-family: Arial;"><a href="http://xxxxx.com/device/{{ $alert->device_id }}/" class="entity-popup red" data-eid="{{ $alert->device_id }}" data-etype="device">{{ $alert->hostname }}</a></span>
</p>
</td>
</tr>
<tr>
<td style="height: auto; text-align: left;">
<span style="font-family: Arial;">
<strong>
<span style="font-family: Arial;">
<strong>
<span style="font-size: 10pt;">
<strong>Uptime</strong>
</span>
</strong>
</span>
</strong>
</span>
</td>
<td style="width: 358px; text-align: left; border-color: #000000;">
<p style="text-align: left;">
<span style="font-size: 10pt; font-family: Arial;">{{$alert->uptime_long}}</span>
</p>
</td>
</tr>
<tr>
<td style="height: auto; text-align: left;">
<span style="font-family: Arial;">
<strong>
<span style="font-family: Arial;">
<strong>
<span style="font-size: 10pt;">
<strong>Serial Number</strong>
</span>
</strong>
</span>
</strong>
</span>
</td>
<td style="width: 358px; text-align: left; border-color: #000000;">
<p style="text-align: left;">
<span style="font-size: 10pt; font-family: Arial;">{{$alert->serial}}</span>
</p>
</td>
</tr>
<tr>
<td style="height: auto; text-align: left;">
<span style="font-family: Arial;">
<strong>
<span style="font-family: Arial;">
<strong>
<span style="font-size: 10pt;">
<strong>Traceroute</strong>
</span>
</strong>
</span>
</strong>
</span>
</td>
<td style="width: 358px; text-align: left; border-color: #000000;">
<p style="text-align: left;">
<span style="font-size: 10pt; font-family: Arial;">
@if ($alert->debug['traceroute'])
<pre>{{ $alert->debug['traceroute'] }}</pre>
<br>
@endif
</span>
</p>
</td>
</tr>
<tr>
<td style="width: 477px; text-align: center; border-color: #000000; background-color: #646d7e; border-collapse: collapse; height: 23px; vertical-align: middle;" colspan="2">
<p style="text-align: center; vertical-align: middle;">
<span style="color: #ffffff; font-size: 10pt; font-family: Arial;"> Copyright© 2023 - xxxx </span>
</p>
</td>
</tr>
</tbody>
</table>