Tip of the Week: Customize Your Help Desk Header Using CSS

September 3, 2010

A while back, our CEO Mikkel Svane called out some impressive Zendesk design implementations. Zendesk allows the web developers among you, to leverage both custom CSS and Javascript in order to do some extensive customization of a Zendesk Help Desk.

In this Zendesk Tip of the Week, I wanted to show you how to customize your entire header and page background.

It will be all CSS – and while some basic CSS knowledge will help you understand what’s going on, hopefully this can inspire anybody personalize their Zendesk.

You’ll be well on your way to achieving what our friends at Carbon Guerilla have done with their Zendesk (see the image above).

Before and After

For our example, we are going to be taking a default Zendesk implementation:


and turning it into this:


Setting up the CSS

First thing we need to do is set up a Global CSS Widget on our Zendesk.

totw global css widget-2.pngTo do so, go to the Widgets page under Account tab in the top navbar. Click Add Widget in the upper right. On the next page, scroll down and choose Global CSS Widget (see sidebar).

This will drop us into the widget itself. You can name it whatever you want — the name is for admin use only — but we suggest making it descriptive. Leave the availability as is.

In the text box is where we will add the CSS necessary to customize our header and site background. However, before we do that, we need to figure out exactly what HTML elements we are doing the styling on. Again, it helps if you know a bit about CSS here, but basically, in order to change the elements of the header that are green or which display the Zendesk logo, we need to know what those elements are.

The best way to figure out to which elements we want to apply our CSS rules, is to use a browser tool like Firebug for Firefox, or the built-in developer tools for webkit-based browsers such as Safari and Chrome.

Using one of these types of tools, you can right-click on any part of your help desk header and figure out exactly what the HTML element is. For instance, here I’ve figured out that the green band in the header is set (appropriately enough) by a div called “header.”


If you’ve used the browser developer tools or Firebug before, you’ll know that you can then modify and change the current CSS rules to get a better sense of which HTML elements control which styles. By going through this process, I have found out that I need to write rules for the following HTML elements (in CSS, elements with a particular ID are prefaced with a hash tag, while the actual tags are written without prefix):

  • body – controls the background color of the page
  • #header – controls what goes across the top of the page above the top navbar
  • #page – controls the white margin you get on a default Zendesk implementation
  • #table_header – controls the space in the header containing the Zendesk logo and help desk name

Making Our Changes

Step 1 – Page Background Color

First thing, I want to change the page color to a cool orange color, to reflect my (in this case fictional) company site. To do so, I go to the CSS Global Widget I created earlier and put in this rule:

body {

Hit update and it makes a small change. This will be more important later when we connect up our header.


Step 2 – Swapping out the Header

Next we want to add the header that looks similar to the rest of our company site. For that you need to create an image based on your company’s site header. Because Zendesk has a fluid layout by default (its dimensions change based on the size of the browser) you’ll want to make sure that your header won’t look silly as the page resizes.

I create a header image and uploaded to my server so that I can access the URL using the CSS “background-image” property (see below). The rest of the rule controls the position of that image.

#header {
	background-image: url('https://mattlatmatt.com/shared/totw-header-export.png');
	background-position:top left;

Hit update. The result is pretty good, but we still have a few issues to clear up.


Step 3 – Integrating the Header

To get rid of the old logo and remove the white margin, we add these three CSS rules:

#page { /* removes the white margin */
	padding-left: 0px;
#table_header { /* hides the previous logo */
div#container {  /* adds margin back below header */
	padding-left: 10px;
	padding-right: 10px;

Now we hit update, and our header and background are well integrated.


Obviously you can take it farther than that if you wish, such as changing the color of the top navigation or altering the appearance of all the inner elements. It can take a bit of time up front, but branding your support site is definitely worth it.