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

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> </span></a></div >'); });

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: http://support.clickonprint.com.au/


Please sign in to leave a comment.