Customizing your help center theme

Return to top
Have more questions? Submit a request

154 Comments

  • Brett Bowser
    Zendesk Community Team

    Hey Hedda,

    Are you looking to limit the number of Sections that can be added to a Category or the number of Sections that are displayed under each Category?

    I'm afraid there wouldn't be a way to limit how many sections can be added to a Category but you should be able to limit the number of sections displayed with some custom code in your Guide theme.

    I encourage you to take a look at the following documentation regarding Help Center customization: 

    Hope this helps get you started :) 

     

    0
  • Camila Ribeiro Leao Santos

    Qual é a previsão para liberar a configuração da API?

    0
  • Suman Saha

    Hi Charles,

     

    Can you point me to an article which describes how to add an image to the copenhegan theme..

    I tried the following but is not able to follow this properly

    https://support.zendesk.com/hc/en-us/articles/223150367-How-to-localize-the-banner-image-in-Copenhagen-Help-Center-theme

     

    Thanks

    Suman Saha

    0
  • Brett Bowser
    Zendesk Community Team

    Hey Suman,

    Have you had a chance to look at this article? Branding your Help Center

    This will walk you through the appropriate steps for updating your images in the Help Center.

    Hope this helps!

    0
  • Mike Tamosaitis

    Is there a way to add an image to the help text for a field in the submit a request page? 

    1
  • Simon Celen

    Hi Mike,

    It's not possible to add an image to the help text as HTML is filtered out automatically. With some theme customization you could get it to work though.

    1. Add the link to the image on your ticket field:
    2. Add the following Javascript in bold to your scripts.js file:
      $(document).ready(function() {

      // CUSTOM: allow images in form field descriptions
      $('div.form-field p a').each(function() {
      var url = $(this).text();
      if (url.match(/.(jpg|png)$/g)) { // only images
      $(this).after('<img src="' + url + '" alt="">').remove();
      }
      });


      // social share popups

     

    Alternatively you can add an image above or below the form by editing the new_request_page.hbs file in your theme.

     

    Best,

    Simon

    1
  • Mike Tamosaitis

    Simon, 

    That is what I was looking for thanks for the help. 

    Mike 

    0
  • Ethan

    Hi Guys

    I have modified the codes on our Theme before using "Edit code", however, now I'm not able to modify the Document_head anymore! I will get the error message as "Failed to save theme". Other pages are ok.

    The problem exists even on themes which are not live.

    Any advice?

    0
  • Jason Fouchier

    Hey Ehsan, 

     

        I have the same issue on the requests list page, mine started yesterday around noon. I assumed I had made a mistake somewhere, but I was unable to figure out what I did as I could not save it no matter what I changed. I should note that it appears to be working again this morning.

     

    Thanks,

     

        Jason Fouchier

    0
  • Alexander Popa
    Zendesk team member

    Hi Ehsan and Jason!

    Thank you for reporting this - our teams have identified the root cause of this behaviour and they have addressed this from their side. You shouldn't run into this issue again.

    Apologies for any inconveniences and thank you once again for your patience.

    0
  • Ethan

    Hi Jason and Alexander

    Thank you for your replies. I just tried and It seems to be working for me as well.

    0
  • Vanessa Ripoll

    Hi, 

     

    this is to ask you something regarding the new_request_page.hbs template - thus the contact us form customization.

    How can we set mandatory fields and relative notification error messages to be shown in case user tries to submit the request without having filled all the mandatory fields? Also where to check the code preventing user to send the request? Currently we are facing cases where users are able to submit a request even without having filled every mandatory field.

    I can not find the relative piece of code - nor in new_request_page.hbs and script.js, could you please give me any suggestion?

     

    Many thanks and regards

    0
  • Dan Ross
    Community Moderator

    Hey Vanessa,

    This isn't handled in the Help Centre, this is handled in the Support admin settings for Ticket Fields. Each ticket will have an attribute that can be checked making it required to submit the request. If a user tries to submit a ticket without this field, the form will reject and highlight the field that needs filling. 

    Setting found here:


    Sample setting:

     

    Error message on submission when not completed.

     Hope that helps!

    0
  • Samir Sarkar

    I have done same changes in requests_page.hbs and preview the functionality, It was working as expected, after that I published the code .but the change is not working when I am accessing the guide as a end user.
    Could you please suggest is there any way to save the code explisidly .

    Thanks
    Samir

    0
  • Pulkit Pandey
    Community Moderator

    Hey Samir Sarkar

    Can You please share the code or screenshot of the changes you have made on requests_page.hbs file.

    Regards 

    Pulkit

    0
  • Samir Sarkar

    Hi Pulkit,

    Thanks for checking on it , I have written a piece of code in where only "Platinum" organization's user will be able to see a particular form in guide.

    Sorry it's my bad , I wrote the code on script.js instead of request_page.hbs

    //Hide ticket form
    $(window).load(function() {
    var i = 0;
    var checkExist = setInterval(function() {
    i++;
    if ($("a.nesty-input").length){
    clearInterval(checkExist);
    $("a.nesty-input").each(function() {
    $(this).bind( "click", function() {
    for (var c in HelpCenter.user.organizations) {
    if (HelpCenter.user.organizations[c].name !== "Platinum"){
    $("#360002268853").remove();
    }

    //reserve space for additional organizations
    }

    });
    });
    }
    if (i > 10){
    clearInterval(checkExist);
    }
    }, 100);
    });

     

    Please find the attachment

    0
  • Aishah Hamzah

    Hi there,

    I'd like to be able to make the category buttons on my home page stand out more. Instead of turning into a block colour when I scroll over, I'd like them to be a block colour from the start.

    Does anyone know how I can do this?

    Cheers,

    Aishah

    0
  • Dan Ross
    Community Moderator

    Hey Aishah Hamzah

    Do you have a link to your help centre that's publicly accessible? It would make providing a solution much simpler.  If not, do you have a snippet of code you can post that shows your category buttons

    Thanks!

    0
  • Aishah Hamzah

    Hi Dan Ross,

    Thanks for your comment!

    Our Help Center isn't publicly accessible yet and I'm out of my depth in terms of code! So here's a screenshot. 

    We think the standard Copenhagen theme leaves the buttons a little hard to see - as you can see with the "Category 1" button. You can't see this but in the screenshot I have my cursor over the "Category 2" button.

    Is there a way to make the buttons orange without having to hover over them?

    I hope that makes sense! Cheers.

    0
  • Dan Ross
    Community Moderator

    Thanks Aishah Hamzah, that helps. I'd suggest you make a copy of your theme before trying this until you're satisfied with the results.

    In your theme code, go to the style.css file and find the .blocks-item class. In the list of parameters, you may see one called 'color:$brand_color;'

    Replace that with 'background-color:orange;' Note that you can use hex values, or CSS colors here 
    After you're done, it might look like this:

     .blocks-item {
    border: 1px solid $brand_color;
    border-radius: 4px;
    box-sizing: border-box;
    background-color: orange;
    display: flex;
    flex: 1 0 340px;
    margin: 0 0 30px;
    max-width: 100%;
    text-align: center;
    }

    If you want to change the colour that's displayed when you mouse over each button, lookup the 

    .blocks-item:hover class. It might also have  .blocks-item:focus, .blocks-item:active 

    on the same line. Change the background-color attribute to another colour of your choosing.

     

    Hopefully that helps point you in the right direction! Good luck!

    0
  • Aishah Hamzah

    Thanks Dan Ross, that worked a treat!

    0
  • Nicola Bachelor

    Hi, I am in the process of setting up a new guide page and I need to change the spacing on the homepage after the category buttons; there is a massive white space under these buttons and the footer. I've tried amending many of the margins/padding sections to no avail. Can someone point me in the right direction to change this spacing?

    0
  • Sumita Themes

    Hey Nicola Bachelor

    Can it's possible to share the URL of your HC where this thing is happening, So i will get the clue what is going on there and provide you a desired solution to your problem

    Thanks

    Jay

    0
  • Nicola Bachelor

    Hi Jay - I've not made it live yet so it has not been activated yet. Thanks Nicola

    0
  • Sumita Themes

    Hey Nicola Bachelor

    Can You please let me know are you using Copenhagen theme, can you please share me a screenshot of your problem.

    If you have no issue can you make it live for a few minutes so that I can go to the issue and provide you an exact answer ;)

    Thanks 

    Jay

    0
  • Nicola Bachelor

    Hi Jay, 

    Thanks for coming back to me. 

    It is the Copenhagen 2.2.4 version. 

    I've attached a screenshot of the page below - so it's the space under the category buttons (below FAQ) and above the black footer at the bottom.

    0
  • Sumita Themes

    Hey Nicola Bachelor

    Thanks for sharing screenshot, Do you have made any changes on the home_page.hbs template 

    I think you need something like that 

     

    Thanks 

    jay

    0
  • Nicola Bachelor

    Hi, 

    Yes - that looks right. I have made 1 amendment to the home_page.hbs to rename the Submit a request form. It was mainly css code that I have amended. 

    0
  • Sumita Themes

    That's Great 

    Here goes the solution to your problem, Please Swap the below code of home_page.hbs file with your code and you can look at the code which I have commented, If you need that code in future you can keep as its if you don't then you can remove the part of code that I have commented, its totally depend upon you ;)

     

    <h1 class="visibility-hidden">{{ help_center.name }}</h1>

    <section id="main-content" class="section hero">
    <div class="hero-inner">
    <h2 class="visibility-hidden">{{ t 'search' }}</h2>
    <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" focusable="false" viewBox="0 0 12 12" class="search-icon" aria-hidden="true">
    <circle cx="4.5" cy="4.5" r="4" fill="none" stroke="currentColor"/>
    <path stroke="currentColor" stroke-linecap="round" d="M11 11L7.5 7.5"/>
    </svg>
    {{search submit=false instant=settings.instant_search class='search search-full'}}
    </div>
    </section>

    <div class="container">
    <section class="section knowledge-base">
    <h2 class="visibility-hidden">{{ t 'categories' }}</h2>
    <section class="categories blocks">
    <ul class="blocks-list">
    {{#each categories}}
    {{#if ../has_multiple_categories}}
    <li class="blocks-item">
    <a href='{{url}}' class="blocks-item-link">
    <span class="blocks-item-title">{{name}}</span>
    <span class="blocks-item-description">{{excerpt description}}</span>
    </a>
    </li>
    {{else}}
    {{#each sections}}
    <li class="blocks-item">
    <a href='{{url}}' class="blocks-item-link">
    <span class="blocks-item-title">
    {{name}}
    </span>
    <span class="blocks-item-description">{{excerpt description}}</span>
    </a>
    </li>
    {{/each}}
    {{/if}}
    {{/each}}
    </ul>
    {{pagination}}
    </section>
    <!-- Start of code Commented by Jay -->

    <!-- {{#if promoted_articles}}
    <section class="articles">
    <h2>{{t 'promoted_articles'}}</h2>
    <ul class="article-list promoted-articles">
    {{#each promoted_articles}}
    <li class="promoted-articles-item">
    <a href="{{url}}">
    {{title}}

    {{#if internal}}
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" focusable="false" viewBox="0 0 16 16" class="icon-lock" title="{{t 'internal'}}">
    <rect width="12" height="9" x="2" y="7" fill="currentColor" rx="1" ry="1"/>
    <path fill="none" stroke="currentColor" d="M4.5 7.5V4a3.5 3.5 0 017 0v3.5"/>
    </svg>
    {{/if}}
    </a>
    </li>
    {{/each}}
    </ul>
    </section>
    {{/if}}
    </section> -->

    <!-- {{#if help_center.community_enabled}}
    <section class="section home-section community">
    <h2>{{t 'community'}}</h2>
    {{#link 'community' class='community-link'}}
    {{t 'join_conversation'}}
    {{/link}}

    <div class="community-image"></div>
    </section>
    {{/if}} -->

    <!-- <section class="section home-section activity">
    {{#if settings.show_recent_activity}}
    {{recent_activity}}
    {{/if}}
    </section> -->

    <!-- End of code Commented by Jay -->
    </div>

    Let me know if you have any issue after the implementation of the above ;)

    Thanks 

    Jay

    0
  • Mihaly

    Is it possible to somehow customize the registration form? I'd like to add a phone number field to it and maybe even make it a required field. It seems it is not part of the templates or maybe I just cant find it.

    0

Please sign in to leave a comment.

Powered by Zendesk