Customizing the alert message bar

The container for Zendesk alerts and update and error messages is a div section called #flash. This example describes how to format the message bar using the following CSS customizations:

  • Set the background and border color of the message bar
  • Set the font color and size
  • Set the hyperlink font color

While the CSS in this article can be used to modify the web portal of the new Zendesk, it has no effect on the new agent interface.

For more information about getting started with CSS customization in Zendesk, see How to brand your Web portal.





CSS code

Within the#flashdiv there are a number of additional div sections that are used for different types of messages. The following example formats the message bar for all of those message types.

/* Set the background color, border, and font properties of the message bar */
#flash div#error, #flash div#notice, #flash div#beware, #flash div#alert, #flash .alert {
  background-color: #FFCD72; /* light orange */
  border: 1px #FF8800 solid; /* orange */
  color: #6F7866; /* dark gray * /
  font-size: 12px;
/* Set the hyperlink color of the message text */
#flash a.title {
  color: #669900 !important; /* green */
NoteIn setting the  #flash a.title element, we needed to use the CSS !important property to force the formatting to be applied. This is because the formatting you specify in your CSS widget may be reset by one of the Zendesk style sheets that are loaded into the browser after the CSS in your widget. This is how cascading style sheets works; styles are applied in the order they are loaded into the browser. By using the !important property, you can force your formatting to override any other CSS that also sets formatting for the element.
Have more questions? Submit a request

Sign in to leave a comment


  • 0

    For some reason my font colour just won't budge from the default settings. I copied the code above exactly and have managed to change the background colour, but the text and hyperlink text stays the same. Any ideas of what I am doing wrong? 

  • 0

    Hey, Donna -

    I just set up a ticket for you so we can look into this. Thanks!

  • 0

    Anton just added the !important statement to the font color declaration for the hyperlinks contained in these alerts. Thanks, Donna, for your message! We wouldn't have caught this so soon without you!

  • 0

    We would like to have an alert message bar to notify our agents when there's some system's issue that might affect them or our customers, is it there any way to modifiy the alert bar or have a secondary alert bar we can use (or widget)?

  • 0


    Where do i change the font for the date and time that in the email that is sent out when a ticket is created or updated.

    I have tried and it does not work.




  • 0


    At the moment there's no built-in way to do this, it's good feedback though and I'll pass it on to the Product team. If you're using Classic you could create a widget (HTML and CSS) that appears on the home page or lives on the right side of ticket pages when agents are logged in. If you're in new Zendesk you could create an app (using the Apps framework), but their visibility probably makes them less useful for use cases like this. 



    You can edit the style (including the font) of the email template by going to Admin > Channels > Email > Email templates > HTML template section. more information is available here: 

Powered by Zendesk