Customizing your help center theme

Return to top

160 Comments

  • Francis Morissette

    Hey guys,

    Am I able to just start from complete scratch? Completely different layout, like, modify a base "template.hbs", and not just header. I want to access the head, complete body and stuff. Is that possible?

    0
  • Ifra Saqlain
    Community Moderator
    Zendesk Luminary
    Most Engaged Community Member - 2022
    Most Engaged Community Member of The Year - 2021

    Hey Francis, editing the header is so simple. Go to the header.hbs template and start editing or you can share the screenshot here if I misunderstood your point.

     

    -1
  • Ken Billing

    Ifra,

    I'm considering switching to the Copenhagen theme and customizing it but I'm concerned about having to migrate that customization to future versions of the theme. Is there a revision history for the theme documented somewhere or can you comment on how often it has been or expects to be updated?

    Thanks

    0
  • Augusto Silva
    Zendesk Engineering

    HeY Ken Billing,

    The best way to follow updates is to fork the theme's github repository and use the github integration to import your customized theme.

    0
  • Sarah Cronin

    Can anyone tell me where I would go in the Copenhagen theme to edit where it says Announcements Customer Connection and Tips & Best Practices on this page:

    0
  • Maggie Ungerboeck

    Hi,

    My guess is that these are either article categories or community topics. If you go into your Guide Admin, you can click on Arrange Articles and you can see a list of all your Categories. If you click on Arrange topics, you can see your community topics.

    Hope this helps!

    Thanks,

    Maggie

    1
  • Vitor Galveia

    Hi,

    I need to add an extra page with some static content and a link on the footer to access that page. Is that possible with the copenhagen template?

    Thanks

    0
  • Marius

    Hi,

    I'm trying to add a background picture to the footer in the Copenhagen theme.

    How does it work?

    0
  • Pulkit Pandey
    Community Moderator
    Zendesk Luminary

    Hey Marius Tendick

    If you have not customized the default Copenhagen theme just add the below CSS at the bottom of your style.css file 

    You need to upload the image under the assets folder then copy the following Highlighted URL and replaced it with the text inside the URL() parameter

     

    .footer {
    background-image: url($assets-train-tracks-1-1024x680-jpg);
    }

    let me know if it solves your issue

    Thanks 

    Pulkit

    Team Diziana

    0
  • Marius

    Hi Pulkit,

    Thanks you! It's working perfectly

    How can I change the size of the footer image?

    Marius

    0
  • Pulkit Pandey
    Community Moderator
    Zendesk Luminary

    Hey Marius Tendick

    You can use background-size CSS property 

    .footer {
    background-image: url($assets-train-tracks-1-1024x680-jpg);
    background-size: 100%;
    }

    Let me know if it solves your issue 

    Thanks 

    Pulkit

    0
  • Jim Thompson

    Hello everyone. Will cross-post this in the Javascript cookbook article as I suspect this is JS related. Our "Community" section is now tracking "Feature Requests" from our customers and I would like to further customize the status of posts/ideas. Anyone know how or where to modify this list? Is it part of the theme editor or somewhere else in Admin settings?

    0
  • Anton Hughes

    Step #3 of To edit the page templates - There is no Edit Code button.

    Whats going on?

    0
  • Pulkit Pandey
    Community Moderator
    Zendesk Luminary

    Hi Anton Hughes
    It's possible for you to share the screenshot of what you are seeing.

    Thanks

    0
  • Cas.D

    I have added a javascript file to my template assets. This file contains functions, with arguments.

    How would I use one of these functions in my template?

    0
  • Pulkit Pandey
    Community Moderator
    Zendesk Luminary

    Hi Cas du Plessis

    Can you please share a screenshot of what you want to do

    Thanks
    Pulkit
    Team Diziana

    0
  • Cas.D

    In my document_head.hbs, I have added this:

    <script> var assetsIcon = "{{asset 'icon.js'}}"; </script>

    The icon.js file looks something like this:

    function getIcon(id, classification) {
    const iconMapping = [
    {
    id: 360000120808,
    classification: 'category',
    icon: 'fa-envelope-open'
    },
    {
    id: 115001810047,
    classification: 'category',
    icon: 'fa-user-graduate'
    }
    ....
    ]

      const mapping = iconMapping.find(mapping => mapping.id === id && mapping.classification === classification);
    const iconClass = `fa ${mapping.icon || 'fa-question-circle'} block-icon`;
    return iconClass;
    }

    My home-page.hbs I want to add an icon for each category:

    {{#each categories}}
    <li class="blocks-item">
    <a href='{{url}}' class="blocks-item-link">
    <i class="{{ getIcon(id, 'category') }}"></i>
    <h4 class="blocks-item-title">{{name}}</h4>
    </a>
    </li>
    {{/each}}

    No errors in the template edit, and no errors during run time in the dev tools console.

    I have tried adding the asset directly into the home_page.hbs, but still not working:

    <script>{{asset 'icon.js'}}</script>

    Any ideas?

    0
  • Cas.D

    any idea how to access the script from a template?

    0
  • Timothy LeCras

    Is there a snippet of code that can change the sections in a category to look like a block w/description (like how a category looks on the help center main page?

    0
  • Pulkit Pandey
    Community Moderator
    Zendesk Luminary

    Hi Cas du Plessis
    Sorry for the late replay, I will give it a try today and let you know, are you open to update the code base.

    As I can see that you want to add a image on the category blocks on the homepage.

    Thanks
    Pulkit

    0
  • Pulkit Pandey
    Community Moderator
    Zendesk Luminary

    Hi Tim LeCras

    You need to modify the code base of the category page, do you want to show the list of article under the section or you just want to show the section name

    Thanks
    Pulkit

    0
  • Daniel Goldberg

    Hi,

     

    How I can make the home page to be the "requests" page.

    Just to be clear, when customers are logging in the first thing they see is their requests with an option to create  new one 

    1
  • Vishal Kadu

    I have cards type structure (all categories in cards layout) on the home page and I want to add the following behavior: 

    • When a user clicks on the card (category), the sections within that category should appear in a pop-up window (on the same page, while the rest of the background of the home page turns slightly dark and hazes out). 
    • When any of those sections is clicked, the page navigates to the next page where the section automatically opens and the left-hand ToC (site directory) shows up. 
      The left-hand ToC should appear in an expanded state and highlight the section that is selected, while the rest of the ToC remains in a collapsed state. 

    Any directions on how can I achieve this based on the Copenhagen theme please?

    Thanks 

    0
  • Hi Vishal,

    You can use the Side Navigation extension for the second one. More information about theme compatibility is here

    0
  • Jill Hohnstein

    I am using multibrands to create my help centers in zendesk, which is working fine. But, for the life of me, I cannot figure out how to create a single landing page with links to each brand like the demo I was shown here: https://z3n-retaildemo.zendesk.com/hc/en-us. I was told we have this ability, but I can't figure it out. 

    My account person said to use home_page.hbs, but that's the landing page of each individual brand, and not an overall landing page. Please help.

    0
  • Tipene Hughes
    Zendesk Developer Advocacy

    Hi Jill Hohnstein,

    One way you could go about this is by using (or creating) and overarching brand and creating links to the other Help Center URLs from there. Here's an example below of how that could look. This code would go in the home_page.hbs file of the overarching brand:

    <div class="container">
      <div class="brand-pickers blocks-list">
        <div class="picker-icon blocks-item">
        	<a class="blocks-item-link" href="{brand_1}" target="_blank"><img src="{{asset 'shirt.svg'}}" alt="Outfitters"></a>
          <h4 class="blocks-item-title outfitters-banner">Entertainment 276 Outfitters</h4>
        </div>
        <div class="picker-icon blocks-item">
        	<a class="blocks-item-link" href="{brand_2}" target="_blank"><img src="{{asset 'home.svg'}}" alt="Retail Home Decor"></a>
          <h4 class="blocks-item-title homedecor-banner">Entertainment 276 Retail Home Decor</h4>
        </div>
        <div class="picker-icon blocks-item">
        	<a class="blocks-item-link" href="{brand_3}" target="_blank"><img src="{{asset 'laptop.svg'}}" alt="Footwear"></a>
          <h4 class="blocks-item-title">Entertainment 276 Electronics</h4>
      	</div>
      </div>
    </div>

     I hope this helps! Feel free to reach out with any questions.

    Tipene

    0
  • Anita Rajkumar

    is it possible to add line between some of the fields in submit a request- new web

    form?

    0
  • Pulkit Pandey
    Community Moderator
    Zendesk Luminary

    Hi Anita Rajkumar

    Yes, you can add by using CSS get the ID of the form field and the add the border

    If it's possible to share the URL of help center where this form is in use, so that I will provide the CSS which will solves your issue

    Thanks
    Pulkit

    0
  • Pulkit Pandey
    Community Moderator
    Zendesk Luminary

    Thanks Anita Rajkumar, I will come with the solution shortly

    0
  • Pulkit Pandey
    Community Moderator
    Zendesk Luminary

    Hi Anita Rajkumar

    Please, add the below CSS at the bottom of your style.css file

     
    .form-field.string.required.request_custom_fields_1260825961630 {
    border-top: 1px solid #ddd;
     padding-top: 20px;
    }

    .form-field.string.required.request_subject {
    border-top: 1px solid #ddd;
    padding-top: 20px;
    }

    Let me know if it solves your issue

     

    Thanks 

    Pulkit

    0

Please sign in to leave a comment.

Powered by Zendesk