Forums/Documentation/CSS cookbook (Zendesk Classic)

Replacing the header logo and title

Anton de Young
posted this on July 11, 2011 11:08

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; 
}

 

 

 

Comments

User photo
Anton de Young
Zendesk

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

August 04, 2011 09:56
User photo
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!

January 27, 2012 18:45
User photo
Bradley
weismanntech

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

March 27, 2012 20:32
User photo
Jake Scully

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

May 10, 2012 13:58
User photo
Max McCal
Product Manager

@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. 

May 10, 2012 14:10
User photo
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?13441858...);
background-repeat: repeat-x;
background-position: top left;
background-color:#FFFFFF; /* white */
}

Thanks in advance

August 07, 2012 03:46
User photo
Rodrigo De La Fuente
cineflix

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>&nbsp;</span...); });
/* 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;
}

December 09, 2012 19:46
User photo
Anton de Young
Zendesk

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. 

December 10, 2012 08:25
User photo
Rodrigo De La Fuente
cineflix

Thank you for clarifying that it worked

December 10, 2012 08:29
User photo
Anton de Young
Zendesk

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

December 10, 2012 08:32
User photo
Carts and Tools
cartsandtools

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, &#039;load&#039;, function() {
$$(&#039;#header&#039;)[0].insert(&#039; <div id="header2"><a href="http://cartsandtools.com"><span>&nbsp;</span><...); });

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

 

 

May 22, 2013 10:23
User photo
Tania
Zendesk

@Carts and Tools

The &#039; 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>&nbsp;</span><...); });

May 22, 2013 18:47
User photo
Carts and Tools
cartsandtools

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

May 22, 2013 18:59
User photo
Tania
Zendesk

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

May 22, 2013 19:02
User photo
Support
centroy

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 */
}

 

 

June 12, 2013 15:46
User photo
Anton de Young
Zendesk

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

 

June 12, 2013 16:04
User photo
Armine
affinnovainc

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.

January 28, 2014 12:42
User photo
Armine
affinnovainc

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

January 28, 2014 12:47