Replacing the header logo and title

Using the branding tools in Zendesk (Settings > Account > Branding) you can easily change the help desk title and replace the Zendesk logo with your own logo. If you want more flexibility with the size of your logo and branding, you can hide the Zendesk logo and the title of the help desk and format the header area to suit your needs. 

This example describes how to do the following:
  • Hide the Zendesk logo, the help desk title text, and the separator bar
  • Increase the width of the header
  • Insert a logo into the header
  • Change the font color of the links in the upper right corner of the header
  • Create a new div element to add a link to the logo using JavaScript

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

css_page_width_before.png

After

css_header_logo_after.png

CSS code

The following code hides the Zendesk logo and the help desk account title, increases the height of the header, and also shows how to change the font color of the links in the upper right corner (useful if you need it to contrast with the background color of your logo).

Note:In the after example above, the logo was created with a transparent background. The background color of the logo is set in the header (as shown below):background-color:#6699CC;.

Hide the Zendesk logo and help desk title text

/* Hide the Zendesk logo and help desk title text */
#table_header {
	display: none;
}

Increase the size of the header, add a logo, set the background color

/* Increase the size of the header, add a logo, set background color */
#header {
	height: 100px;
	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:#6699CC; /* blue */
}
 
/* Setting the #top background color removes the
 1 px white line above the menu bar */
#top {
    background:#6699CC; /* blue */
}

Set the text properties of the links in the upper-right corner of the header

/* 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:#FFA640; /* orange */
}

Adding a link to your logo

If you also want to add a link to the help desk home or your web site from the logo, you need to add some additional CSS code and also a simple JavaScript widget.

First add the JavaScript widget, which inserts a div element into the page that will overlay the logo and contains the href element to create the link.

Event.observe(window, 'load', function() {
 $$('#header')[0].insert(' <div id="header2"><a href="http://...your URL"><span>&nbsp;</span></a></div>'); });

Here's the additional CSS code to add (add this to a new or existing CSS widget). It sets the size of the div called 'header 2' that was added to the page with the JavaScript code. The height and width properties need to match the height and width of your logo.

/* Set properties of new div for logo link */
/* Inserted via JS Widget */
/* Must match the H and W of the logo image */
#header2 a { 
	display: block; 
	height: 100px; 
	width: 594px; 
	position: relative; 
	top: 0px; 
	left: 0px 
} 
 
#header2 a span { 
	visibility: hidden; 
}

 

 

Have more questions? Submit a request

Comments

  • Avatar
    Anton de Young

    Thanks to Zendesk user Michael Barnard for the JavaScript code included in this article. Here's his tip:  Add a link to your logo when using a CSS background

  • Avatar
    Jesse Lax

    Great tips here for the header. Thank you so much! I've used/modified this and it works wonderfully.

    For those more advanced CSS users looking to put an isolated logo over a separate background image:

    Add the #header_container class to the above CSS. This should contain the logo as the background-image property. Of course you'll have to add in th respective properties needed for this class. I would suggest using a .png with a transparent background.

    You then can utilize the #header class (shown above) to contain your background image. 

    Loving it!

  • Avatar
    Bradley

    Just the how-to I was looking for! Thanks!!

  • Avatar
    Jake Scully

    Is there any way to display user tags here or anywhere else on pages?

  • Avatar
    Max McCal

    @Jpaulscully - 

    User tags are displayed in the user widget (on the right side of the screen while you're accessing tickets), but otherwise, no. CSS wouldn't allow you to display any additional text or alter existing text in any way. 

  • Avatar
    Acole

    I am using a repeating image to mimic our website homepage, how can I get the image to repeat as a background image in the sidebars.

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

    #table_header {

    display: none;

    }

    #header {

    height: 150px;

    margin: 0;

    padding: 0;

    background-image: url(http://www.mycompany.com/Portals/143436/layout/body-bg.png?1344185848.807);

    background-repeat: repeat-x;

    background-position: top left;

    background-color:#FFFFFF; /* white */

    }

    Thanks in advance

  • Avatar
    Rodrigo De La Fuente

    I successfully changed the logo following the tutorial above however I can't add a link to the logo, here is the code that Im using (Im not a CSS expert)

     

    Event.observe(window, 'load', function() {

    $$('#header')[0].insert(' <div id="header2"><a href="http://www.mortgagecontests.com"><span> </span></a></div>'); });

    /* Set properties of new div for logo link */

    /* Inserted via JS Widget */

    /* Must match the H and W of the logo image */

    #header2 a {

    display: block;

    height: 127px;

    width: 594px;

    position: relative;

    top: 0px;

    left: 0px

    }

    #header2 a span {

    visibility: hidden;

    }

  • Avatar
    Anton de Young

    Rodrigo, the first two lines are JavaScript and should be added to a javaScript widget. The remaining lines of code or CSS and need to be in a CSS widget. 

  • Avatar
    Rodrigo De La Fuente

    Thank you for clarifying that it worked

  • Avatar
    Anton de Young

    Good to hear Rodrigo. I fixed the text to make that clearer. 

  • Avatar
    Carts and Tools

    OK, I think I have done all this correct but the javascript does not seem to be working.

    https://cartsandtools.zendesk.com

    I created a javascript widget, available for anyone with the following...

    Event.observe(window, 'load', function() {

    $$('#header')[0].insert(' <div id="header2"><a href="http://cartsandtools.com"><span> </span></a></div>'); });

    I created a CSS widget, available for anyone with 

    /* Set properties of new div for logo link */

    /* Inserted via JS Widget */

    /* Must match the H and W of the logo image */

    #header2 a {

    display: block;

    height: 100px;

    width: 667px;

    position: relative;

    top: 0px;

    left: 0px

    }

    #header2 a span {

    visibility: hidden;

    }

    However, the logo is still not hyperlinked....

    Ideas, help please..

    Brad

     

     

  • Avatar
    Tania

    @Carts and Tools

    The ' characters may be messing it up, copy and paste the following:

    Event.observe(window, 'load', function() { 

    $$('#header')[0].insert('<div id="header2"><a href="http://cartsandtools.com"><span> </span></a></div>'); });

  • Avatar
    Carts and Tools

    That solved it, plus removing the extra h in the hhttp: above.  Thank you!

  • Avatar
    Tania

    Sorry-  that was a type on my end. Should've done a better job at proof reading! :)

  • Avatar
    Support

    Support can't help, so maybe some here does. What I'm doing here seems pretty straightforward. I set up a background image to repeat-x  so it matches my website exactly. Here's the image if you're interested. https://d321u2ikjm5b5x.cloudfront.net/zendesk/header4.png

    I then layer my logo on top of that. This should work. But what I have are these annoying lines running vertically. I can't undo this. I think the problem is that I followed this cookbook CSS as a baseline.  I see the problem in the cookbook baseline with background-color, but I can't remove it. When I do, the stripes turn to blue. Ughhh. I left the cookbook background-color in and set to fff555 to pop out yellow. Still, I can't remove these stripes.  Here's what it looks like:  http://screencast.com/t/pLwjT5vQcieB

    Here's my modified cookbook code.

     

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

    #table_header {

    display: none;

    }

    #header {

    height: 175px;

    background-image: url(https://d321u2ikjm5b5x.cloudfront.net/zendesk/header6.png);

    background-repeat: repeat-x;

    background-position: top left;

    background-color:#fff555; /*what the fuck is this? Stripes on top?*/

    }

    #header_container {

    position: absolute;

    height: 68px;

    top: 1px;

    width: 275px;

    background-image: url(https://d321u2ikjm5b5x.cloudfront.net/zendesk/acme.png);

    background-repeat: no-repeat;

    background-position: top left;

    }

    #top li

    {

    border-left:none !important;

    padding-left:2px !important;

    }

    /* Setting the #top background color removes the

    1 px white line above the menu bar */

    #top {

    background:#f5f5f5; /* border I think */

    }

    /* 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:#FFA640; /* orange */

    }

     

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

    #table_header {

    display: none;

    }

    #header {

    height: 175px;

    background-image: url(https://d321u2ikjm5b5x.cloudfront.net/zendesk/header6.png);

    background-repeat: repeat-x;

    background-position: top left;

    background-color:#fff555; /*what the is this? Stripes on top?*/

    }

    #header_container {

    position: absolute;

    height: 68px;

    top: 1px;

    width: 275px;

    background-image: url(https://centroy.com/sites/centroy.com/files/centrohub\_logo.jpg);

    background-repeat: no-repeat;

    background-position: top left;

    }

    #top li

    {

    border-left:none !important;

    padding-left:2px !important;

    }

    /* Setting the #top background color removes the

    1 px white line above the menu bar */

    #top {

    background:#f5f5f5; /* border, but why is zendsek doing this??? */

    }

    /* 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:#FFA640; /* orange */

    }

     

     

  • Avatar
    Anton de Young

    The problem is that your graphic contains the border/lines you're seeing. Just trim that border down to solid colors and the gaps between the repeated graphics will go away. 

    graphic.jpg

     

  • Avatar
    Armine

    That did not work for me. I added the JavaScript code into the JS area and the styles to the CSS area. The resulting page doesn't have the extra div and the link hasn't been added either.

  • Avatar
    Armine

    I'm getting a Console error on this that says Event.observe is not a function (in Firefox)

  • Avatar
    Joy Raymond

    Hello i am working on zendesk for one classified site http://www.chillyads.com - The client has made special request to zendesk and they had provided FTP Details too

    But i dont know why in your admin panel we dont see any option of css widget or so

  • Avatar
    Aaron Hundt

    @Joy - Could I have you specify where you do not see the css widget option? Are you currently in the agent interface, Web Portal or Help Center?

  • Avatar
    Dorian Staten

    The logo link didn't work for me. I added the JS, inserted my site's link (paper.li), and added the CSS to the end of my CSS file (see attached image), and my logo link is still 'http://support.paper.li/hc/en-us.' Can you tell me what I might be doing wrong?

    Thanks,

    Dorian Staten

  • Avatar
    Philo Betto

    What is the name, how or where do I find the section of the CSS to change the size of the Search block on the help page design, CSS? The Theme we are using, even with a huge window the search block is so huge, have to scroll down to see articles tree. Thanks,

  • Avatar
    Jessie Schutz

    Hi Eric!

    You'll actually want to check out the CSS Cookbook for Help Center to get this info. We have a section dedicated to resizing the search box! You can find it here: https://support.zendesk.com/entries/28327436-CSS-cookbook-for-Help-Center#topic\_ovp\_rvd\_xl

    Hope that helps!

Please sign in to leave a comment.