What is this?

This knowledgebase contains questions and answers about PRTG Network Monitor and network monitoring in general.

Learn more

PRTG Network Monitor

Intuitive to Use. Easy to manage.
More than 500,000 users rely on Paessler PRTG every day. Find out how you can reduce cost, increase QoS and ease planning, as well.

Free Download

Top Tags

View all Tags

Conditional HTML text



I'm trying to create a custom traffic light object that shows text based on whether status is Red, Yellow or Green, but i'm not sure where exactly i'd insert my html text. do i insert a whole new class for the htmbefore values?

Red: <p><span style="color: rgb(226, 80, 65); font-size: 60px;">Urgent Alert</span></p>
Yellow: <p><span style="color: rgb(247, 218, 100); font-size: 60px;">Warning</span></p>
Green: <p><span style="color: rgb(97, 189, 109); font-size: 60px;">Nothing to see here. </span></p>

<!--Custom Map Objects: Custom Traffic light-->

<div class="map_object map_table map_icon_large" id="<@itemid>" objectid="<@objectid>" subid="<@subid>" style="overflow:hidden;<#mapobject type="coordinates" subid="<@subid>" mode="<@editmode>">">
  <#mapobject type="objectgrip" mode="<@editmode>">
  <#mapobject type="htmlbefore" subid="<@subid>">

  <#sensor type="colorclassofstate" id="<@objectid>" var="status">
  <#objectproperty type="nodename" id="<@objectid>" var="nodename">
  <#if value="@nodename" is="sensor" then="sensr" else="hasred" varexpand="value" var="containsred" htmlbefore="test">
  <#if value="@nodename" is="sensor" then="sensy" else="hasyellow hasnored" varexpand="value" var="containsyellow">
  <#if value="@nodename" is="sensor" then="sensg" else="hasgreen hasnoyellow hasnored" varexpand="value" var="containsgreen">
  <svg xmlns="http://www.w3.org/2000/svg"

  viewBox="0 0 100 280">
      <rect class="trafficlight_frame" x="0" y="0" width="100px" height="280px" fill="#ECECEC" id="a" />
    <use xlink:href="#a" />
    <g class="trafficlight" transform="translate(0,0)">
      <use xlink:href="#a" />
      <circle class="trafficlight_circle" r="40" fill="#DADADA" cx="50" cy="50" />
      <circle class="trafficlight_circle" r="40" fill="#DADADA" cx="50" cy="140" />
      <circle class="trafficlight_circle" r="40" fill="#DADADA" cx="50" cy="230" />
      <circle style="<#if value="@status" contains="@containsred" then="" else="opacity:0" varexpand="value,contains">" r="40" fill="#E6005F" cx="50" cy="50" />
      <circle style="<#if value="@status" contains="@containsyellow" then="" else="opacity:0" varexpand="value,contains">" r="40" fill="#F59C00" cx="50" cy="140" />
      <circle style="<#if value="@status" contains="@containsgreen" then="" else="opacity:0" varexpand="value,contains">" r="40" fill="#C0CC19" cx="50" cy="230" />
  <div style="position:relative;margin-top:-20px">
    <#mapobject type="htmlafter" subid="<@subid>">

custom-html custom-map-object map prtg

Created on Dec 27, 2022 11:55:23 PM

Last change on Dec 28, 2022 7:13:14 AM by  Felix Wiesneth [Paessler Support]

1 Reply



I'd also be happy with dropping the traffic light and switching to a custom html with the same concept, if red alerts, red text etc...

Created on Dec 28, 2022 3:20:23 PM

Disclaimer: The information in the Paessler Knowledge Base comes without warranty of any kind. Use at your own risk. Before applying any instructions please exercise proper system administrator housekeeping. You must make sure that a proper backup of all your data is available.