You can see the notification in action in the demo here.
Here is the HTML of the section that includes the ticket number in a div.
<td style="font-weight:bold" class="osta_ticket">
<div style="font-weight:bold">
<span class="Icon webTicket"></span>
<a style="display: inline" class="preview" data-preview="#tickets/65/preview" href="/a/1.12-2/scp/tickets.php?id=65">678775</a>
</div>
</td>
Using CSS I have hidden the ugly “webTicket” icon and neutered the bold text.
But the “font-weight:bold” styling (added by osTicket) is the key to adding the new reply icon.
Using a little CSS trickery, I’m adding a pseudo element (:after) to display the icon as a background image after the bold-styled div.
td.osta_ticket div[style="font-weight:bold"]:after {
width: 8px !important;
height: 8px !important;
background-size: 8px !important;
background-repeat: no-repeat !important;
content: '' !important;
display: inline-block;
margin: 13px 0px 0 11px !important;
background-image: url(../../osta/icons/reply.gif);
}
Ticket that don’t have a new reply do not receive the “font-weight:bold” styling from osTicket and therefore do not additionally receive the new reply icon background image from osTicket Awesome.
I hope this gives you clarification.
I’m still not entirely happy with my solution here. In fact, I want to completely redesign the ticket list again for the 10th time. Perhaps I will do so in the fall or winter.