A customer may have a requirement to make notifications in CRM stand out more from the rest of the items onscreen. It was found through testing that users were ignoring notifications, as they weren't obvious enough on-screen.


This can easily be customised using CSS. You can view what CSS is applied to an on-screen element by hitting F12 to open the Internet Explorer development tools, then selecting the cursor button at the top left and selecting a screen element. Hitting the Trace Styles button will show you what attributes are applied to the element. You can also see where the source of the CSS is - for the default Color theme it's in ..\CRM\WWWRoot\Themes\color1.css.

Work around / Resolution:

The notification background is a table element with a class of NotificationTable, with a background of #f2f2f2. This is a sort of pale grey. For this example, I'll use use bright red (#FF3300) instead. Here's a handy HTML colour picker that may help, though you can also use the generic HTML colour names:

I can edit this by editing the background for .NotificationTable in ..\CRM\WWWRoot\Themes\color1.css. This gets us part of the way there.

The next step is to check the class names for the two table cells that are still grey. These are TABLEHEAD3 and ROW2I. TABLEHEAD3 is specific to notifications, so we should be fine editing this. ROW2I shares attributes with other classes, so I added a new bit of CSS after the common settings:

background: #FF3300;

Once these are done, the backround should be a solid red colour.

Finally, we want to do something about the text. The cell that the word "Notification" appears in is controlled by the TABLEHEAD3 class. The notification text is in a link class called NOTIFICATION_BUTTON. The "Dismiss" and "Snooze" buttons fall under NOTIFICATIONANCHOR.

In the example used in the customer case, I set the Notification heading to yellow (color: #fff000), the notification body text to white (color: #ffffff), and Dismiss and Snooze to white.

This should give a suitably garish notification - you can't miss it now!

Just a quick note. You can probably make the notification heading blink by using the <blink> tag in the heading translation, or by using text-decoration:blink. It's not supported across a wide range or browsers for aesthetic reasons (using text-decoration will work in Firefox).