14 Commentaires

  • Nicole S. - Community Manager
    Zendesk Community Team

    Hi Mary, 

    Yes, you could add some kind of sidebar navigation by customizing your Guide theme. 

    0
  • Hi Mary,

    You can add sidebar navigation to your help center using our Zendesk extension:

     

    There is one more extension - Table of Contents:

     

    Alternatively, you can get Lotus One theme for Zendesk that includes side navigation and other additional features by default. 

    Mary, if you have any questions, contact us. We'll be happy to help.

    Best,

    Lotus Themes

     

     

    0
  • Mary Paez

    You showed me side bar navigation in the Guide theme.  I asked about sidebar navigation in an article.  Sometimes we create large articles that need navigation help b/c there are many sections.  We tried the bookmark approach but does not work very well. 

     

    We would like this type of navigation within an article: https://www.w3schools.com/howto/howto_css_fixed_sidebar.asp

     

    I've experimented by copying and pasting some of the HTML code from this site to use in the source code of the article and could not get anything to work.

    0
  • Nicole S. - Community Manager
    Zendesk Community Team

    Hi Mary -

    In order to implement a customization at the article level, you would still need to do this from within the Guide theme.

    0
  • Mary Paez

    Do you have an example of an article where it shows this type of navigation.  Would like to show our team and ask if we can do something similar.

     

    Also,  wanted to know if we add tables to articles and want all tables to follow a consistent color/border/background, is that possible also? and, How?  do you have an example?

     

    0
  • Nicole S. - Community Manager
    Zendesk Community Team

    Hi Mary,

    I don't have examples but hopefully some other users can chime in and share some with you!

    0
  • Coley Woyak

    Mary Paez did you ever find a solution to this? I am hoping to do the same thing.

    I had my html formatted for a table of contents that remains on the left of the screen as a user reads the document, but it did not render correctly on zendesk. I switched it back to a macro TOC (asciidoc) for the moment.

    Some of our documentation is very long (30+ page PDFs) and a side-nav feels indispensable. 

    0
  • Mary Paez

    No. I do not have a solution yet.

    0
  • Karen D Snyder
    Community Moderator

    We have a brand in our HelpDesk that shows a sidebar with the sections on article pages, as shown below. So it's not a full table of contents, but does provide navigation to sections.

    I can share the code, but I didn't write the code, and I don't know who wrote the code. You might be able to work with it to also list the articles under the sections.

    This is in script.js inside the document.ready function:

    // get id and template name
    var _location = window.location.href.split('/en-us/');
    console.log('window.location.href: ' + window.location.href + ', _location: ');
    console.log(_location);
    if (_location.length > 1) {
    var _split = _location[1].split('-')[0];
    var _templatename = _split.split('/')[0];
    var _templateid = _split.split('/')[1];
    }

    var categoriesList = function(_categories) {
    if(typeof HelpCenter.user.locale == 'undefined') {
    HelpCenter.user.locale = window.location.pathname.replace('/', '').replace('?','/').split('/')[1];
    }

    $.ajax({
    url: '/api/v2/help_center/'+HelpCenter.user.locale+'/categories.json',
    type: 'GET',
    dataType: 'json',
    success: _categories
    });
    };

    var _list = '';

    $(document).ajaxStart(function(){
    $('#loader').show();
    });
    $(document).ajaxStop(function(){
    $('#loader').hide();
    });

    categoriesList(function(data){
    $(data.categories).each(function (idx, itm) {
    if (itm.name !== 'General') {
    _list = _list + '<li><a href="' + itm.html_url + '" id="' + itm.id + '">' + itm.name + '</a></li>'
    }
    });
    $('.left-side-category-list').html(_list);
    $('.left-side-category-list a#' +_templateid).addClass('active');

    if(_templatename=='sections' || _templatename=='articles') {
    var categoryid = $('.breadcrumbs > li:nth-child(2) > a').attr('href').split('/categories/')[1].split('-')[0];
    $('.left-side-category-list a#' + categoryid).addClass('active');
    }

    });

    This is in article_page.hbs:

     <section class="wrapper-column">
      <div class="container">
        <div class="left-col">
          <!-- Page Left Sub Navigation Links -->
          <ul class="left-side-category-list article-list list-mains">
          </ul>
        </div>
      <div class="right-col">

       [article HTML]

      </div>
    </section>

    This is in style.css:

    .left-side-category-list li a.active {
    background-color: #e1253b;
    }

    .wrapper-column .left-col > ul > li > a:hover,
    .left-side-category-list li a.active {
    background-color: #e1253b;
    }

    .wrapper-column .left-col {
    float: left;
    padding-right: 15px;
    width: 33.667%;
    }

    .wrapper-column .right-col {
    float: left;
    padding-left: 15px;
    padding-right: 15px;
    width: 66.333%;
    }

    .wrapper-column .left-col > ul > li {
    background-color: #f0f0f0;
    margin-bottom: 3px;
    }

    .wrapper-column .left-col > ul > li > a {
    color: #2d2d2d;
    display: block;
    font-size: 1.2em;
    font-weight: 400;
    padding: 10px 35px;
    text-transform: uppercase;
    width: 100%;
    }

    .wrapper-column .left-col > ul > li.active a
    {
    background-color:#e1253b;
    color:#fff;
    }

    .wrapper-column .left-col > ul > li > a:hover, .left-side-category-list li a.active {
    color:#fff;
    }

    Hope this helps.

     

     

     

    0
  • Lisa Sedlak

    Thanks! I will try to play with this code next week. 

    0
  • Sabrina Kwok

    Hello Lisa - how did it go? Any progress?

    0
  • Lisa Sedlak

    I didn't get a chance to check it as I have moved on to a different project. Thank you for your help though! 

    0
  • Glenn Eccard

    Hello, All

    I was curious as to how the code snippets provided above for side navigation could be added to an existing theme? Any assistance would be great. 

     

    0
  • Nicole S. - Community Manager
    Zendesk Community Team

    Hi Glenn -

    Karen's post above (https://support.zendesk.com/hc/en-us/community/posts/360004420687/comments/360011079073) includes all of the code and the places to insert it.

    Here are a couple of articles that might help you out:

    Editing your Help Center theme

    Using themes and customizing your Help Center

    Customizing your Help Center theme

    Note that theme edits are not available to those on a Lite plan. If you aren't on Ppro or Enterprise, you'll need to upgrade in order to make changes.

    0

Vous devez vous connecter pour laisser un commentaire.

Réalisé par Zendesk