Forums/Documentation/CSS cookbook (Zendesk Classic)

Customizing the alert message bar

Anton de Young
posted this on August 08, 2011 14:06

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.

Before

page_notify_before.png

After

page_notify_after.png

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.
 

Comments

User photo
Donna Knott
harrisgrant

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? 

September 16, 2011 03:37
User photo
Max McCal
Product Manager

Hey, Donna -

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

September 26, 2011 12:19
User photo
Max McCal
Product Manager

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!

October 03, 2011 16:45
User photo
David Garcia
fon

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)?

July 04, 2013 07:40
User photo
Renato Lyke
konysolutions

Hi

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.

 

 

 

August 21, 2013 00:26
User photo
Laura D.
Zendesk

@David, 

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. 

 

@Renato

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: https://support.zendesk.com/entries/20378368-Customizing-your-email...

September 13, 2013 14:11