Forums/ScreenSteps Live/ScreenSteps Live Questions

Answered

Zendesk Custom Template

Greg DeVore
asked this on June 05, 2010 13:55

This still isn't totally finished but we have been getting a lot of questions about it so I wanted to put up what we have far. Attached is our custom template file to make your ScreenSteps Live site look just like your Zendesk site. Once we have finalized everything we will post a more detailed tutorial on how to set everything up. For those of you who want to get started right away, here is what you need to do:

  • Download the attached template file
  • Customize the urls in the template to point to your own Zendesk installation 
  • Customize your own version of this css file:  http://bluemangolearning.com/stylesheets/sslive_zendesk.css
  • Right now this template references the css files that zendesk hosts. You may want to cache these on your own servers so that if any changes are made your template doesn't get messed up.

If you do end up finding any css changes that need to be made please post them here so that we can incorporate them into the final template.

You can learn about creating and using custom templates here:

http://help.screensteps.com/spaces/screensteps/manuals/screensteps_...

 

Comments

User photo
Greg DeVore
Blue Mango Learning Systems

And if you want to add the search documentation form, add a javascript widget in Zendesk with this code:

var search_div = jQuery("div#solution_suggestion div.content") 
if (search_div.length > 0) {   
  var string = '<h2>Documentation</h2><form method="get" id="screensteps-search" action="http://help.screensteps.com/searches"><input type="text" name="text" id="screensteps-search-text"><input type="submit" id="screensteps-search-submit" class="search button" value="Search" name="commit"></form>';
  jQuery("div#solution_suggestion div.content div.green_box_bottom").before(string); 
}

Then add the following css in a css widget:

 

form#screensteps-search input {   
  font-size: 20px; 
}
form#screensteps-search input#screensteps-search-text {
  width: 500px;
  background: url("/images/searchinput.gif") no-repeat scroll -205px 4px #FFFFFF;
  background-position: -205px 50%;
  padding-left: 30px;
  vertical-align: middle;
}

Be sure to update the url in the javascript to point to your ScreenSteps Live account.

June 05, 2010 14:24.
User photo
Jamie Pears

So, is this how you have your "Documentation" menu bar option (using Screensteps), with the rest (Home / Forum / Submit a request, etc.) all in Zendesk??

June 09, 2010 14:56.
User photo
Trevor DeVore
Blue Mango Learning Systems

Yes.

June 09, 2010 14:58.
User photo
Greg DeVore
Blue Mango Learning Systems
Ajax_loader_small Answer

Just an FYI. We have posted a lesson to the documentation on how to set all of this up. You can see it here:

Adding a Zendesk custom template to your ScreenSteps Live site

June 14, 2010 14:48.