Branding your Help Center

Have more questions? Submit a request

68 Comments

  • Jim Uomini
    Comment actions Permalink

    Hi Molly,

    I have the same issue with MS Word. I use an app called Doc Converter Pro to convert my docs to clean HTML, which I then paste into the code view in an HC article.

    Here's a link to a post about converting Google Docs to clean HTML:

    https://www.techjunkie.com/google-docs-to-html/

    Best, Jim

     

    1
  • Liz Rosen
    Comment actions Permalink

    Hi Jessie - there are 3 - the home banner and the community banner are 1600x300, but then there's also the community image, which doesn't go all the way across the page. I was looking for the specific width of the community image to give our designer so that he doesn't have to fix something later.  Thanks for your help!

    1
  • Kay
    Comment actions Permalink

    Hi Janice,

    Since you are referring to the homepage. I think with buttons you mean these, right?

     

    You need to edit another CSS line.
    Search for .blocks-item-title

    And add font-size: 20px; to that.

    1
  • Vladan Jovic
    Comment actions Permalink

    Hey Milton, do you meant on ifood.zendesk.com?

    If yes, probably the easiest way to remove this Community section is if you add the following code into your help center CSS file:

    section.section.community {
    display: none;
    }

    Hope this helps!

    1
  • Jessie Schutz
    Comment actions Permalink

    Hey Jim,

    I did some poking around in the code and it might be possible to change it with CSS or HTML, but I can't figure out how. Hopefully one of our Help Center gurus can weigh in and shed some more light on the subject!

    1
  • Clayton Waters
    Comment actions Permalink

    We've customized our Zendesk theme, including adding the following <meta> to the Header portion of the theme:

    <meta property="og:image" content="//p7.zdassets.com/hc/theme_assets/231027/200067384/brushfire-zendesk-share-image.png" />

    However, it looks like when you choose a logo in your Guide settings that Guide creates a <meta> that uses the logo as the og:image:

    <meta property="og:image" content="http://p7.zdassets.com/hc/settings_assets/231027/200067384/H1dAOi09S26ihCNkqHv4Rw-Brushfire-logo-white.png">

    Is there any way to make Guide NOT do that? We want to specify a custom image to be displayed when any of our Guide links are shared.

    Link to our Guide: https://get.brushfire.help/hc/en-us/

    1
  • Milton Marcelo
    Comment actions Permalink

    Thanks @Vlad! 

    0
  • Patrick Bosmans
    Comment actions Permalink

    Thanks for that workflow idea Jim!  

    Molly, I hope that helps you with your workflow.  I might also suggest trying Shift+Cmd+v to paste the content with the same formatting as what is currently set in the editor.

    0
  • Vladan Jovic
    Comment actions Permalink

    Symbol after .com is not good, should be ". Please check or copy paste that Symbol from other location in the code.

    0
  • Bobby Daly
    Comment actions Permalink

    Hi,

     

    I have been customizing my colors in the following way:

     

    However, when I test it out, on some options (top right to make a new post), it provides blue background with blue text so nothing can be read, like this:

    It appears that no matter what color I select for "Brand color," the same issue occurs. 

     

    How can I adjust this, please?

     

    Thanks!

    ~Bobby

    0
  • ndavis
    Comment actions Permalink

    After I located <div class="logo"> I can't seem to figure out how to put in the right code to allow me to make my companies logo larger.

    0
  • Jessie Schutz
    Comment actions Permalink

    Hi there!

    You need to make sure that you switch over to the CSS tab; the logo properties are found there, rather than in the HTML tab. Once you're in the right tab, you can do a CNTL/CMD + F to search for the line of code you need.

    Hope that helps!

    0
  • Jim Uomini
    Comment actions Permalink

    Hi Aimee,

    Now that you've pointed out the obvious, that this bar is only visible internally, it makes my request a lot less interesting. I'll forget about it. :-)

    Thanks, Jim

    0
  • Patricia
    Comment actions Permalink

    Hi- we would like to use another image for the home banner using the Copenhagen theme, what are the recommended dimensions and resolution for that banner? 

    0
  • James Taqvi
    Comment actions Permalink

    That's solved it! Thank you :-) It was the " symbol, so I copied it from somewhere else in the themes html and it worked.

    0
  • Jennifer Rowe
    Comment actions Permalink

    You are awesome, Vlad! Thanks for helping out. 

    0
  • Maimoona Abbas
    Comment actions Permalink

    I need to change logo and theme but I am encountering this error while hitting at customize theme page. Any one can answer why I am seeing this.

    For reference screenshot is attached.

    0
  • Jim Uomini
    Comment actions Permalink

    Hi Jessie,

    I want to change the color of the black menu bar in Help Center to match our company color as I was able to do for the agent page.

    Thanks, Jim

     

    0
  • Vladan Jovic
    Comment actions Permalink

    Glad that it works now! Feel free to post here if any further help needed! ;)

    0
  • James Taqvi
    Comment actions Permalink

    I'm trying to change the logo return URL and have swapped the code as detailed above.

    Something seems to be wrong as my logo doesn't display and parts of the code after the change are now highlighted in pink.

    I've attached a screenshot.

    Any ideas what I'm doing wrong?

    Thanks in advance!

    0
  • Gorka Cardona-Lauridsen
    Comment actions Permalink

    @Molly, as you are using Google Docs I would also suggest that you can use the Google Doc importer feature in Guide. It strips the font formatting and you can bulk import your docs.

    0
  • Chris Norris
    Comment actions Permalink

    The Helpcenter theme is very outdated. It looks like someone wrote the code in a  Microsoft Word. Is there any chance we are going to get a more modern update or at the very least more customization so we can modernize it ourselves? 

    0
  • Ron de Vries
    Comment actions Permalink

    Hello!

     

    Maybe one of you can help me with a simular issue. I want to have the Company Logo (under Brand) to change whenever a customer selects the language English (GB). This because in Great Britain Help Center is written as Help Centre.

     

    I've already uploaded both assets (Help Center and Help Centre) but I can't figure out how to code it. We make use of the Diziane Eczar theme.

     

    I know how to do it with dynamic content but I don't like the look of it. I would prefer the logo to change completely when selecting EN-GB language.

     

    I think I'm close with the {{#is helper but it doesn't yet show my asset:

    <header class="header-wrapper">
    <div class="header">
    <div class="logo">
    {{#link 'help_center'}}
    {{#is current_locale.name '/hc/en-gb'}}
    <img src="{{asset 'FG_HC_GB.png'}}" alt="{{t 'logo'}}">
    {{/is}}


    Thank you so much in advance!

     

    BR,

    Ron

    0
  • Vladan Jovic
    Comment actions Permalink

    Here you go ;)

    section.section.activity {
    display: none;
    }
    0
  • Vladan Jovic
    Comment actions Permalink

    Hi James, let's try without / after .png"

    0
  • Gorka Cardona-Lauridsen
    Comment actions Permalink

    Hi Bobby

    I have not been able to reproduce what you are experiencing with the newest version of the Copenhagen theme.

    If you are using a Custom theme derived from the Copenhagen theme the CSS file should contain:

    .button-large, input[type="submit"] {
    background-color: $brand_color;
    border: 0;
    border-radius: 4px;
    color: $brand_text_color;
    font-size: 14px;
    font-weight: 400;
    line-height: 2.72;
    min-width: 190px;
    padding: 0 1.9286em;
    width: 100%;
    }

    It could be that "color: $brand_text_color;" has been changed to "color: $brand_color;" in which case you would see what you are seeing. If that is the case change "color: $brand_color;" to "color: $brand_text_color;".

    Depending on how much configuration and customization you have already done, an easier solution may be to simply get a new clean copy on the Copenhagen theme, by clicking "Add new theme" in on the themes page and choosing the Copenhagen theme among the four options.

    If these suggestions do not solve the problem, please create support ticket.

    0
  • Janice Whiteside
    Comment actions Permalink

    Can the standard "hero home" image on the Copenhagen theme be replaced with an image that contains links?

    0
  • Stephanie Turganova-Shaw
    Comment actions Permalink

    Hi Jim this did it for me:

    .navbar-container {
    background-color: yourcolorhere;
    }

    0
  • Jessie Schutz
    Comment actions Permalink

    Hey Liz!

    I double checked the wording in the article, and the way I read it is that the 1600x300px recommended dimension applies to both the top banner and the community banner. You can use an image that is less than 1600px long if you'd like, but it needs to be at least 300px tall regardless of the length of the image to make sure it doesn't get distorted.

    Let me know if that doesn't clear things up for you!

    0
  • Nicole - Community Manager
    Comment actions Permalink

    Hey Ron - 

    I saw that you got a resolution in another thread. For anyone else running into this issue, you can find Ron's answer here: https://support.zendesk.com/hc/en-us/community/posts/115007207887/comments/360005506413

    0

Please sign in to leave a comment.

Powered by Zendesk