Source code for CSS customization examples

Here is the complete CSS file for our MondoCAM demo and training account. It includes the code used in the Cookbook examples in this forum. You may find some slight differences in the code in this file when compared to the Cookbook topics. This is because this is the final product, not steps along the way.

This simple customization makes minor changes to the page layout and also changes font settings and the background colors of many of the elements in your Zendesk. Feel free to use this to start your own customization.

Updated: 8/9/2011

/*** MondoCAM CSS customization ***/
 
/* COLORS:
 * Most of the colors in this CSS are Hex. 
 * You can use Hex, RGB, or simple named colors such as 'blue'
 * 
 * Header background: #6F7866 - medium gray green
 * Page background: #2E3B3B - dark gray
 * Top menu bar background: #FF8800 - orange
 * Top menu drop down list items: #6F7866 - gray 
 * Top menu drop down list hover highlight: #FF8800 - orange
 * Top menu drop down list background: #F1F2E8 - tan
 * H1, H2, H3 color: #6F7866 - gray
 * Sidebar background: #FFFFE1 - pale yellow
 * a links within the content area and sidebar: #669900 - green
 * Misc highlight color: #FFCD72 - light orange
 * Misc body text: #333333 - dark gray
 * Misc fonts: #FFFFFF - white
*/
 
/*** REPLACE THE ZENDESK HEADER ***/
/*** You also need to add a JavaScript widget to the help desk 
 * to create a link to the home page. This is described in
 * https://support.zendesk.com/entries/20263417-replacing-the-header-logo-and-title
 */
 
/* Hide the Zendesk logo and help desk title text */
#table_header {
	display: none;
}
 
/* Increase the size of the header, add a logo, set background color */
#header {
	height: 100px;
	/* Add the link to your logo with the next setting */
	background-image: url(http://LOCATION OF YOUR LOGO.com/your_logo.png);
	background-repeat: no-repeat;
	background-position: top left;
	background-repeat: no-repeat;
	background-color:#6F7866; /* gray */
}
 
/* Setting the #top background color removes the
 * 1 px white line above the menu bar */
#top {
    background:#6F7866; /* gray */
}
 
/* Set the text properties of links in top-right 
 * User name, profile, help, login/logout */
#top-right, #top-right a, #top-right p {
    color:#FFFFFF; /* white */
    font-size:12px;
    font-weight:normal;
    margin:25px 0 0;
    text-shadow:0 2px 3px rgba(0, 0, 0, 0.5); /* This may not work with all browsers */
}
 
/* Change the hyperlink hover color of links in top-right */
#top-right a:hover {
	color:#FF8800; /* orange */
}
 
 
/*** SET THE PAGE LAYOUT ***/
/* This customization is described in:
 * https://support.zendesk.com/entries/20266856-setting-the-page-width-and-removing-the-page-border
 */
 
/* Set the width of the page */
/* If you want to constrain it
 * to a specific size. */
#page {
	margin: 0 auto;
	width: 1000px;
	max-width: 1000px;
	min-width: 1000px;
	position:relative;
	right: 2px;
	/* These two settings remove the white border next to the header. */
	padding-left:0px;
	padding-right:0px;
}
 
/* Set the minimum width of the frame */
.frame {
	min-width: 510px;
}
 
/* Add a border within the content container
 * to compensate for taking it away
 * in #page. */
div#container {
	padding-left:10px;
	padding-right:10px;
}
 
/*** FOOTER ***/
/* This example formats the footer to match
 * the page width set above and changes
 * text properties. 
 * Customizing the footer is described here:
 * https://support.zendesk.com/entries/20264367-customizing-the-page-footer
 */
 
/* Set the footer width to match the page width */
#footer {
	margin: 0 auto;
	width: 1000px;
	max-width: 1000px;
	min-width: 1000px;
}
 
/* Set the footer text hyperlink color */
#footer a {
	color: #FFFFFF; /* white */
}
 
/* Set the footer text hyperlink hover color */
#footer a:hover {
	color: #FFFFFF; /* white */
}
 
/* Center the footer text and add a drop shadow
 * to the text. */
#footer p {
	text-align: center;
	color:#FFFFFF; /* white */
	margin:25px 0 0;
	text-shadow:0 2px 3px rgba(0, 0, 0, 0.5); /* This may not work with all browsers */
}
 
/* If you want to completely hide the footer, here's the code */ 
/* #footer {
	visibility: hidden;
}
*/
 
/*** TOP MENU BAR ***/
/* This customization is described in:
 * https://support.zendesk.com/entries/20348113-customizing-the-top-menu-bar */
 
/*** Code for formatting the top menu background, borders, and menu tabs ***/
 
/* Set the background color of the top menu bar */
#top-menu-background, #top form#topquery {
    background-color: #FF8800; /* orange */
}
 
/* Set the left border color of the tabs to the same color as the background */
ul#green.agent-tabs li.main {
    border-left: 2px solid #FF8800; /* orange */
} 
 
/* This code controls the positioning of the menu tabs.
*  No need to change anything here - just be sure to include it. */
ul#green.agent-tabs li.tab_home.first, ul#green.agent-tabs li.tab_home.first:hover, ul#green.agent-tabs li.tab_forums, ul#green.agent-tabs li.tab_forums:hover {
    border-left: 0!important;
    padding-left: 0!important;
}
 
/* Set the hover background color for the inactive (unselected) tabs */
ul#green.agent-tabs li.main:hover, ul#green.agent-tabs li.over, ul#green li.main:hover {
    background:#6F7866; /* gray */
}
 
/* Set the hover background color for the active (selected) tab */
ul#green.agent-tabs li.active:hover, ul#green.agent-tabs li.active.over {
    border-left: 2px solid #FF8800; /* orange */
    background:#6F7866; /* gray */
}
 
/*** Code for formatting the drop down menus (Manage and Settings) ***/
 
/* Set the drop down menu section labels (Business Rules and Sandbox) */
#green li.drop-header {
	color:#464646; /* dark gray */
	background-color: #F1F2E8; /* tan */
} 
 
/* Set the drop-down menu background and border color */
#green ul.menu-drop {
	border-color:#FF8800; /* orange */
	background-color: #F1F2E8; /* tan */
}
 
/* Set the drop-down menu list item text and background color  */
#green ul.menu-drop li a {
	background-color: #F1F2E8; /* tan */
	color: #6F7866; /* gray */
} 
 
/* Set the drop-down menu list item text and background hover color */
#green ul.menu-drop li a:hover {
	color: #FFFFFF; /* white */
	background-color: #FF8800;  /* orange */
}
 
/*** CONTENT AREA BACKGROUND COLORS ***/
/* This examples sets the background colors for
 * the content containers of the help desk. 
 * Details about this customization are here:
 * https://support.zendesk.com/entries/20336093-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;
}
 
/* Set the background color for content_green */
.content_green, .green_box_top, .green_box_bottom {
	background: #FFFFE1; /* pale yellow */
}
 
/* Set the background and border of the forum headings */
div.category-header {
	background-color: #F1F2E8;
	border-bottom: none;
}
 
/*** CONTENT AREA FONT SETTINGS ***/
/* This code sets the font size and color for headings
 * and hyperlinks used in the content area.
 * This is described in more detail here:
 * https://support.zendesk.com/entries/20271007-changing-the-font-settings-of-the-main-content-area */
 
 
/* Set the default content hyperlink color */
.content a {
	color: #669900; /* green */
} 
 
/* Set the font color of the Edit link */
.content a.edit_this, #search-result a.edit_this {
	color: #669900; /* green */
}
 
/* Set the font color of the Action link */
.category-top-right .edit_this, .floating_menu_ui .floating_menu_action {
	color: #669900; /* green */
}
 
/* Sets the font color of misc links */
span.link, p.link {
	color: #669900; /* green */
}
 
/* Set h2 heading size and color */
.content h2, .content h2 a {
	font-size: 20px;
	color:#6F7866; /* gray */
}
 
/* Set h2 heading hover size and color */
.content h2 a:hover {
	font-size: 20px;
	color:#669900; /* green */
	text-decoration:underline;
}
 
/* Set the h3 heading font color */
.frame h3 {
    font-size: 18px;
    color: #6F7866; /* gray */
    font-weight: normal;
} 
 
/*** FORUMS ****/
/* This code formats the headings and hyperlinks
 * in the forums content. This customization is described
 * here: https://support.zendesk.com/entries/20345373-formatting-the-forum-content-headings */
 
/* Set the formatting for .frame.colums */
/* This is the container for forums */
 
/* Set category heading size and color */
.content .frame.columns h2, .content .frame.columns h2 a {
	font-size: 20px;
	color:#6F7866; /* gray */
}
 
/* Set category heading hover size and color */
.content .frame.columns h2 a:hover {
	font-size: 20px;
	color:#669900; /* green */
	text-decoration:underline;
}
 
/* Set the font color of h3 active links */
.content .frame.columns h3, .content .frame.columns h3 a {
	color: #6F7866; /* gray */
} 
 
/* Set the font hover color of h3 active links */
.content .frame.columns h3 a:hover {
	color: #669900; /* green */
	text-decoration:underline;
}
 
/* Set the hyperlink color for the forums */
.content .frame.columns a {
	color:#669900; /* green */
}
 
 
/*** TICKETS TABLE IN ZENDESK CLASSIC AGENT INTERFACE ***/
/* This code customizes the tickets table in the agent interface of Zendesk Classic.
 * Described here: https://support.zendesk.com/entries/20273691-customizing-the-tickets-table */
 
/* Set the header row background color of the tickets table */
table.tickets thead th {
	background-color:#F1F2E8; /* tan */
}  
 
/* Set the font color and background color of the active row */
table.tickets tr.linked:hover > td, table.tickets tr.linked:active > td {
    background-color:#FFCD72; /* light orange */
} 
 
/* Set the background color of the alternating shaded table rows */
table.tickets tr.linked:nth-child(2n+1) {
    background-color: #F1F2E8; /* tan */
}  
 
/* Set the background color of the table 'group by' rows */
table.tickets tr.group_by td {
    background-color: #F1F2E8; /* tan */
    border-bottom: 2px solid #F1F2E8; /* tan */
}
 
/* Set the color of the bottom border of the table rows */
table.tickets td {
    border-bottom: 1px solid #F1F2E8; /* tan */
}
 
/*** ALERT MESSAGE BAR ***/
/* The alert message bar is displayed at the
 * top of the page. It is described here:
 * https://support.zendesk.com/entries/20345353-customizing-the-alert-message-bar */
 
/* 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; /* green */
}
 
/*** SIDEBAR ***/
/* This example sets the font sizes and colors
 * and background area of the sidebar.
 * Described here: https://support.zendesk.com/entries/20271027-customizing-the-sidebar */
 
/* Set the background color of the sidebar */
.side-box-content, .blue_box_top, .blue_box_bottom, .side-box-with-image, .r_blue {
	background-color: #FFFFE1; /* pale yellow */
}
 
/* Set the body text font color */
.side-box-content, .side-box-content .user_formatted {
	color: #333333; /* dark gray */
} 
 
/* Set hyperlink font color */
.side-box-content a, #sidebar .widget a, #widget_manager_widget a {
	color: #669900; /* green */
} 
 
/* Set heading (h3) font color */
.side-box-content h3, #sidebar .widget h3, #widget_manager_widget h3 {
	color:#FF8800; /* orange * /
}
Have more questions? Submit a request

Comments

  • Avatar
    Juan Arango

    Anton, Thank you!!! very useful your cook book. I want to change the home page and add some information of our company, photos, logos, links etc how can I do that?

    Thank you for your valuable help!

  • Avatar
    Anton de Young

    Juan, 

    You can create a forum topic and add all your information and links and photos and then pin that topic to the home page. There's an option called Pin to Home. Will that work for you?

  • Avatar
    Juan Arango

    Yes Ill do that! Thanks

  • Avatar
    Kevin Crump

    Hi Anton,

    Your supporting documentation is very good thank you.

    Alas I'm something of a CSS rookie and all I really want to do is change the default font used throuoghout the site.

    Is there a quick and easy way to do this or do I need to edit individual elements/pages?

    Thanks in advance for your assistance.

  • Avatar
    Anton de Young

    Kevin, 

    The global font setting is in this CSS code:

    body {

    font-size: 11px;

    font-family: Arial,Helvetica,sans-serif;

    font-style: normal;

    font-variant: normal;

    color: #333;

    }

    If you wanted to change it to a different font family, just replace the font-family setting:

    body {

    font-size: 11px;

    font-family: "Times New Roman",Georgia,Serif;

    font-style: normal;

    font-variant: normal;

    color: #333;

    }

    That should work for you. 

  • Avatar
    Kevin Crump

    That's great Anton thank you.

    And the swift response is much appreciated :)

  • Avatar
    Satya
    1. How I can add the "What our customers think about our support" section to my page.

     

    1. How to change the font on the support page.

     

    1. I like the new menu bar on the right. How can i add that to my page?

     

    Thank you so much for this Cook Book - its really appreciated!

     

    Best,

     

    Satya

  • Avatar
    Satya

    Sorry the first part of my post got deleted. I really like the new Zendesk Support Page - https://support.zendesk.com/home

    and I'm wondering how I can mimick it. Thanks!

  • Avatar
    Anton de Young

    Satya, 

    The customization we did for  https://support.zendesk.com/home is quite complex compared to the much simpler CSS examples we have in the cookbook. We're working on an article to explain what we did. 

  • Avatar
    Yolandé Nelson

    Hi Anton,

    Is there a way to replace a whole <div id= > section on a page? 

    For example, after an end-user search, "Didn't find what you were looking for?" is displayed, followed by "Get in touch" and "Fill out a request form" which is a plain href link.

    Is there a way that this can be replaced e.g. with a button similar to the search button, using a JS widget or CSS or both?

  • Avatar
    Max McCal

    Hi, Yolande -

    You can't do a replacement with CSS, but it's generally possible using Javascript. For example, to replace the Deflect Tickets section that contains the "Fill out a request form" section, you could use something like this. Obviously, you'd want to add your own HTML into this to create the replacement div. 

    $j('div.deflect.tickets').replaceWith('<REPLACEMENT HTML GOES HERE>');

    Here's a quick article I found on the "replaceWith" command: http://www.w3schools.com/jquery/html\_replacewith.asp

    Let me know if I can help any further!

  • Avatar
    Yolandé Nelson

    Thanks Max, that looks like what I was looking for.  Will be back when I get stuck.

  • Avatar
    David Rose

    I've managed to customise the header of my Zendesk, but I've got a couple of green lines on the sides of the tabs that I just can't shift (see attached image). Any suggestions as to what element I'm missing ?

    /* Hide the Zendesk logo and help desk title text */

    #table_header {

    display: none;

    }

    #header {

    height: 100px;

    background-image: url(http://www.navigator-support.com/images/body.png);

    background-repeat: repeat-x;

    background-position: top left;

    background-color:#6699CC; /* blue */

    }

    #header_container {

    position: absolute;

    height: 68px;

    top: 28px;

    width: 275px;

    background-image: url(http://www.navigator-support.com/images/small\_logo.png);

    background-repeat: no-repeat;

    background-position: top left;

    }

    #top-menu-background, #top form#topquery {

    background-color:#6699CC; /* blue */

    }

    /* Set the left border color of the tabs to the same color as the background */

    ul#green.agent-tabs li.main {

    background-color:#6699CC; /* blue */

    }

    /* This code controls the positioning of the menu tabs.

    * No need to change anything here - just be sure to include it. */

    ul#green.agent-tabs li.tab_home.first, ul#green.agent-tabs li.tab_home.first:hover, ul#green.agent-tabs li.tab_forums, ul#green.agent-tabs li.tab_forums:hover {

    border-left: 0!important;

    padding-left: 0!important;

    }

    /* Set the hover background color for the inactive (unselected) tabs */

    ul#green.agent-tabs li.main:hover, ul#green.agent-tabs li.over, ul#green li.main:hover {

    background:#6F7866; /* gray */

    }

    /* Set the hover background color for the active (selected) tab */

    ul#green.agent-tabs li.active:hover, ul#green.agent-tabs li.active.over {

    border-left: 2px solid #FF8800; /* orange */

    background:#6F7866; /* gray */

    }

     

  • Avatar
    Thierry DELABRE

    @David Rose,

    hello Try to add those lines to remove the green lines : 

    #top li

    {

    border-left:none !important;

    padding-left:2px !important;

    }

     

    hope this help

    Cheers, 

    Thierry

  • Avatar
    David Rose

    Thanks Thierry, that worked :)

  • Avatar
    Jerry Battaglia

    This is really awesome, thanks. How do I change the color of the text in the top menu bar?

  • Avatar
    David Rose

    Do you mean the bit that says "login" etc ?

    /* top right menu */

    #top-right, #top-right a, #top-right p

    {

    color:White;

    }

     

  • Avatar
    Mark Bailey

    On the Zendesk site, how did you move the top right links (login, etc.) to a different position on the page?

    Also, is an article still in the works on how the Zendesk site customizations were done?

  • Avatar
    Summer Reeves

    How do you change the font color of the navigation? Standard and hover.

    See attached for example.

  • Avatar
    Ross Chapman

    @Mark Baily,

    We reposition elements using javascript.  Basically, we 1) select the elements we want to position and store them in a variable, and then 2) we inject this variable in the DOM where we'd like.  Since we're fond of jQuery we take advantage of the replaceWith() or prepend() and append() methods for DOM manipulation and insertion.

    Hope that helps!

  • Avatar
    Mark Bailey

    It helps. Would you be willing to provide some examples or a tutorial?

  • Avatar
    Ross Chapman

    Actually @mark, if you look above (I just noticed myself) to Jan 17th.  You can see a similar example that Max McCal has illustrated.  That's the basic concept.

  • Avatar
    Corey Harrington

    We've done a great deal of custom CSS and design to our zendesk. You can check ours out here:

    https://cyberuc.zendesk.com/access/

  • Avatar
    Anton de Young

    Corey, 

    Thanks for the link. Looks good!

  • Avatar
    Scottd

    I have noticed that my CSS changes show up in Internet Explorer and Firefox on Win 7. But apparently they have no effect on Google Chrome (Win 7) nor Safari and Firefox (Mac OS).   I cleared the cache on Chrome to be sure.  (I'm not able to do much testing on the Mac machine.)  Is this a known issue?  Any solutions?

  • Avatar
    Max McCal

    Hey, Scott-

    Not a known issue by any means. I do all my customizations in Chrome, though I use a Mac. I'll open up a ticket for you so we can get some more info. 

  • Avatar
    Scottd

    Correction to my comment above:  The CSS changes I've made (almost all of them related to colors) aren't affected by the browser but by whether I am logged in.  As the administrator who changed the colors, I can see all the changes. But when I'm not logged in, or when logged in as another user, I don't see any of my CSS changes.

    I entered the CSS code into the Extension titled "CSS - Admin use only."  Is this the wrong place to enter the CSS changes?

  • Avatar
    Max McCal

    Scott-

    That makes perfect sense. Sounds like you need to change the "Available for" setting on the widget.

    available.png

    That's what it looks like now, you want to change it so it's visible to Anyone. Let me know if that achieves what you want.

  • Avatar
    Scottd

    Thanks, Max.  That appears to have solved it. I was assuming that control affected who could change the CSS, not who could see the effects of the changes.  Thanks again for clarifying.

  • Avatar
    Corey Harrington

    We are very curious about how both zendesk and reuters did a full integration into their sites? It looks like zendesk is somehow displayed in a frame within the website. Can an example be given on how to do this? We would love to have zendesk simply look like another page on our website, but we would need to know what width to set it to and how to create the navigation to mimic the navigation on our site. I have searched far and wide and have not seen any examples on this. Thanks. 

Please sign in to leave a comment.