Forums/Community/Community tips & tricks

Add a link to your logo when using a css background (Zendesk Classic)

Michael Barnard
posted this on September 14, 2009 23:31

Just thought I'd share this...

We have customized our zendesk account using CSS to add our own background (with inbuilt header/logo). It looks great but in doing so we lost the functionality to have a 'clickable' header logo to go back to our main website. After trying a couple of solutions i've found one that does the job with little fuss.

Step 1. Add a custom javascript widget
Inserts a new div and link - just change the link to your website.

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


Step 2. Add a Custom CSS widget
Forces the div size and position to suit the shape of the logo - you will have to adjust this to suit your image

#header2 a { display: block; height: 170px; width: 230px; position: relative; top: -200px; left: -25px } #header2 a span { visibility: hidden; }


The result: 
A customized zendesk which matches our main website branding. View it at: