Help Center Responsive Design

71 Comments

  • Steve Blentlinger
    Comment actions Permalink

    What theme is this that you show in the screen shots?  I absolutely love this one!   

    0
  • Wes Drury
    Comment actions Permalink

    @Steve - The theme in the screenshots is my own custom theme using the Bootstrap framework.  Using the instructions above and the code that was posted you can easily re-create the exact same look.  Let me know when you get to that point and I will send you some updated HTML code.  First thing is to implement the Bootstrap framework into your Zendesk site from the instructions above.  I will be glad to help you along the way.  I think I started with the default Humble Squid theme but there's not much left of it with all the customization.

    0
  • Steve Blentlinger
    Comment actions Permalink

    @Wes.  Great.  Thank you.  You can email me directly at steve@paylinedata.com if you would like.  What is your live support site?  I would like to show this to our team to get them started on it.  I greatly appreciate your willingness to work with us to help too! 

    0
  • Wes Drury
    Comment actions Permalink

    @Steve - Our live site is locked down as our Help Center is internal only for us but I will be glad to provide you with some screenshots.  I know it has changed since I originally posted this article.  The good thing is the look you are wanting is already posted in the article above.  Would you like for me to send some screenshots over to you.

    0
  • Wes Drury
    Comment actions Permalink

    @Steve - I forgot that I have some of the code posted to my test account.  You can see the Home Page here however in my test account I have not moved everything over so only the Main Page is working.  This will at least give your team something to look at.

    https://moderatorwes.zendesk.com/hc/en-us

    0
  • Jamie Collingwood
    Comment actions Permalink

    I am unable to get this to work.  I added the calls to my bootstrap and override css in the head as suggested but the page will not take the styles.  I did a view source and checked the links to the boostrap.css and .js that resides on my page and it does indeed find the style sheet and JS so I know its not link related.  

     

    I am resigned to copying the entire BS css into the page css which I do not want to do.

    0
  • Wes Drury
    Comment actions Permalink

    @Jamie - I'm be glad to help you out as much as I can.  Since you know your linking to the css and js file what code are you trying to add.  There is no need to copy the entire CSS file as you should have it linked.  You may need to override some of the Zendesk CSS but I only had to override a few things.  Is there anyway you can post the link to your site so I can take a look at it.  Below is my test site where I've playing around with a few things but as you can see its using Bootstrap and is responsive.

    https://moderatorwes.zendesk.com

    0
  • Jamie Collingwood
    Comment actions Permalink

    @Wes, thanks for the quick response.  Here is a link:   https://jonasfitness.zendesk.com/hc/en-us   As you can see in the head the bootstrap is linked along with a flat-ui override.  At the bottom of the page I have a simple test with a container, row and col-md-4 but its not working when the page is rendered. 

    0
  • Jamie Collingwood
    Comment actions Permalink

    *If this double posts my apoloty*     Here is a link:  https://jonasfitness.zendesk.com/hc/en-us    If you view source, you can see the boostrap links in the head and clicking on them to confirm they are working.  Towards the bottom of the page I have a simple container > row > col-md-4 test with 3 columns.  They are not working.

    0
  • Wes Drury
    Comment actions Permalink

    @Jamie- just for testing take your lines on your bootstrap css and javascript out and add the following lines instead.

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

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

    It may have an issue getting those from your external site.  Add the above line in and let me know how it looks.

    0
  • Jamie Collingwood
    Comment actions Permalink

    That did the trick...  Strange that it would not take the bootstrap from my domain.   Thanks Wes, much appreciated!

    0
  • Jamie Collingwood
    Comment actions Permalink

    Getting a strange drop down (double bubble) effect on the zendesk drop down control though.  I cant seem to garner any info from chrome dev tools on whats causing it but some kind of interaction between zendesk and bootstrap css.  Any ideas? 

    0
  • Jamie Collingwood
    Comment actions Permalink

    Here is the code I am using:  

    <div class="navWrap" <nav class="user-nav">
    {{user_info}}
    {{submit_a_request}}
    {{my_activities}}
    {{language_selector}}
    </nav>
    </div>

    0
  • Wes Drury
    Comment actions Permalink

    @Jamie - You will have to change some of the Zendesk CSS as its interfering with the Bootstrap CSS.  I believe I moved all the info from the dropdown into my own bootstrap dropdown.  I did that via JQuery but if that is something you want to do just let me know and I will send you my code otherwise you will need to make some changes to the Zendesk CSS.  In order for the site to be repsonsive you will need to remove some of the fixed widths in Zendesk's CSS.  Hope this helps.  In the Zendesk CSS below you will need to comment out the width: 980px line

     

    main {
    .make-row();
    /*display: block;
    margin: 25px auto 0;
    padding: 0 20px;
    width: 980px;*/
    }

    0
  • Jamie Collingwood
    Comment actions Permalink

    Wes, I am happy to report that the responsiveness is working great.  Its just that drop down.. I will take a look into the zendesk drop down css.. im sure that is what it is.  Thanks again for all the help!

    0
  • Jamie Collingwood
    Comment actions Permalink

    Wes, how do you go about making zendesk components responsive though?  For example:

    <div class="container">
    <div class="row">
    <div class="col-md-12">
    <h1>{{title}}</h1>
    <p>{{description}}</p>
    </div>
    </div>
    <div class="row featureOffWhite">
    <div class="col-md-12">
    {{section_tree}}
    </div>
    </div>
    </div>

     

    Section tree seems to have its own code that generates lists next to each other.  I can't think of a way to put them in their own span columns.

    0
  • Wes Drury
    Comment actions Permalink

    Jamie - There are some Zendesk components that you will not be able to make responsive and if you just have to wrap them like you did.  But you can do some via JQuery.  Below is an example of how I moved the User info into a Bootstrap dropdown and removed the class from Zendesk's button.  This may or may not help but you can give it a try.

    // move user info dropdown into ticket actions
    $('#user-menu > li').appendTo('.ticket-menu');
    $('#user > div').removeClass('dropdown-toggle');

    0
  • Jamie Collingwood
    Comment actions Permalink

    Got it.. thanks Wes.  If you have a minute I would like the to see that jquery you used for your drop downs.  That would help me out a lot.  Thanks!

    0
  • Wes Drury
    Comment actions Permalink

    The Jquery that I used is in my above post.  

    // move user info dropdown into ticket actions
    $('#user-menu > li').appendTo('.ticket-menu');
    $('#user > div').removeClass('dropdown-toggle');

    Here is the Bootstrap HTML for my entire nav bar in case you need it.  It looks exactly like the images above in the main article.

    <div class="navbar navbar-default">
    <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"><i class="icon-plus-sign-alt"></i> Help Center</a>
    </div>
    <div class="navbar-collapse collapse">
    <ul class="nav navbar-nav navbar-right">
    <li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Ticket Action <b class="caret"></b></a>
    <ul class="dropdown-menu ticket-menu">

    <li class="dropdown-header">Ticket Info</li>
    <li><a href="/hc/en-us/requests/new">Submit Ticket</a></li>
    <li class="divider"></li>
    <li class="dropdown-header">User Info</li>
    </ul>
    </li>
    <form class="navbar-form navbar-left">
    <div class="form-group">
    {{user_info}}
    </div>

    </form>
    </ul>

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

    0
  • Vincent Arnoux
    Comment actions Permalink

    @Wes: it seems Boostrap overrides the default Zendesk dropdown-menu, breaking the display. Would you have a way to force the Zendesk dropdown-menu to be applied in my header?

    0
  • Wes Drury
    Comment actions Permalink

    @Vincent - Both bootstrap and Zendesk use the same names for some of their classes.  I have to deal with this every time I create a theme.  I'll see if I can track down the code for you.

    0
  • Wes Drury
    Comment actions Permalink

    @Vincent - Add the following code to the CSS and let me know if this helps.

    /*Remove styling issue with Zendesk and Bootstrap*/
    #user-menu{
    position: inherit !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 1000 !important;
    float: left !important;
    min-width: 100% !important;
    padding:0 !important;
    margin: 0 !important;
    font-size: 14px !important;
    list-style: none !important;
    background-color: #FFF !important;
    border: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    background-clip: padding-box !important;
    }

    0
  • Vincent Arnoux
    Comment actions Permalink

    @Wes

    It works great, thank you for your help (once more)!

    0
  • Wes Drury
    Comment actions Permalink

    Not a problem Vincent - Glad I could help.

    0
  • JJ Richards
    Comment actions Permalink

    How do image icons work? And can we get access to basic ones like you show in your example and that are on the Zendesk site?

    0
  • Wes Drury
    Comment actions Permalink

    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.

    0
  • Anya Shyrokova
    Comment actions Permalink

    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!

    0
  • Wes Drury
    Comment actions Permalink

    @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

    0
  • Anya
    Comment actions Permalink

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

    0
  • Wes Drury
    Comment actions Permalink

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

    0

Please sign in to leave a comment.

Powered by Zendesk