Help Center Responsive Design

71 Comments

  • James Bent
    Comment actions Permalink

    @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?

    0
  • Wes Drury
    Comment actions Permalink

    @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.

    0
  • Wes Drury
    Comment actions Permalink

    @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.

    0
  • Anya
    Comment actions Permalink

    That worked! Thanks Wes. 

    0
  • Wes Drury
    Comment actions Permalink

    @Anya - Awesome glad to hear.  Goodluck.

    0
  • Anya
    Comment actions Permalink

    @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.

    0
  • Wes Drury
    Comment actions Permalink

    @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>

    0
  • Dale Owen
    Comment actions Permalink

    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?

    0
  • Wes Drury
    Comment actions Permalink

    @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.

    0
  • Dale Owen
    Comment actions Permalink

    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.

    0
  • Anya
    Comment actions Permalink

    @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!

    0
  • Wes Drury
    Comment actions Permalink

    @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.

    0
  • Kristi
    Comment actions Permalink

    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.

    0
  • Wes Drury
    Comment actions Permalink

    @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?

    0
  • Kristi
    Comment actions Permalink

    @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!

    0
  • Wes Drury
    Comment actions Permalink

    @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

    0
  • Kristi
    Comment actions Permalink

    @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?

    0
  • Kristi
    Comment actions Permalink

    @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!

    0
  • Wes Drury
    Comment actions Permalink

    I will turn on my Skype app - username cibertecsolutions

    0
  • Caroline Mitchell
    Comment actions Permalink

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

     

    0
  • Wes Drury
    Comment actions Permalink

    @Caroline - Sure do, just finished one last week.  If you would like to discuss further you can email me at  support@wesdrury.zendesk.com

    Looking forward to chatting with you!

    0
  • Ayesha Zafar
    Comment actions Permalink

    @Wes for the header is this accurate:

    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
    <script crc="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

     

    (it seems like that's what you updated it to in the other responsive site)

     

    My second question is, is there a way to make the site responsive and keep my images in humble squid? I was going to use the 3 column main page, but if I do, I'm not sure how to link it back to the images. Here is a link to our help center: https://tenantturner.zendesk.com/hc/en-us

    0
  • Wes Drury
    Comment actions Permalink

    @Ayesha - Yes those versions are correct.  Yes you can use the same images that you have in any theme.  I also have some free themes that are already responsive and all you would need to do is put your images into them and change the color scheme.

    You can find them on my github page.

    https://github.com/moderatorwes

    I'm also available if you would like a complete custom Help Center.  I just finished a custom Help Center for Caroline above.   If you would like more info and a quote just email me at  support@wesdrury.zendesk.com

    0
  • Ian Maison
    Comment actions Permalink

    Hi Wes,

    Sorry to bring up an old topic, but I wanted to pick your brain on something relating to bootstrap / help center themes and I'm hoping you can answer.

    Is it possible in anyway to have:

    • a) Videos shown in Sections. (and if so..)
    • b) Different videos shown depending on the section you are in?

    Thank you Wes if you take the time to read and respond.

    0
  • Wes Drury
    Comment actions Permalink

    Hi Ian,

    Shouldn't be a problem to have different videos depending on the section that you are on.  It wouldn't have anything to do with Bootstrap as you will need to use JQuery for that.  I've done different banners based on the page you are on so video should be very similar.  If you would like I can paste the code I used.

    0
  • Ian Maison
    Comment actions Permalink

    Firstly thanks for even responding.

    Yes, that would be great if you could and much appreciated.

    0
  • Wes Drury
    Comment actions Permalink

    @Ian

    Your JS code would look something like this.  This code is swapping header images so videos would be different but very similar.

    if (window.location.href == "https://yoursubdomian.zendesk.com/hc/en-us/community/topics/200257626-Feature-Requests") {

    $('.search-area-wrapper.community-img').css("background-image", "url(//p4.zdassets.com/hc/theme_assets/426700/200063836/feature_requests_banner.jpg)");

    }

    0
  • Ian Maison
    Comment actions Permalink

    Thank you, you are a good man for sharing that.

    I've given that a try with the obvious URL amendment but nothing happens. I get the grasp of the css etc, but can't get any change to happen.

    For example, if I wanted to make the ".logo img" change due to being on the https://yoursubdomian.zendesk.com/hc/en-us/community/topics/200257626-Feature-Requests page (with my own URL), would the code not be:

    if (window.location.href == "https://yoursubdomian.zendesk.com/hc/en-us/community/topics/200257626-Feature-Requests") {

    $('.logo img').css("background", "url(//p4.zdassets.com/hc/theme_assets/426700/200063836/feature_requests_banner.jpg)");

    }

     

    0
  • Wes Drury
    Comment actions Permalink

    @Ian - That looks correct but it all depends on the class name if you are calling it correctly.  Also make sure the code goes under the $(document.ready) function

    0
  • Ian Maison
    Comment actions Permalink

    Yes, got it. I totally understand how it should work but its not. At the moment I'm trying to change an image on the page, but it just stays the same.

    0

Please sign in to leave a comment.

Powered by Zendesk