Recent searches


No recent searches

Customizing your help center theme



image avatar

Charles Nadeau

Zendesk Documentation Team

Edited Feb 07, 2025


27

178

178 comments

Why can we not inject dependencies to the document_head (or the out-of-reach area of the head)? 

It makes adding custom styling and working with frameworks (Bootstrap, Tailwind, Foundation) incredibly difficult and leads to a massive over use of !important declarations. 

0


Hello

I would like to customize the Copenhagen help center theme by adding a custom field positioned at the organization level to the home page when the end user is logged in.

Can you help or advise me.
Thanks in advance.

Jérôme

0


Hi,
I'm customizing the Copenhagen theme. We're using multiple brands and the theming is almost identical. I have a few places where I would like it to differ between the brands.
Can I do something like {{#is brand_id '123456789'}}
What I'm asking is. How do I know which brand I'm on?

Thanks
Rasmus

0


Hi Rasmus Lynggaard, you should see a drop-down at the top left in Guide to switch between brands. 

 

0


Hi Nicole

I was thinking of how to do differ in the code. I would like to have as few differences in the code between my themes as possible. Preferred there shouldn't be any difference and that is why I'm looking at the #is statement to switch between brands, but I can't find a helper which will return the brand id

0


image avatar

Greg Katechis

Zendesk Developer Advocacy

Hi Rasmus! Since each help center's theme is isolated by brand, there isn't a helper available that would allow for a conditional statement that you're looking for.

0


Hi Zendesk & Community! Trying to localize some content on home_page.hbs, but getting the following error (used current_locale in header and footer with no issues):

Any suggestions? Thanks!

0


image avatar

Ifra Saqlain

Zendesk LuminaryMost Engaged Community Member - 2022Most Engaged Community Member of The Year - 2021Community Moderator

Hi c.keefe  :)

If you created Dynamic Content for your homepage content, you can use  Dynamic Content placeholder like this:

{{dc 'dc_placeholder_name'}}

Post:

https://support.zendesk.com/hc/en-us/articles/4408894121754-Changing-your-help-center-design-based-on-your-end-user-language

 

OR

Can you please share some more info.. about your query?

 

0


Hello again Ifra Saqlain ! Thank you for the dynamic content suggestion - I'll give that a try!

0


Hi Ifra Saqlain - Not able to get it working with Dynamic Content unfortunately (I appreciate the suggestion though!)

Essentially, I want to hide the following div (and all of its elements) of the page when English (GB) is selected, but am getting the "not possible to access current.locale error":

<div class="container-inner">

0


image avatar

Ifra Saqlain

Zendesk LuminaryMost Engaged Community Member - 2022Most Engaged Community Member of The Year - 2021Community Moderator

Hi c.keefe

Now I'm getting your point, you wanna hide the shared div with all the child elements of it when locale is English (GB).

Add the given code to your script.js file at the bottom.

if (window.location.href.indexOf("en-gb") > -1) {
  document.querySelector(".container-inner").style.display = "none"
}

 

Now, your div would be hidden when English(GB) is selected.

 

0


Thanks Ifra Saqlain ! I think I may be using the wrong div. What I am looking to do is hide the top two rows of tiles above the Category pill containers.

I believe they are the "custom-blocks" in the code, but that didn't work for me when I swapped it in for .container-inner in the code. Thanks again!

0


image avatar

Ifra Saqlain

Zendesk LuminaryMost Engaged Community Member - 2022Most Engaged Community Member of The Year - 2021Community Moderator

No worries c.keefe,

Use this updated code where I replaced 

".container-inner" to "#custom-blocks"

 

Updated Code:

if (window.location.href.indexOf("en-gb") > -1) {
  document.querySelector("#custom-blocks").style.display = "none"
}


Output:



 

 

0


Magnificent, Ifra Saqlain - you saved the day again! Many thanks!

0


Does anyone have a code Snippet to add the Submit button to comments? It was deleted from article on our custom theme.

0


image avatar

Ifra Saqlain

Zendesk LuminaryMost Engaged Community Member - 2022Most Engaged Community Member of The Year - 2021Community Moderator

Hi Michelle Izatt,

See the screenshot:

 

<div class="comment-form-controls">
 {{input type='submit' class="button button-large"}}
</div>


Screenshot:

1


Ifra Saqlain I just added that to our custom theme code, republished and the button is still not showing. Any ideas why? Thank you!

0


image avatar

Ifra Saqlain

Zendesk LuminaryMost Engaged Community Member - 2022Most Engaged Community Member of The Year - 2021Community Moderator

share the public URL I wanna see the issue, did you add custom CSS or JS in your theme?

0


Ifra Saqlain here is one of our articles if that's what you are referring to https://help.peek.com/hc/en-us/articles/10430786382740-Advanced-Ticket-Configurations- 

 

I'm just an admin in a developer world :)

0


Ifra Saqlain

<script>
  var templateName = 'articles';
</script>

<div class="container-divider"></div>
<div class="container">
  <nav class="sub-nav">
    {{breadcrumbs}}

    <script>
      var categoryid = $('.breadcrumbs li:nth-child(2) a').attr('href').match(/[0-9]+/)[0];
    </script>
  </nav>

  <div class="article-content-area" id="article-container">

    {{#if settings.sidebar_block_visibility}}
    <div class="sidebar collapsible-sidebar">
      <h3 class="collapsible-sidebar-title sidenav-title menu-title">
         {{#is settings.sidebar_menu_title_dc 'NONE'}}{{settings.sidebar_menu_title}}{{else}}{{dc settings.sidebar_menu_title_dc}}{{/is}}
      </h3>
      <div class="diziana-category-sidebar-menu"></div>
    </div>
    {{/if}}
    <section class="article-content-section {{#is settings.sidebar_block_visibility false}}article-fluid{{/is}}">
      {{#if settings.show_articles_in_section}}
      <section class="section-articles collapsible-sidebar">
        <h3 class="collapsible-sidebar-title sidenav-title">{{t 'articles_in_section'}}</h3>
        <ul>
          {{#each section.articles}}
          <li>
            <a href="{{url}}" class="sidenav-item {{#is id ../article.id}}current-article{{/is}}"
              title="{{title}}">{{title}}</a>
          </li>
          {{/each}}
        </ul>
        {{#if section.more_articles}}
        <a href="{{section.url}}" class="article-sidebar-item" title="{{t 'see_more'}}">{{t 'see_more'}}</a>
        {{/if}}
      </section>
      {{/if}}

      <script>
        var articleContent = $('.article-sidebar').children();
        if (!articleContent.length) {
          $('.article-sidebar').addClass('hide');
        }
      </script>
      <article class="article">
        <header class="article-header {{#is settings.author_meta_details_visibility 'hide'}}hide-meta{{/is}}">
          <h1 title="{{article.title}}" class="article-title">
            {{article.title}}
            {{#if article.internal}}
            <span class="icon-lock" title="{{t 'internal'}}"></span>
            {{/if}}
            {{subscribe}}
          </h1>

          <div class="article-meta-wrapper">
            {{#if settings.author_meta_details_visibility}}
            <div class="article-author">
              <div class="avatar article-avatar">
                {{#if article.author.agent}}
                <span class="icon-agent"></span>
                {{/if}}
                <img src="{{article.author.avatar_url}}" alt="Avatar" class="user-avatar" />
              </div>
              <div class="article-meta">
                {{#link 'user_profile' id=article.author.id}}
                {{article.author.name}}
                {{/link}}

                <ul class="meta-group">
                  {{#is article.created_at article.edited_at}}
                  <li class="meta-data">{{date article.created_at timeago=true}}</li>
                  {{else}}
                  <li class="meta-data">{{date article.edited_at timeago=true}}</li>
                  <li class="meta-data">{{t 'updated'}}</li>
                  {{/is}}
                </ul>
              </div>
            </div>
            {{/if}}

          </div>
        </header>

        <section class="article-info">
          <div class="article-content">
            <div class="article-body">{{article.body}}</div>

            <div class="article-attachments">
              <ul class="attachments">
                {{#each attachments}}
                <li class="attachment-item">
                  <a href="{{url}}" target="_blank" title="{{name}}">{{name}}</a>
                  <div class="attachment-meta meta-group">
                    <span class="attachment-meta-item meta-data">{{size}}</span>
                    <a href="{{url}}" target="_blank" class="attachment-meta-item meta-data">{{t 'download'}}</a>
                  </div>
                </li>
                {{/each}}
              </ul>
            </div>
          </div>
        </section>

        <footer>
          <div class="article-footer">
            <div class="article-inner-content-area">
              {{#if settings.social_share_visibility}}
              <div class="article-share">{{share}}</div>
              {{/if}}
            <div class="comment-icon">
              {{#if settings.comment_block_visibility}}
              {{#if comments}}

              <a href="#article-comments" class="article-comment-count" title="{{article.comment_count}}">
                <span class="icon-comments"></span>
                {{article.comment_count}}
              </a>
              {{/if}}
              {{/if}}
              </div>
          </div>
          </div>
          {{#with article}}
          <div class="article-votes">
            <span class="article-votes-question">{{t 'was_this_article_helpful'}}</span>
            <div class="article-votes-controls" role='radiogroup'>
              {{vote 'up' role='radio' class='button article-vote article-vote-up'}}
              {{vote 'down' role='radio' class='button article-vote article-vote-down'}}
            </div>
            <small class="article-votes-count">
              {{vote 'label' class='article-vote-label'}}
            </small>
          </div>
          {{/with}}

          <div class="article-more-questions">
            {{request_callout}}
          </div>
          <div class="article-return-to-top">
            <a href="#article-container">{{t 'return_to_top'}}<span class="icon-arrow-up"></span></a>
          </div>
        </footer>

        <section class="article-relatives">
          {{recent_articles}}
          {{related_articles}}
        </section>

        {{#if settings.comment_block_visibility}}
        <div class="article-comments" id="article-comments">
          <section class="comments">

            <header class="comment-overview">
              <h3 class="comment-heading">
                {{t 'comments'}}
              </h3>
              <p class="comment-callout">{{t 'comments_count' count=article.comment_count}}</p>
              {{#if comments}}
              <div class="dropdown comment-sorter">
                <a class="dropdown-toggle">{{t 'sort_by'}}</a>
                <span class="dropdown-menu" role="menu">
                  {{#each comment_sorters}}
                  <a aria-selected="{{selected}}" href="{{url}}" role="menuitem" title="{{name}}">{{name}}</a>
                  {{/each}}
                </span>
              </div>
              {{/if}}
            </header>

            <ul id="comments" class="comment-list">
              {{#each comments}}
              <li id="{{anchor}}" class="comment">
                <div class="comment-wrapper">
                  <div class="comment-info">
                    <div class="comment-author">
                      <div class="avatar comment-avatar">
                        {{#if author.agent}}
                        <span class="icon-agent"></span>
                        {{/if}}
                        <img src="{{author.avatar_url}}" alt="Avatar" class="user-avatar" />
                      </div>
                      <div class="comment-meta">
                        <span title="{{author.name}}">
                          {{#link 'user_profile' id=author.id}}
                          {{author.name}}
                          {{/link}}
                        </span>

                        <ul class="meta-group">
                          {{#if editor}}
                          <li class="meta-data">{{date edited_at timeago=true}}</li>
                          <li class="meta-data">{{t 'edited'}}</li>
                          {{else}}
                          <li class="meta-data">{{date created_at timeago=true}}</li>
                          {{/if}}
                        </ul>
                      </div>
                      <div class="comment-labels">
                        {{#with ticket}}
                        <a href="{{url}}" target="_zendesk_lotus" class="status-label escalation-badge">
                          {{t 'request'}}{{id}}
                        </a>
                        {{/with}}
                        {{#if pending}}
                        <span class="comment-pending status-label status-label-pending">{{t 'pending_approval'}}</span>
                        {{/if}}
                      </div>
                    </div>

                    <section class="comment-body">{{body}}</section>
                  </div>

                  <div class="comment-actions-container">
                    <div class="comment-vote vote" role='radiogroup'>
                      {{vote 'up' role='radio' class='vote-up' selected_class='vote-voted'}}
                      {{vote 'sum' class='vote-sum'}}
                      {{vote 'down' role='radio' class='vote-down' selected_class='vote-voted'}}
                    </div>
                    <div class="comment-actions actions">
                      {{actions}}
                    </div>
                  </div>
                </div>
              </li>
              {{/each}}
            </ul>

            {{pagination}}


            {{#form 'comment' class='comment-form'}}
            <div class="avatar comment-avatar">
              {{user_avatar class='user-avatar'}}
            </div>
            <div class="comment-container">
              {{wysiwyg 'body'}}
              
              <div class="comment-form-controls">
                {{input type='submit' class="button button-large"}}
              </div>
              
            </div>
            {{/form}}

            <p class="comment-callout">{{comment_callout}}</p>
          </section>
        </div>
        {{/if}}
      </article>
    </section>
  </div>
</div>

0


Ifra Saqlain maybe this is the issue? The Button is disabled?

0


I'm trying to create a section within the home_page.hbs template where we can post "news and updates". I noticed our default Guide Template seems to have included that at some point, but I couldn't find it in the code. Do you know how I could set something that looks like the "Product News and Updates" seen in the attached screenshot?

0


image avatar

Ifra Saqlain

Zendesk LuminaryMost Engaged Community Member - 2022Most Engaged Community Member of The Year - 2021Community Moderator

Hey Michelle Izatt, are you still facing the issue. I know I'm too late, I opened your link and I can't sign-up.

0


image avatar

Ifra Saqlain

Zendesk LuminaryMost Engaged Community Member - 2022Most Engaged Community Member of The Year - 2021Community Moderator

Hey Raúl,

Go to th home_page.hbs file 

Find for 'categories blocks', see line no. 30 in the screenshot.

 

 

copy that compete code from there, I'm attaching that code here:

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

 

This is the code which you want 

 

Thanks

 

0


Thanks @Ifra Saqlain .

How would I go about applying custom styling from that screenshot to only one specific category button?

For instance, what if I want to take just "Kickstarter basics" button and make it look like the second screenshot?

screenshot 1

screenshot 2

0


image avatar

Ifra Saqlain

Zendesk LuminaryMost Engaged Community Member - 2022Most Engaged Community Member of The Year - 2021Community Moderator

Hey Raul,

You can add there ID in the element:

id="block-items-{{id}}"


screenshot for the same:

 

 

for anchor tag:

id="blocks-item-link-{{id}}"

Screenshot for the same:

 

Now use that ids in CSS for specific element CSS:

#block-items-360003781252 {
  
}

#blocks-item-link-360003781252 {
  
}

0


Hi everyone --

Does anyone know how to change the name 'Promoted Articles' on the home page?  I'm using a free theme by Diziana.  (Love that Thor theme!)  I've looked in the code on the home page, on the header, on the section ... it's escaping me.  Any ideas?  

Thanks,
Lori

0


Hi Lori Christianson - I don't know the exact location within the Diziana-Thor theme, but on line 610 of our theme on home_page.hbs , I changed "Promoted Articles" to "Common Questions". Try a Ctrl-F search for "promoted-articles__title" or "Promoted Articles" and that should be near where you can change it. Good luck!

<h4 class="promoted-articles__title">Common Questions</h4>

0


Hi back, c.keefe!

Thanks for this.  Unfortunately, this theme doesn't have anything like that.  But I do appreciate you taking a stab at this.  I'll talk to Diziana.  Or change my theme ;-).  Thanks again!

Lori

0


image avatar

Pulkit Pandey

Zendesk LuminaryCommunity Moderator

Hi Lori Christianson

Please let me know the name of the theme you are using and share the URL of your help center where you need to make those changes so I can provide you a solution for your query. 

 

Thank You 

Pulkit

Team Diziana

0


Please sign in to leave a comment.