Customizing your help center theme

Return to top

158 Comments

  • Jack

    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
  • Ifra Saqlain
    Community Moderator
    Zendesk Luminary
    Most Engaged Community Member - 2022
    Most Engaged Community Member of The Year - 2021

    @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
  • Yaniv RECETTE

    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
  • Dirk Pekari

    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
  • Paul Dandurand

    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
  • Pulkit Pandey
    Community Moderator
    Zendesk Luminary

    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
  • IT Helpdesk

    Hi,

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

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

    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
  • IT Helpdesk

    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
  • Ifra Saqlain
    Community Moderator
    Zendesk Luminary
    Most Engaged Community Member - 2022
    Most Engaged Community Member of The Year - 2021

    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
  • 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
  • IT Helpdesk

    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
  • Ifra Saqlain
    Community Moderator
    Zendesk Luminary
    Most Engaged Community Member - 2022
    Most Engaged Community Member of The Year - 2021

    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
  • Brooke Kitten

    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
  • Ifra Saqlain
    Community Moderator
    Zendesk Luminary
    Most Engaged Community Member - 2022
    Most Engaged Community Member of The Year - 2021

    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
  • Brooke Kitten

    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
  • Michael Webb backup

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

    0
  • Pulkit Pandey
    Community Moderator
    Zendesk Luminary

    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
  • Pulkit Pandey
    Community Moderator
    Zendesk Luminary

    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
  • Ifra Saqlain
    Community Moderator
    Zendesk Luminary
    Most Engaged Community Member - 2022
    Most Engaged Community Member of The Year - 2021

    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
  • Brooke Kitten

    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
  • Ifra Saqlain
    Community Moderator
    Zendesk Luminary
    Most Engaged Community Member - 2022
    Most Engaged Community Member of The Year - 2021

    I'm glad that it worked for you :)

    0
  • Michael Webb backup

    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
  • Brooke Kitten

    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
  • Ifra Saqlain
    Community Moderator
    Zendesk Luminary
    Most Engaged Community Member - 2022
    Most Engaged Community Member of The Year - 2021

    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
  • Brooke Kitten

    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
  • Amanda Gunn

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

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

    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
  • Ifra Saqlain
    Community Moderator
    Zendesk Luminary
    Most Engaged Community Member - 2022
    Most Engaged Community Member of The Year - 2021

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

Powered by Zendesk