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

Hi Tanya, Got it. Thanks for your help.

1


Hi,

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


Thank you in advance.

Sebastian

0


Shaping New Tomorrow 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


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


image avatar

Pulkit Pandey

Zendesk LuminaryCommunity Moderator

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


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


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


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


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


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


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


Glad you found it, Nathan, and thanks for helping out, Nicole!

0


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


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


image avatar

Jahn

Zendesk LuminaryCommunity Moderator

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

0


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


image avatar

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


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


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


Just want to say a big thank you to Carmina G. 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


image avatar

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


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


image avatar

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


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


image avatar

Ifra Saqlain

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

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


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


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


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


image avatar

Ifra Saqlain

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

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.