Help Center Responsive Design

Hi JJ - The icons that I'm using are FontAwesome icons which are free to use.  If you are on a plan above Starter then you can use them in your Help Center as it requires one line of code.  Here is a tutorial that I wrote just to get the icons.

https://support.zendesk.com/entries/26807203

You can also see theme on my current theme that I"m working on.

http://moderatorwes.zendesk.com

And here is a complete theme that I built which you can copy and paste all or bits of my code.

https://support.zendesk.com/entries/41702416

Just let me know if you need any additional help.

Has anyone been able to get Bootstrap Tabs to work for them in the new Help Center? 

I’d like to be able to add tabs or pills within the articles themselves but haven’t been able to get them to work. Here’s what I did:

1) In the “Document head” section added the necessary JS and CSS Bootstrap files:

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

2) In the article added the example tab code from the Bootstrap site ( http://getbootstrap.com/javascript/#tabs):

<!-- Nav tabs -->

<ul class="nav nav-tabs">

  <li class="active"><a href="#home" data-toggle="tab">Home</a></li>

  <li><a href="#profile" data-toggle="tab">Profile</a></li>

  <li><a href="#messages" data-toggle="tab">Messages</a></li>

  <li><a href="#settings" data-toggle="tab">Settings</a></li>

</ul>

<!-- Tab panes -->

<div class="tab-content">

  <div class="tab-pane active" id="home">...</div>

  <div class="tab-pane" id="profile">...</div>

  <div class="tab-pane" id="messages"> messages</div>

  <div class="tab-pane" id="settings">...</div>

</div>

The only thing I can think of is that this doesn’t work with JQuery 1.9.1. Or that the JQuery file is loaded after the Bootstrap JS. But then other responsive styling seems to work well. Any ideas?

Thanks in advance for your help!

@Anya - I was able to put some tabs in my articles without any issues.  Make sure when you paste your code that you paste into the "Source Code" window.  I also have implemented accordions within articles without any issues.  Here is an example of my tabs:  https://moderatorwes.zendesk.com/hc/en-us/articles/202539583

@Wes, thanks! Your new theme looks awesome. For the tabs, did you add any javascript additional to the bootstrap file? Any way to take a look at your new theme in Zendesk? I was able to get the tabs to work otherwise, so I'm wondering if it's something Zendesk specific that I'm doing wrong. 

@Anya - I did not add any additional JavaScript as that was straight Bootstrap Code.  I'm glad you liked the theme as I currently have two themes available.  Feel free to look through my code and use all of it or just certain sections of it.  You can see the themes from my GitHub account here: https://github.com/moderatorwes 

Just let me know if you need any additional help as I will be glad to take a look at your Help Center if needed.

@Wes @Anya - I am having the exact same issue. cannot get Accordion to work within an article. Just to be sure the css and code are working, I added an accordion to the homepage and it works fine. But as soon as I put it in an article (using the Source Code button), it does not work??

I noticed that Wes' code uses the 3.0.0 bootstrap, whereas current code is 3.0.3 - but even changing that didn't solve it... The styling works, but the js is not running and the accordion's are treated as an in-page html anchor.

Wes - would you mind sharing the source code for your article page?

@James and @Anya - I think I know what the issue is here.  Go to "General Setting" and check the box "Display UnSafe Content".  This will allow the JavaScript code to run on your article pages.  I just tested and if this is not checked the JS does not work.  This is why mine was working on my site as I had this option already checked.  Let me know how it goes.

@James - I've updated my article - https://support.zendesk.com/entries/27128856-Help-Center-Collapsible-headers-in-articles-accordions-.  

I made sure to add the part about checking the "Display Unsafe Content".  The code I used is located in that article and in the comments section there is more code to collapse all accordions on start-up.

That worked! Thanks Wes. 

@Anya - Awesome glad to hear.  Goodluck.

@Wes - I'm having a bit of trouble getting the nav bar to be responsive. Almost there but it still does a few odd things with alignment. One thing that I'd like to do to help fix alignment is a media query:

@media screen and (min-width: 768px) and (max-width: 1024px) {
.nav{
position: absolute;
margin-right: 5%;
}
}

Unfortunately I can't seem to it to work. Any thoughts? Or in general, any best practices for getting a responsive nav bar? The one I'm working with is the standard navigation for the Nobel Feast theme.

@Anya - The easiest solution is include the Bootstap framework into your document head which I think you already have according to earlier post.  Add then add the following for the header. 

<div class="navbar navbar-inverse navbar-fixed-top">

<div class="container">

<div class="navbar-header">

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">

<span class="icon-bar"></span>

<span class="icon-bar"></span>

<span class="icon-bar"></span>

</button>

<a class="navbar-brand" href="/hc/en-us"><b><i class="fa fa-moon-o"style="color:white"></i>MW-Midnight</b></a>

</div>

<div class="navbar-collapse collapse">

<ul class="nav navbar-nav navbar-right">

{{user_info}}

<!--<li><a href="work.html">Work</a></li>

<li><a href="about.html">About</a></li>

<li><a href="blog.html">Blog</a></li>

<li><a href="contact.html">Contact</a></li> -->

</ul>

</div>

</div><!--/.nav-collapse -->

</div>

Hi Wes,

Thanks for this guide!

We are just about to begin branding our Help Centre, and could really do with some support. I've been following your posts including this one and notice you seem to have some valuable knowledge that could really help us!

I am wondering how difficult it is, or if its worth, turning a ZenDesk custom design into a responsive design, or would it be better to design from scratch with responsive design in mind?

@Dale - you can take either route as if you already have a custom design the you can move that into Zendesk with a little work.  Either way I'll be glad to help you out if needed.  My skype id is: cibertecsolutions if you want to chat more about it.

Hi Wes,

Thank you for your reponse (on the other post too!). I really appreciate your assistance and will find you on Skype. Of course anything that I believe would help others, I'll post here instead.

@Wes, thanks very much for sharing the code. Unfortunately, it doesn't seem to work for me on small screens. To check if it was something in my css that may be conflicting I also tried it with your whole 'Midnight' theme. In both cases the user-info drop down doesn't fully extend on small screens.

I've found a solution though. I changed the position attribute for my menu items to "relative" and then used a media query to change position back to "absolute" on screen sizes greater than 768px.

Also, found an answer to my previous problem relating to media queries -- definitely make sure you put your code at the bottom of the CSS file! 

Thanks again for your help!

@Anya - Thanks for the code and yes its very hard to get the Zendesk code like {{user_info}} to be fully responsive.  I'm glad you found a solution and hopefully your post will help others who may run into the same issue.

HI Wes!

I really liked the look of how your site was laid out so I also copied your code as you have instructed and made some minor tweaks to meet our needs but I am not a developer or web designer whatsoever and I am having some issues at this point that I am hoping I could get some help with:

1) If I want to create Article under our different "categories" how do I place them into those specific locations? My options are "General, Category 1 or Category 2".

2) We currently have a bunch of customer Feature Requests on our Web Portal and I need to link this Web portal to our Help Center but I am not sure how I go about doing this. I need people to be able to both access the portal and be able to submit new requests.

3) I have added the ability from our Trouble Tickets to Post the Article to the Help Center but I am not sure where it is going?

Thank you for all of your help and if it is easier to speak on the phone, please let me know.

@Kristi - Are you using one of my pre-built themes or just making your site look like the images above?

1.  You will need to create categories for each box that you have.  Then you will link directly to that category via the HTML.

2.  Need more details or a link to your Help Center as I'm not following what you are trying to do.

3.  The links in tickets will point directly to the articles.

Do you have your Help Center active at this point?

@wes

Yes, I am using your pre-built template above.

1) I created the categories but how do I go about getting the link for each Category to be able to enter them into the HTML?

2) and 3) I have not activated the help site since it is no where close to being ready for our customers to see. If I activate it for you to look at it, can I then inactivate it or do you have a way to see it on the back end to troubleshoot?

Thank you!

@Kristi - Once you create the categories then you can add the {{category_tree}} placeholder on your homepage which will show the categories. You can right click on it then copy and paste the URL to your HTML. Once you get them all done then just remove the {{category_tree}} placeholder.

No once you activate then it comes available to your end users so don't activate your Help Center if your not ready. Did you also look at my full themes that I have. With my full themes you can just copy and paste all the code.

You can find them all from here: https://support.zendesk.com/hc/communities/public/posts/203459556-Help-Center-Custom-Responsive-Theme-1

@Wes

I'm sorry if I am dense because I have never done this before but even though I have created my Categories, when I click on the Category Page, you can see what I am still seeing which is the General Category that was here by default. therefore, I do not know how to access the HTML for my Categories.

Is there any way for us to do an online screen sharing?

@Wes

Also can you help me figure out how to make this main Search box smaller? We added our Logo which I know made it larger but I
was hoping to just shrink everything so that it wasn't so overbearing. Thanks again!

I will turn on my Skype app - username cibertecsolutions

@wes Your themes are awesome - I was wondering, do you create for companies?