Forums/Community/Community tips & tricks

Customizing Header Content & Links - How To

Dennis Vogel
posted this on July 19, 2012 11:40

I wrestled with a way to customize the content, not just the formatting, of the Support page header so customers could get back to my main web site. I could not find an existing topic on this, so I thought I'd share what I ended up with.

/* This gets the first row from the Table Header div section where your logo and Support link are by default */
var firstRow=document.getElementById("table_header").rows[0];

/* This specifies the position of the new cell in the current row. 1 will put your item after the logo. The value of -1 can also be used; which results in that the new cell will be inserted at the last position.*/
var firstCell=firstRow.insertCell(1);
firstCell.innerHTML="<a href=\"http://www.denvog.com/about\">About</a>";

/* The ZenDesk divider lines are images in their own cell */
var secondCell=firstRow.insertCell(2);
secondCell.innerHTML="<img alt=\"\" id=\"logo-delimiter\" src=\"http://assets.zendesk.com/images/logo-delimiter.png?1341357546\">";

This is working for me when viewed on Mac OS X using Safari, and on my iOS devices. Haven't tested on anything else yet.

PS - Don't forget to escape inline quotes you have in URL by putting a back slash in front of them. \"

 

Comments

User photo
Dennis Vogel
denvog

If you'd like to use a text link for your home page, rather than the ZenDesk image, or creating an image of your own, this seems to work.

/* This gets the first row from the Table Header div section where your logo and Support link are by default */
var firstRow=document.getElementById("table_header").rows[0];

/* This gets the first cell of the row, where the logo would normally be */
var logoCell=firstRow.getElementsByTagName("td")[0];
logoCell.innerHTML="<a href=\"http://www.denvog.com\">DenVog</a>";

July 19, 2012 12:11