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

I want to customise main page and display requests list there. Is there an example how to do it with custom javascript? Anyway to access {{ requests }} variable?



0


image avatar

Ifra Saqlain

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

@Jack, you do this via JS:

 

Credit: https://stackoverflow.com/questions/43900571/copy-content-from-one-page-to-another-js

 

i). Add this line of code to requests_page.hbs file.

<script>
  var pageContent = document.getElementById("requests").innerHTML; 
  sessionStorage.setItem("page1content", pageContent);
</script>

Screenshot for same:


Add id to requests div like this:

 

ii). Add this code to homepage like this:

  <script>
   document.getElementById("containerss").innerHTML=sessionStorage.getItem("page1content");
  </script>

Screenshot for the same:



 

Output: Request list is on homepage now.

 

 

If any confusion feel free to ask :)

Thanks

 

0


Hello, 

is it possible to convert a design I have created in Figma to HTML or CSS and paste in Zendesk guide edit code to create a new page ?

Thanks

0


Hi Zendesk Guide Team, do you plan to add some basic responsive functionality to Copenhangen? https://www.w3schools.com/css/css_rwd_intro.asp

0


This article talks about choosing or customizing the theme for the Help Center Guide. We have the Gather Community turned on and it has a default Zendesk image. Is there a way I can upload my own photo for the Gather Community top panel like I did for the Help Center Guide top panel? If so, where are the instructions?

0


image avatar

Pulkit Pandey

Zendesk LuminaryCommunity Moderator

Hi Paul Dandurand

If you are using Zendesk Default theme Copenhagen, then please refer to the Images setting there you get an option to Change the image of the Gather hero section as shown in the below screenshot.

 

Please let me know if it solves your issue 

 

Thank You 

Pulkit

Team Diziana

0


Hi,

How can I put "submit a request" button function to "Manuals"?  It is possible to replace it?

0


image avatar

Ifra Saqlain

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

Hi IT Helpdesk,

To get it done, please follow the below steps:

1. Go to your home_page.hbs file.

2. Put this code inside the block list as given in screenshot.

<li class="blocks-item">{{link 'new_request' class='submit-a-request blocks-item-link'}}</li>



Screenshot:

 

3. Output is:

 

 

Change text of 'Submit a request' button text and functionality would be same

<li class="blocks-item">{{#link 'new_request' class='submit-a-request blocks-item-link'}} Manuals {{/link}}</li>



Screenshot:



 

Output:

 

 

There are more ways to get it done. Hope it'll help you.

Thanks

 

 

0


Dear Ifra Saqlain

Thank you for your kind and quick support.

as you can see from the screenshot, Now, I create 2 more "submit a request " buttons with two different name.

1. Can I know how to remove "Manuals" from the homepage? I am trying to hide this button beside from "WPX" and "Helpdesk"

2. Once end-user clicks "WPX" or "Helpdesk" is it possbile to directly go through the "WPX" once the end-user click? Currectly once user clicks, "Submit a request" uses need to choose the team.

0


image avatar

Ifra Saqlain

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

Hi IT Helpdesk,

1. Can I know how to remove "Manuals" from the homepage? I am trying to hide this button beside from "WPX" and "Helpdesk"

Hide the category blocks as you are saying to hide manuals block and I think that is category block. So add this CSS (style="display:none") to the category block div as I did below:

 

 

 

and,

Once end-user clicks "WPX" or "Helpdesk" is it possbile to directly go through the "WPX" once the end-user click? Currectly once user clicks, "Submit a request" uses need to choose the team.

 

You mean, when user select WPX button it should redirect to one request form and when user clicks Helpdesk then it should redirect to another request form?

Yes, it's possible.  

Add anchor tag with the form's URL as I'm doing below:

<li class="blocks-item">
          <a href="https://moderatorifra.zendesk.com/hc/en-us/requests/new?ticket_form_id=5361962484244"  class='submit-a-request blocks-item-link'>
            WPX 
          </a>
</li>
        
<li class="blocks-item">
          <a href="https://moderatorifra.zendesk.com/hc/en-us/requests/new?ticket_form_id=360003074611"  class='submit-a-request blocks-item-link'>
            Helpdesk 
          </a>
</li>


Screenshot:




 

In the demo I added my request form URL but you will have yours so replce the href="value" value.

If I misunderstood your query for the second point let me know.

 

Thanks

 

0


image avatar

Mike DR

Zendesk Customer Care

Hi Yaniv! As long as you're able to convert it to HTML or CSS that would work and then you can use the steps here to create a new page: Creating custom pages in the help center

0


Dear Ifra Saqlain,

Thank you for your kind support.

Now I see three of those boxes but when I put mouse on "Manuals" the word "Manuals" is not disappear but for other menu's it is disappearing.

Can you kindly support us how to have same function?

Always thank you for your support!

Kind ragards,

0


image avatar

Ifra Saqlain

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

Hi IT Helpdesk,

Wrap the text inside the span tag as   below  

 <li class="blocks-item">
  <a href="https://moderatorifra.zendesk.com/hc/en-us/requests/new?ticket_form_id=5361962484244"  class='submit-a-request blocks-item-link'>
     <span class="blocks-item-title">   WPX  </span>
  </a>
</li>
        
<li class="blocks-item">
  <a  href="https://moderatorifra.zendesk.com/hc/en-us/requests/new?ticket_form_id=360003074611"  class='submit-a-request blocks-item-link'>
      <span class="blocks-item-title">  Helpdesk </span>
  </a>
</li>


Screenshot:



0


I have minimal coding experience but would like to use more of the white space in the Copenhagen theme since our users don't access via mobile. Can anyone help me with what to edit to give more horizontal room for text/images on the article pages?

0


image avatar

Ifra Saqlain

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

Hi Brooke Kitten,

Just follow the steps below:

i). Go o edit mode of your Copenhagen them.

ii). Open style.css file. See red underline, open that file style.css

 

iii). Find for container class. Currently, max-width is 1160px ,

 

you can update it 1400px as I did. It's up to you.

 

 

iv). Doing this width will be increased for all pages not only for article page because container should be equal for every page in a theme.

 

 

If any bug, feel free to ask :)

 

Thanks

0


Hi Ifra Saqlain,

Thanks so much for this! It definitely helps. However, it seems something prevents the text from going past the left edge of the upper search bar. Is there any way to make it go even further right on article pages?

Also, the category and section pages still seem to have too much white space on the left. Is there a way to fix that?

0


I want to turn the title of a section that, when clicked, will redirect to a separate site. Is this possible?

0


image avatar

Pulkit Pandey

Zendesk LuminaryCommunity Moderator

Hi Michael Webb backup

Thank you for reaching out. It is definitely possible to redirect all section titles to the same external URL when clicked. However, in order to provide you with specific guidance, do you want to these changes on the Section page?.

I am here to assist you in any way I can.

 

Thanks

Pulkit

Team Diziana

0


image avatar

Pulkit Pandey

Zendesk LuminaryCommunity Moderator

Hi Brooke Kitten

Would it be possible for you to share screenshots of the issues you are referring to? This would enable me to review them and provide you with a more effective solution.

 

Thanks

Pulkit

Team Diziana

0


image avatar

Ifra Saqlain

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

Hey Brooke Kitten,

Here is your solutions for all three pages, you need to edit your style.css file to extend the width of category and section page.

For category page:

Currently there is -- flex: 0 0 80%

after Increasing the number of flex, it will be -- flex: 0 0 100%

 

 

For section page:

Currently there is -- flex: 0 0 80%

after Increasing the number of flex, it will be -- flex: 0 0 100%

 

For article page:

Currently there is -- 
flex:  1 0 66%;
max-width: 66%;


after Increasing the number of flex and max-width, it will be --
flex: 1 0 83%
max-width: 83%


 

Now your footer and header have not same width as container has so increase the container for both:

Header:

 

 

Footer:

 

0


Ifra Saqlain - Thank you so much for your clear and concise help! You made this very simple for a very novice user. Thanks again!

Brooke

0


image avatar

Ifra Saqlain

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

I'm glad that it worked for you :)

0


Hi Pulkit Pandey.

Yes. Effectively I would be inside of the section already where I can see the titles of its articles. I would want to turn the title of the section I'm in into a clickable link that would take me to its associated website.

0


Hi there,

I'm currently using this code to make all of our images enlarge on hover. We'd like to try click to enlarge instead. How can I implement this in our style sheet?

div-img{
    justify-content: center;
    align-items: center;
    display:flex;
    padding-top:20%;
}
img{
    transition: transform .2s;
    margin:0 auto;
}
img:hover{
    transform:scale(2.0);
}

Thanks in advance!

0


image avatar

Ifra Saqlain

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

Hi Kitten

You can use

img{
  padding: 50px;
  transition: transform .2s; /* Animation */
  width: 200px;
  height: 200px;
  margin: 0 auto;
}

img:hover {
  transform: scale(1.5); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}

 

Credit: https://www.w3schools.com/howto/howto_css_zoom_hover.asp

0


Hi Ifra Saqlain,

Correct me if I'm wrong, but the code you provided also seems to be a hover to enlarge instead of click to enlarge. 

Basically, our users don't want the images to auto-enlarge, but they would prefer to click an image and have a larger version open in the center of the screen (a modal, perhaps?) to view the larger version only when each user needs to do so.

Thanks!

Brooke

0


Any idea what to remove in the code to hide the CC tab from users?

0


image avatar

Ifra Saqlain

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

Hi Amanda,

Add this line of code to your script.js file at the bottom and test if any issue you can ask.

var _x = document.querySelector('ul.collapsible-nav-list > li > a[href*="/hc/en-us/requests/ccd"]').style.display = "none";

0


image avatar

Ifra Saqlain

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

@Brooke Kitten, it is possible when you are creating articles with the images, you need to add some HTML tags there for popup; CSS and JS will be added or there is Bootstrap Modal as well.

Another way is, that you can use JS only to add a modal for your images but that will apply to all images of the theme so you need to check the URL with the condition. 

 

Any help feel free to ask :)

 

0


Please sign in to leave a comment.