Customizing your Help Center theme (Guide Professional) Follow

Comments

48 comments

  • Avatar
    Will Gordon

    I would like open, organization requests to be shown to signed-in users on the Home Page of the Help Center. Or, potentially, modify the home page to redirect to the "My Activities" page, and then I can use the API to display articles there.

  • Avatar
    Wes Drury

    @Will - This script will redirect an end user to the Request Page.

    https://gist.github.com/moderatorwes/614de539de35aece9530

  • Avatar
    Will Gordon

    Ok, so just "manually" redirect the user. I was hoping there was a way to update subdomain.zendesk.com/hc/en-us BE the requests page, but a redirect is certainly usable! Thank you =)

  • Avatar
    Wes Drury

    @Will - I'm not aware of any way to update the subdomain so I believe the re-direct is the only option available at this point in time. Best of luck

  • Avatar
    OliviaBasileo (Edited )

    I'm trying to get my logo to link to the company's official site but couldn't find any way to do it. I am now trying to input my logo as an uploaded image in assets but I can't get the hyperlink to attach to the image. Right now the image in not visible, if I add text the hyperlink does go to the appropriate site.

    I've been working in the HTML but I'm probably doing something obvious wrong as I know nothing about coding!

    <header class="header">
    <div class="header-inner">
    <a href="https://www.COMPANY WEBSITE/">
    <img scr="//p5.zdassets.com/hc/theme_assets/793026/200142987/BFC-logo-1-line_zendesk.jpg" style="max-height:30px;border:0">
    </img>
    </a>
    <nav class="user-nav">
    {{language_selector}}
    {{submit_a_request}}
    <!--{{user_info}}-->
    </nav>
    </div>
    </header>

    Thank you in advance :)

  • Avatar
    Sandro Alvares

    how to make export template to import sandbox?

  • Avatar
    Kevin Lewis

    It would be real nice if we could clone our live theme, so we can mess with it in a sandbox environment when thinking about big theme changes. Looks like I will be using the old copy and paste method. 

  • Avatar
    Kevin Lewis

    Hey folks, does anyone know why I can't get more than 3 images in a row on my home page?

     

    The clear fix and table in CSS seem to be controlling this:

     

    * Clearfix: contain floats
    */
    .clearfix:before, .clearfix:after {
    content: " ";
    display: table;
    }

    .clearfix:after {
    clear: both;
    }

    /*
    * Column size
    */
    .main-column {
    float: left;
    width: 950px;
    margin-left: 0px;
    }

    . {
    float: right;
    width: 300px;
    }

     

  • Avatar
    Nicholas McMurray

    Hey Kevin,

    That's right, it's in the CSS.  You'll either have to make the width-constricting high level container larger, or make the blocks smaller.  I say high level because your main-column may be limiting the overall width, but there may be a higher level element also restricting it.  I changed some of my high level elements like 'main' to max-width and min-width from a fixed width to make them flexible across screen sizes.  Then set some lower level containers, like your 'main-column' to a fixed percentage width.  This way my block screen, that looks similar to yours, will use more of the wide space available without getting too big or too small.  The thing to look out for is to check your other pages to make sure the same css element changes will work there as well.  If not, you'll have to change one or the other too have everything come out nicely.

  • Avatar
    Nicholas McMurray

    Hi Olivia,

    This is how my header logo html looks with a link to my page.  I added the image using base64 encoding.  If you google convert jpg / png / etc to base64 you'll find online tools that will give you the base64 code for your image.  The code is very long so I put ellipses (...) in place of most of it.

    <a  style="border:0px" href="https://companyurl"><img width="30px" height="30px" src="data:image/png;base64,iVBORw...VYCh" alt="Home"></a>

  • Avatar
    Jessie Schutz

    Hey Nicholas! Thanks for hopping in and helping out!

  • Avatar
    Amy Wilkins

    The theme we are using displays 6 questions in each section on the category page with a 'show all' option if there are more than 6 in that section. We can't see a limiting number in the code we've looked at. Does anyone know how to reduce that number?

  • Avatar
    Jessie Schutz

    Hey Amy!

    Our moderator Wes posted a tip about this: Show less than 6 articles in a section in Help Center. That'll get you started!

  • Avatar
    Amy Wilkins

     Thanks Jessie that's great!

  • Avatar
    Eva Wilhelmsson

    Hi!

    Great article! We are in the middle of a re-make of our help center and I'm wondering how to divide the articel in different topics, as it is in the beginning of this article? Publishing links to another article is not a problem but it would be nice to give the costumers better suggestions on topics in long articles.. 

  • Avatar
    Jessie Schutz

    Hi Eva! You can find that information in this article:

    Happy formatting!

     

  • Avatar
    Jay Kelly

    Any chance that it is possible to add a custom column to the My Requests page?

  • Avatar
    Jessie Schutz

    Hi Jay!

    There isn't a way to do that at this time, but it's definitely something we've received a lot of feedback about. You can find that thread here: Enable custom ticket field columns to be added to the request table in Help Center my activities page.

    You'll see that our Help Center Product Managers have weighed in on it, and have done some information gathering as well. I'd encourage you to add your vote and use case to that thread!

     

  • Avatar
    Larry Deckel

    We're planning on using the Copenhagen theme and for now don't want to create a custom theme, but just want to adjust colors and fonts using the settings available in the theme editor.

    However, even though it lists a number of different fonts that can be used, when I save my settings the font changes don't register.  Is this not really enabled for use with the standard theme?

  • Avatar
    Wes Drury

    @Larry - The fonts should be applied through-out your theme when selected.  I just tested and it worked fine but I didn't test every font.  Which font are you selecting?

  • Avatar
    Larry Deckel (Edited )

    My first few attempts didn't seem to stick...  (I believe I had tried Arial Black), but after a few combinations, I selected Future for Font 1 and Helvetica for Font 2 and those were retained and applied.

    Questions:  

    1) Which parts of the template are Font 1 applied to, and which are Font 2 applied to?

    2) Similarly - What do colors 1 - 5 control the colors of?  Is there a chart somewhere that shows which parts of the template these selections are applied to?

    3) Is there any control on the font sizes?  Or does that require custom coding in the .css  (We want to keep this simple to maintain and don't want to get into the code itself if we can avoid it).    If font size can't be controlled, do any of the available fonts appear larger relatively for ease of reading?

    On a non-related note:

    3) We've uploaded images, but notice that they don't resize when viewed in mobile or smaller screens.  It appears they just get their left and right sides removed (causing text on the left and right of the image to be cut off).  What's the best strategy for these images so they look good in all screen widths?

    Thanks! 

     

  • Avatar
    Alicia Gonzalez

    @Larry

    Hi Larry!

    I'm sorry the fonts didn't seem to work, but I can try to answer your questions:

    1)  The Font 1 is for heading tags, so it would change any `<h1>....<h6>` and the Font 2 variable is set to the body of the element, so the remaining text would have this.

    2)

    - Color 1: We identify it as brand color this will change the icons, the color of the boxes in the home screen and the color of the buttons.

    - Color 2: This color is of the text inside anything with a Color 1 background, for example the category boxes on hover, buttons, icons, etc.

    - Color 3: Text color, so everything inside the content, the comments, posts, titles, etc.

    - Color 4: Link color

    - Color 5: Background color

    We are working on the naming :D

    3) Right now, to change the font size you would need to go in the code to change that

    4) The recommended sizes can be found here(https://support.zendesk.com/hc/en-us/articles/220672108#comment_206572007), the way we handle them is by using a "background-size: cover" so the image doesn't stretch and dynamically adapts to the screen size and displays the center of the image, that may cause issues when using text on the image, in my opinion, the best way to go would be without text.

     

    Hope this helps :)

  • Avatar
    Brad Marshall

    Is there any way to create your own custom variables outside of the provided '$color_' and '$font_' variables?

  • Avatar
    Wes Drury

    @Brad - I haven't found a way to add any more variables however I have suggested this to the HC Product Manger before.  You may want to go and post this over in the Product Feedback section.  It would get my vote.

  • Avatar
    Frank Scarfone

    Just wondering if anyone knows of a way to customize the design based on the category? I wanted to do a different header depending on which category our user selects. I assume different brands would help me acheive this, but i'd like to avoid that as these categories are just different products within our brand.

  • Avatar
    Wes Drury

    @Frank - Yes you can change the design a little based on the category.  You will use a combination of JQuery and the curlybar brackets.  I did this to change the background color of the page based on the category you were on.

    Are you just wanting to change the header based on the category.  Can you give me a little more details.

     

  • Avatar
    Frank Scarfone

    Thanks for the reply Wes.


    Yes, so my current mockup, our header is one solid color, with our logo and the zendesk login. I'd like to be able to change the header color and logo for each category (if that clarifies it any)

  • Avatar
    Ed Ball (Edited )

    Nevermind...  

     

    When you are customizing the theme of your help center, is there a way to change the language and see that while editing?

    Our font in English is fine, but some text in french or german is much longer because of translation so it wraps. But i want to be able to see the changed when I am editing it to see if it works without saving and publishing something that may not work.

     

    Thanks

  • Avatar
    Joakim Lund Andersen

    Would it be possible to get a guide on how to setup our own Search Results page similar to how yours looks here in the Zendesk Help Center?

  • Avatar
    Sandro Alvares

    Hi,

    How to limit cell about #each?

    Example:
    {{#each requests count='10'}}
      {{id}}
    {{/each requests}}

    Not works a limit 10, please help.

    https://developer.zendesk.com/apps/docs/help-center-templates/helpers (Not explain about each)

Please sign in to leave a comment.

Powered by Zendesk