Customizing your help center theme

Return to top

158 Comments

  • Leung Edward

    Hi Tanya, Got it. Thanks for your help.

    1
  • SNT Aps

    Hi,

    How does one change the picture associated with the Help Center theme.
    See examples of pictures below:


    Thank you in advance.

    Sebastian

    0
  • Nicole

    SNT Aps if you're just looking to change the image and not add/change a whole theme, it's done from within Guide. You'd click customize, then image from the options on the left, replace the image, then click publish to save the changes. 

     

     

    0
  • SNT Aps

    Hi Tanya,

    Thank you - This does not help here though, as I am not looking to change the image in the help Center. I am looking to change the preview picture. As we operate with numerous versions, being able to change the picture makes it easy to manage and see what is what.

    0
  • Pulkit Pandey
    Community Moderator
    Zendesk Luminary

    Hi SNT Aps

    Please follow the below steps

    1. Take a screenshot of your homepage 

    2. Rename that screenshot with the following name "thumbnail"

    3. Then Download your theme in your system unzip the zip file 

    4. The Replace the thumbnail image with the current one 

    5. Create the Zip of your theme and then Install 

     

    Let me know if you need any further assistance

     

    Thanks 

    Pulkit 

    Team Diziana

    1
  • SNT Aps

    Hi, thank you for your replies.

    Pulkit Pandey - This was exactly what I was looking for, thank you very much!

    Have a nice day!

    0
  • Nathan Purcell

    How do I add an image to a theme so it can be referenced in the HTML? I don't want it to be editable by anyone in Guide but it needs to be part of the theme. 

    0
  • Nicole

    Nathan Purcell you can add the image to your assets:

     

     

    After it uploads, you can click on the asset and use the CSS or Javascript code provided by ZD, or right click on the image to grab the URL that you can use in the HTML. 

    0
  • Nathan Purcell

    Hi Nicole, thanks for your reply.

    How do I reference it in the theme though? 

    To be clear, I mean in the code, not the UI. 

    0
  • Nicole

    It depends on how/where you're using it. If you mean from your theme pages, you can use a <a href='http://(image URL from assets here)> tag. 

     

     

    0
  • Nathan Purcell

    I found it! 

    In the theme, add the file to the /assets directory and reference using the same asset helper: 

    https://developer.zendesk.com/documentation/help_center/help-center-templates/helpers/#asset-helper

     

    0
  • Dave Dyson
    Glad you found it, Nathan, and thanks for helping out, Nicole!
    0
  • Dave Dyson
    Hi Justin, and welcome to the community!
     
    Hudson is a third-party theme, so you'll need to contact the developer directly -- there's a "Contact Us" link here: Hudson theme
    1
  • elena
    Hi Dave,
     
    Thank you for your assistance. For some reason, I don't see Justin's comment. 
     
    Guys, if you use themes from Lotus Themes, don't hesitate to contact us directly. Our team of Zendesk experts will be happy to help with any issues or questions. 
     
    Best regards,
    Elena
    0
  • Jahn Bronilla
    Community Moderator
    Zendesk Luminary

    Hello Charles Nadeau or anyone, can we possibly have like interactive workflow in Guide using this? 

    0
  • Rebeca

    Hello! Has anyone customized their own theme while still using the basic search functions of the Copenhagen theme?

    Our theme has been too customized, and the search functions are not working very effectively, I was wondering if it's possible to use basic search functions but being able to maintain the design we have created for our Help Center.

    Thanks in advance!

    0
  • Gorka Cardona-Lauridsen
    Zendesk Product Manager

    Rebeca

    There should be no problem using the native search helper (functionality) with a customized theme, though depending on how you want to customize the search experience using the native search helper may have some limitations.

    Alternatively, you can build your own experience using the search API, though searches would count against you account's API rate limit.

    Another alternative would be to use one of our partner apps like Algolia, Swiftype, or Coveo.

    0
  • colleen

    I am using a customized Braden theme and have successfully added custom blocks to my landing page. I now need to remove those blocks, but removing them from the CSS hasn't updated the front end. Here is the section from the CSS, which is showing the correct IDs I want to display:
    But you can see in dev tools the removed IDs are still there:
    I've cleared cache and waited several days, but no change. What happened?

    0
  • Hi colleen,

    Thank you for choosing our Braden theme. Can you contact us directly? Our developers will be happy to help. 

    Best,

    Lotus Themes

    0
  • Nathan Purcell

    Colleen, that CSS isn't targeting those divs as they don't have the class "block-list-item". 

    In your CSS, replace ".block-list-item" with ".custom-block" and it should work. 

     

    0
  • Heather Firth

    Just want to say a big thank you to Carmina Granado your email was very helpful, thank you! I wasn't able to add a comment to the ticket but I just wanted to give you a big thumbs-up. Sorry I didn't get to the survey in time.

    0
  • Gorka Cardona-Lauridsen
    Zendesk Product Manager

    Hi All, 

    We are looking to talk to people that have code customized a Help Center theme or tried and failed to code-customize a theme.

    If you are up for sharing your feedback through a 30 min video interview, please sign up and answer 3 short survey questions at the end of the form. We would love to hear from you!

    Sign up here.

    Looking forward to talking to you!

    Gorka Cardona-Lauridsen
    Sr. Product Manager, Zendesk Guide 

    0
  • Francisco M

    Hi! 

    I am trying to find the article that had the code for the Zendesk Forms (Image Below).

    I need to hide certain fields and add custom text above certain fields.

     

     

    0
  • Anne Ronalter
    Zendesk Customer Care
    Hello Francisco,

    Unfortunately, I can not see a screenshot.

    But it sounds like you are referring to Building a custom ticket form with the Zendesk API.
    0
  • Francisco M

    Sorry, I thought I posted it. It's just an image of a form. 

    What I used to be able to do is simply add some code into ZD Guide > Themes > Customize > Edit Code > and add some code directly to script.js

    Here is my code:

      //Feb 9, 2023 - Sample Form
      if (window.location.href.indexOf("requests/new?ticket_form_id=13055910490772")
     > -1) {
        §('.request ticket form id') .hide(): // hides top form type dropdown
        §('h1') .addClass ('heading-2'). text ('SAMPLE FORM' );
        $("li[title|="Submit a request' ]"). text ('SAMPLE FORM'); // adds new title

        §("form > _request anonymous requester email') .prepend("‹p id-'display-text"
    style='font-size: 13px; margin-bottom: 25px; color: $333333; '>INSERT TEXT </a›.‹br></p>"):// adds text to the top above email address

     

    What am I doing wrong?

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

    Use this code:

    if (window.location.href.indexOf("requests/new?ticket_form_id=13055910490772") > -1) {
    $('.request ticket form id').hide(): // hides top form type dropdown
    $('h1') .addClass ('heading-2').text ('SAMPLE FORM' );
    $("li[title|='Submit a request' ]").text ('SAMPLE FORM'); // adds new title
    $("form > _request anonymous requester email").prepend("‹p id='display-text'  style='font-size: 13px; margin-bottom: 25px; color: $333333; '> INSERT TEXT </p>");// adds text to the top above email address

     

    Note: ?ticket_form_id=13055910490772 - Remove this id and add your form ID

     

     

    Instead of:

      //Feb 9, 2023 - Sample Form
      if (window.location.href.indexOf("requests/new?ticket_form_id=13055910490772")
     > -1) {
        §('.request ticket form id') .hide(): // hides top form type dropdown
        §('h1') .addClass ('heading-2'). text ('SAMPLE FORM' );
        $("li[title|="Submit a request' ]"). text ('SAMPLE FORM'); // adds new title

        §("form > _request anonymous requester email') .prepend("‹p id-'display-text"
    style='font-size: 13px; margin-bottom: 25px; color: $333333; '>INSERT TEXT </a›.‹br></p>"):// adds text to the top above email address

     

     

    0
  • Andrii Melnychuk

    Hi there 👋
    Noob question: I'm trying to achieve what Daniel Goldberg asked above, but getting errors when copying container from requests_page.hbs to home_page.hbs:

    11 errors
    'request_list' does not exist
    'filters' does not exist
    'form' does not exist
    'query' does not exist
    not possible to access `requests` in `requests.length`
    'query' does not exist
    'requests' does not exist
    'requests' does not exist
    not possible to access `current_filter` in `current_filter.identifier`
    not possible to access `current_filter` in `current_filter.identifier`
    'requests' does not exist

    Any hints how one can make that container to work on home page?

    Thanks!

    1
  • Nicole

    Hi Andrii Melnychuk

    There was an article found here that kind of relates to your question. The errors are from undefined helpers that are only usable on their respective pages. I'm honestly not sure if there is a workaround, but reading up on the helpers and where they work would be a good starting ground. Hope that helps some!

    1
  • Tomas M. Parra

    Hello, community!
    I'm customizing the Copenhagen theme. I added some Javascript, CSS and HTML to the files style.css, script.js, category_page.hbs and some other files. 
    Is it safe, or do I have to create a child theme to prevent future updates from overwriting my changes?

    Thanks!!

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

    Hello Tomas M. Parra, if you have been Edit Code of Copenhagen theme then you don't need to do to prevent future updates.

    When you go to customize the Copenhagen theme, you will get an alert 

    "By accessing the code of your theme, the theme will be unlinked and will no longer receive new features and updates from Zendesk. You'll be responsible to implement any new theme features. Learn more

    Are you sure you want to proceed?"
     
    And you click Access Code button it means your theme will not update by Zendesk in future.

    Yes, you can do one thing, download your updated theme and save that into a folder on your PC.

    Thanks

    0

Please sign in to leave a comment.

Powered by Zendesk