Help Center Custom Responsive Theme #1

148 Comments

  • Wes Drury
    Comment actions Permalink

    @Aaron - The slider is coming from the Bootstrap framework.  The CSS and JS that is used is from Bootstrap.  What are you trying to change as you will need to override the style.

    0
  • Ben Newman
    Comment actions Permalink

    @Wes,

    I am having issues getting the follow buttons on sections and articles to work. If I view an article I have posted it gives me the unfollow button, but clicking it does nothing, and that article does not show up in Following under My Activities.

    Also clicking on Follow does nothing. Am I missing something?

    srsupport.accelitec.com

    0
  • Wes Drury
    Comment actions Permalink

    @Ben - I'll take a look at this over the weekend.  It could be that Zendesk updated some code as this theme was produced very early on when Help Center initially came out.  I will probably have to create an account on your Help Center so that I can see the follow button.  Please approve the account when it comes through.

    0
  • Wes Drury
    Comment actions Permalink

    @Ben - I tested this on the Zentastic theme and it worked as it should.  I was able to Follow an article and section without any issues.  Seems like you may have an issue somewhere. I've signed up for an account on your Help Center 

    0
  • Ben Newman
    Comment actions Permalink

    I can see your subscriptions, but have tried different users and different browsers and nothing seems to work. When I hover over the button there is not even a displayed URL at the bottom of the page similar to what I can see on my other themes.

     

    edit: it was not working, even had another person attempt it. Posted, then it started working.....gremlins 

    0
  • Ben Newman
    Comment actions Permalink

    @Wes,
    Have you seen any issues with the changes made to objects. My source code has been updated with new case statements and now most of my site does not render correctly.

    0
  • Wes Drury
    Comment actions Permalink

    @Ben - The handlebar changes have not affected my test site.  We were given early access to make sure all of scripts would still work and I didn't notice anything wrong with my Zentastic theme.  I have it live right now if you want to take a look and compare your site with mine.  

    http://moderatorwes.zendesk.com

    If you post your URL and tell me where you are seeing an issue, I'll be glad to take a look.

    0
  • Ben Newman
    Comment actions Permalink

    @Wes - I did go to your site and say it was working, so I went back to what the original theme code was, and compared, and I only made minor changes for the most part. I even tried reverting those back and things still are not working

    https://srsupport.accelitec.com

    On the main page promoted articles are not being displayed. And on every other page it is almost like it is ignoring where the top of the page is, and shifting everything up out of the frame

     

    0
  • Wes Drury
    Comment actions Permalink

    Here is what my Home Page looks like converted:

    <section class="clearfix">
    <div class="knowledge-base">
    <h1>{{help_center.name}}</h1>
    <ul class="category-list">
    {{#each categories}}
    <li><a href="{{url}}">{{name}}</a></li>
    {{/each}}

    {{pagination}}
    </ul>
    {{#if promoted_articles}}
    <section class="promoted-articles">
    <h3>{{t 'promoted_articles'}}</h3>
    <ul>
    {{#each promoted_articles}}
    <li>
    <a href="{{url}}">{{title}}</a>
    </li>
    {{/each}}
    </ul>
    </section>
    {{/if}}

    </div>
    <div class="community">
    {{#if help_center.community_enabled}}
    <h4>
    {{t 'community'}}
    {{#link 'community'}}
    {{t 'browse'}}
    {{/link}}
    </h4>
    {{/if}}
    {{recent_activity scope='community'}}
    </div>
    </section>

    0
  • Ben Newman
    Comment actions Permalink

    That is nothing what my code looks like, some of it I've commented out (like the carousel) This is what it looks like before I have tried to make any changes to get it fixed

    <div id="headerwrap">
            <div class="container">
                <div class="row mt">
                    <div class="col-sm-6" align="middle">
                        <h1><i class="fa fa-heart fa-2x"></i>Shopper Radar Support</h1>
    {{#if promoted_articles}}
      <section class="promoted-articles">
        <h3>{{t 'promoted_articles'}}</h3>
        <ul>
          {{#each promoted_articles}}
            <li>
              <a href="{{url}}">{{title}}</a>
            </li>
          {{/each}}
        </ul>
      </section>
    {{/if}}
                    </div><!-- /col-lg-6 -->

                    <div class="col-sm-6" align="middle"><img alt="" class="img-responsive" src="https://p6.zdassets.com/hc/theme_assets/796266/200145187/phone.png" ></img></div><!-- /col-lg-6 -->
                </div><!-- /row -->
            </div><!-- /container -->
        </div><!-- /headerwrap -->

        <div class="container">
            <div class="row mt centered">
                <div class="col-lg-6 col-lg-offset-3">
                 <!--   <h1>Why our Clients like us</h1> -->
                </div>
            </div><!-- /row -->

            <div class="row mt centered">
                <div class="col-lg-6 col-lg-offset-3">
                    <div class="carousel slide" data-ride="carousel" id=
                    "carousel-example-generic">
                        <!-- Indicators -->

                        <ol class="carousel-indicators"></ol>
                        <!-- Wrapper for slides -->

                        <div class="carousel-inner">
    <!--                      
                          <div class="item active"> <blockquote><p>Awesome customer support.</p><small>Somebody<cite title="Source Title">@ Imagination</cite></small><br></blockquote></div>

                            <div class="item">
                                <blockquote>
                                    <p>Super fast customer support. My issue was resolved within 30 minutes.</p><small>Don Zwade<cite title="Source Title">@ Accelitec</cite></small><br></blockquote></div>

                            <div class="item"> <blockquote><p>Awesome software and first class customer support.</p><small>Random Customer <cite title="Source Title">@ Over the Ranbow</cite></small><br>
                                </blockquote>
                            </div>
                              -->
                        </div>
                    </div>
                </div><!-- /col-lg-8 -->
            </div><!-- /row -->
            <!--</div><! --/container -->
                      
    {{search}}
            <div class="panel-group" id="accordion" >
                <div class="panel panel-default accordian-group">

                    {{#if categories}}
                      <div class="category-tree">
                        {{#each categories}}
                          <section class="category">
                            {{#if ../has_multiple_categories}}
                              <h2><a href="{{url}}">{{name}}</a></h2>
                            {{/if}}
                            {{#each sections}}
                              <section class="section">
                                <h3>
                                  {{#if internal}}
                                    <span class="visibility-internal" data-title="{{t 'internal'}}">
                                      <span class="visibility-internal-icon"></span>
                                    </span>
                                  {{/if}}
                                  <a href="{{url}}">{{name}}</a>
                                </h3>
                                {{#if articles}}
                                  <ul class="article-list">
                                    {{#each articles}}
                                      <li {{#if promoted}} class="article-promoted" {{/if}}>
                                        {{#if promoted}}
                                          <span data-title="{{t 'promoted'}}">★</span>
                                        {{/if}}
                                        <a href="{{url}}">{{title}}</a>
                                      </li>
                                    {{/each}}
                                  </ul>
                                  {{#if more_articles}}
                                    <a href="{{url}}" class="see-all-articles">
                                      {{t 'show_all_articles' count=article_count}}
                                    </a>
                                  {{/if}}
                                {{else}}
                                  <i class="section-empty">
                                    <a href="{{url}}">{{t 'empty'}}</a>
                                  </i>
                                {{/if}}
                              </section>
                            {{else}}
                              <i class="category-empty">
                                <a href="{{url}}">{{t 'empty'}}</a>
                              </i>
                            {{/each}}

                            {{#if more_sections}}
                              <div>
                                <a href="{{url}}">{{t 'see_all_sections'}}</a>
                              </div>
                            {{/if}}
                          </section>
                        {{/each}}

                        {{pagination}}
                      </div>
                    {{/if}}
                </div>
            </div>
        </div><!-- /row -->
        <!-- /container -->

        <div class="" id="dg">
            <div class="container">
                <div class="row mt">
                    <div class="col-lg-8 col-lg-offset-2" align="left">
     <!--{{#if help_center.community_enabled}}
       <h4>
         {{t 'community'}}
         {{#link 'community'}}
           {{t 'browse'}}
         {{/link}}
       </h4>
     {{/if}}
        {{recent_activity scope='community'}}
    -->
                    </div>
                </div><!-- row -->
            </div><!-- container -->
        </div>

    0
  • Wes Drury
    Comment actions Permalink

    Yep your right sorry about that wrong theme.  This look better.

    <div id="headerwrap">
    <div class="container">
    <div class="row">
    <div class="col-lg-6">
    <h1><i class="fa fa-heart fa-2x"></i>Your Zendesk<br>
    Make it Responsive.</h1>

    <div id="promoted" style="display: none;">
    {{dc 'promotedarticles'}}
    </div>{{#if promoted_articles}}
    <section class="promoted-articles">
    <h3>{{t 'promoted_articles'}}</h3>
    <ul>
    {{#each promoted_articles}}
    <li>
    <a href="{{url}}">{{title}}</a>
    </li>
    {{/each}}
    </ul>
    </section>
    {{/if}}
    </div><!-- /col-lg-6 -->

    <div class="col-lg-6"><img alt="" class="img-responsive" src=
    "https://p1.zdassets.com/hc/theme_assets/426700/200017498/ipad-hand.png"></div><!-- /col-lg-6 -->
    </div><!-- /row -->
    </div><!-- /container -->
    </div><!-- /headerwrap -->

    <div class="container">
    <div class="row mt centered">
    <div class="col-lg-6 col-lg-offset-3">
    <h1>Why our Clients like us</h1>
    </div>
    </div><!-- /row -->

    <div class="row mt centered">
    <div class="col-lg-6 col-lg-offset-3">
    <div class="carousel slide" data-ride="carousel" id=
    "carousel-example-generic">
    <!-- Indicators -->

    <ol class="carousel-indicators"></ol>
    <!-- Wrapper for slides -->

    <div class="carousel-inner">
    <div class="item active">
    <blockquote>
    <p>Awesome customer support.</p><small>Marissa
    Mayer <cite title="Source Title">@
    Yahoo</cite></small><br>
    </blockquote>
    </div>

    <div class="item">
    <blockquote>
    <p>Super fast customer support. My issue was
    resolved within 30 minutes.</p><small>Jeff
    Bezos <cite title="Source Title">@
    Amazon</cite></small><br>
    </blockquote>
    </div>

    <div class="item">
    <blockquote>
    <p>Awesome software and first class customer
    support.</p><small>Mikkel Svane <cite title=
    "Source Title">@ Zendesk</cite></small><br>
    </blockquote>
    </div>
    </div>
    </div>
    </div><!-- /col-lg-8 -->
    </div><!-- /row -->
    <!--</div><! --/container -->
    {{search}}
    <div class="panel-group" id="accordion">
    <div class="panel panel-default accordian-group">
    {{#if categories}}
    <div class="category-tree">
    {{#each categories}}
    <section class="category">
    {{#if ../has_multiple_categories}}
    <h2><a href="{{url}}">{{name}}</a></h2>
    {{/if}}
    {{#each sections}}
    <section class="section">
    <h3>
    {{#if internal}}
    <span class="visibility-internal" data-title="{{t 'internal'}}">
    <span class="visibility-internal-icon"></span>
    </span>
    {{/if}}
    <a href="{{url}}">{{name}}</a>
    </h3>
    {{#if articles}}
    <ul class="article-list">
    {{#each articles}}
    <li {{#if promoted}} class="article-promoted" {{/if}}>
    {{#if promoted}}
    <span data-title="{{t 'promoted'}}">★</span>
    {{/if}}
    <a href="{{url}}">{{title}}</a>
    </li>
    {{/each}}
    </ul>
    {{#if more_articles}}
    <a href="{{url}}" class="see-all-articles">
    {{t 'show_all_articles' count=article_count}}
    </a>
    {{/if}}
    {{else}}
    <i class="section-empty">
    <a href="{{url}}">{{t 'empty'}}</a>
    </i>
    {{/if}}
    </section>
    {{else}}
    <i class="category-empty">
    <a href="{{url}}">{{t 'empty'}}</a>
    </i>
    {{/each}}

    {{#if more_sections}}
    <div>
    <a href="{{url}}">{{t 'see_all_sections'}}</a>
    </div>
    {{/if}}
    </section>
    {{/each}}

    {{pagination}}
    </div>
    {{/if}}
    </div>
    </div>
    </div><!-- /row -->
    <!-- /container -->

    <div class="" id="dg">
    <div class="container">
    <div class="row centered">
    <div class="col-lg-8 col-lg-offset-2">
    <h4 class="">ZENDESK BOOTSTRAP</h4>

    <p>What do you get when you combine Zendesk and
    Bootstrap?<br>
    A ****ing awesome Help Center!</p>
    </div>
    </div><!-- row -->
    </div><!-- container -->
    </div>

     

    0
  • Ben Newman
    Comment actions Permalink

    @Wes, I took that code and put it in exactly for my home page (aside from changing the image path to my image, and still have the same issue

    0
  • Ben Newman
    Comment actions Permalink

    @Wes, Finally found the changes in my header is what is causing the issue. Thanks for your help

    0
  • Wes Drury
    Comment actions Permalink

    @Ben - Great, glad you go it all figured out.

    0
  • Wes Drury
    Comment actions Permalink

    @Everyone - The theme has been updated to the new Curlybars framework for any new users, for users already using the theme the update should have converted everything for you.

    0
  • Gabriella
    Comment actions Permalink

    @Wes - The user-login/submit ticket section pops up for half a second then it disappears. It is happening with all browsers. Could you please point me the root of the problem? The page I'm trying to working on is: https://phenomsupport.zendesk.com -Thanks. 

    0
  • Wes Drury
    Comment actions Permalink

    @Gabriella - I am able to see your green Sign in button without any issue.  Is that what you are referring to or is it when the browser is a certain size.

    0
  • Nicolas P
    Comment actions Permalink

    Hi, I have not been able to replicate the responsive design on our HC.

    Most designs I have seen so far are based on the Category tree not the Section tree.

    We decided to display section so our customer can catch topics and FAQ at first sight. As we have a predicitive search, we don't need to display all articles.

    My previous attempts failed and led me to have a very small column with cutted words, a search bar that shrunk but pushed my logo under it (outside of the header). So in the end, I reverted to a non responsive site.

    I know we can use the Mobile design option from the HC but not all devices will load by default this design leading customer to have a plain page with tiny text on it.

    Do you think it is possible to adjust the page somehow?

     

    Other question : is it possible to somehow add the section tree on articles so customer can navigate from one to the other without going back to the home page?

    Thanks in advance for your enlightments

     

    0
  • Gabriella
    Comment actions Permalink

    @Wes - Thank you. I was able to comment out a part of the JS to make this work. 

    0
  • Wes Drury
    Comment actions Permalink

    @Gabriella - Glad to hear you got it all sorted out.  

    0
  • Gabriella
    Comment actions Permalink

    @Wes -- Could you please let me know how to make the 'search field' wider? Thank you. 

    0
  • Wes Drury
    Comment actions Permalink

    @Gabriella - Insert the following CSS in the CSS tab.

    input[type="search"] {
    width: 50%;
    }

    You can also add height to make it wider and width will make it longer.

    0
  • Gabriella
    Comment actions Permalink

    @Wes - this is great and thank you. it works.

    0
  • Wes Drury
    Comment actions Permalink

    @Gabriella - Glad I could help, best of luck.

    0
  • Gabriella
    Comment actions Permalink

    @Wes -- We allowed all users to submit a ticket. However, 'Submit new ticket' is not displaying in the dropdown or anywhere else. Could you please help? Thanks

    0
  • Wes Drury
    Comment actions Permalink

    Can you please provide a screenshot so I know exactly where you are talking about.  Are you talking about from a mobile point of view or a desktop point of view.  Thanks in advance.

    0
  • Gabriella
    Comment actions Permalink

    @Wes -- Thanks for the quick reply. I would like to have the "submit a ticket" in the green drop down if possible. For some reason the framed CSS part was commented out - I believe it was me - and that is why it didn't show earlier. Thank you for taking a look into it.



    0
  • Wes Drury
    Comment actions Permalink

    @Gabriella - You would have to use JQuery to do that.  The code would look something like this.  Add this code right after the $document.ready function

     $('a.submit-a-request').attr("role", "menuitem").prependTo('#user-menu').after('<span role="separator"></span>');

    0
  • Gabriella
    Comment actions Permalink

    @Wes -- Thank you. This worked too. 

    0
  • Gabriella
    Comment actions Permalink

    @Wes -- for some reason my category/section/article accordion is not collapsing or opening anymore. Do you know what could be the problem?

    Also, the 'submit a new ticket' (top right) displays in two lines. How can I make sure that this is displayed in one line?

    Thank you.

     

    0

Please sign in to leave a comment.

Powered by Zendesk