Tip of the Week: Making CSS Customizations to a Single Page

As described in the Zendesk CSS Cookbook, you can pretty easily change the look of your help desk using simple CSS code contained in a CSS widget. The recipes we provided in the Cookbook apply changes to page elements across the entire help desk. For example, changing the sidebar background color and font settings (Customizing the sidebar) affects every page. But, what if you want to make changes to just one page? In this Tip of the Week, we show you how to do just that.

Let’s say you want to just make changes to the Submit a request page in the web portal. You’d like to dress it up a bit – for whatever reason, doesn’t matter, it’s your help desk. You’ll add CSS code that changes style settings for elements on the page – just as we described in the CSS Cookbook. The only difference is that you’re going to refer to the specific page in your CSS. So, it’ll be a change targeted at a specific page, rather than a global change that affects all pages.

So what might we want to change on the Submit a request page? How about the content background color? That’s easy.

Here’s the CSS code to change the content background (taken from Changing the content area background color):

/* Set the content area background
* and section divider */
.content_grey, div.setting-divider {
background: #F1F2E8; /* tan */
}

/* To restore the rounded top corner on the left side */
.grey_box_top {
background: #F1F2E8 url(/images/composite.gif?1284747712) no-repeat scroll;
}

/* To restore the rounded bottom corner bottom on the left side */
.grey_box_bottom {
background: #F1F2E8 url(/images/composite.gif?1284747712) no-repeat scroll 0 -10px;
}

Hang on, don’t do anything with this code yet. We need to add references to the page we want to change. How is that done? We just need to know what the page is called and then refer to it in the code. Fortunately, all the pages in Zendesk have names.

Let’s take a look at our MondoCAM demo account and find the name of the Submit a request page. Go here: http://mondocam.zendesk.com/anonymous_requests/new. Or, you can use your own account by entering the path this to page: .

Now, right-click within the browser and select to view the source. Scroll down to locate the opening body tag. You’ll see this:

<body class="anonymous anonymous-new">

This is the name of the page.

All we need to do now is to modify our code example to refer to the page. For example, here’s the first style change from our example above.

/* Set the content area background
* and section divider */
body.anonymous.anonymous-new .content_grey, body.anonymous.anonymous-new div.setting-divider {
background: red; /* tan */
}

The most important thing to note here is that you need to add the page path for every element you want to change. That’s why we’ve added the path before the two elements we’re changing in this example. If you don’t, you’re making a global change, which you don’t want.

So here’s the complete code for changing the content background:

/* Set the content area background
* and section divider */
body.anonymous.anonymous-new .content_grey, body.anonymous.anonymous-new div.setting-divider {
background: #F1F2E8; /* tan */
}

/* To restore the rounded top corner on the left side */
body.anonymous.anonymous-new .grey_box_top {
background: #F1F2E8 url(/images/composite.gif?1284747712) no-repeat scroll;
}

/* To restore the rounded bottom corner bottom on the left side */
body.anonymous.anonymous-new .grey_box_bottom {
background: #F1F2E8 url(/images/composite.gif?1284747712) no-repeat scroll 0 -10px;
}

That’s it. Add a new CSS widget (you’ve got to have administrator access in your help desk) and give this code a try.

One more important bit of information before we’re done. Not all of the help desk pages have their own, unique names. Some parts of the help desk use the same base page and just show different data. This is the case with the trigger and automation pages. Both of them named rules rule-index. When you select the Triggers and mail notifications page, the data is displayed using a filter and the URL looks like this: http://youraccount.zendesk.com/rules?filter=triggers. When you select the Automations page, the URL looks like this: http://youraccount.zendesk.com/rules?filter=automations. This means that the CSS changes you make to rules rules-index affect both of those pages.

Okay, now we’re done. Good luck with your CSS customizations. Check out the Zendesk CSS Cookbook and feel free to ask questions.