Tips for using HTML to customize your knowledge base in Help Center Follow

Comments

23 comments

  • Avatar
    Brian Adkins

    Wow... we just switched to Help Center and the article formatting is terrible.

    In the old portal, I could click on some text and the formatting bar would tell me which heading style was used... no longer the case... you'll have to guess, reformat to test, or switch to html view and then search for your text to find out.

  • Avatar
    Andy Hoover

    I'm seeing the same thing as Oliver above--the articles as displayed don't completely correspond to the HTML I put in there.

    Also, I find that it's adding HTML tags that weren't in my original.

    For example, I have some unordered lists (<ul>) nested inside an ordered list (<ol>), but after I paste my html into the html box, when I open it again and view the html, there's yet another layer of <ul> nested in between, and it throws off the formatting I want to achieve. Is there a way to keep it from adding additional html tags, and just use the html I pasted in there the way I pasted it? And display the headings correctly?

  • Avatar
    Adam Meehan

    Hey Andy!

    Thanks for your feedback. I'd like to go ahead and explore your issue with tags being added erroneously in the WYSIWYG editor and try to work toward a solution with you, however my findings are quite a bit longer than is usual for a Help Centre response so I've gone ahead and opened a new ticket for us to resolve it in.

    Have a great week,
    Adam

  • Avatar
    Julia Poulsen

    Was able to successfully change "Submit a request" to "Report and Issue" in the header using JS but cannot change the "Submit a Request" text on the body of the submit a request page.

    I can't seem to find where to edit the HTML.

     

  • Avatar
    Jessie Schutz

    Hi Julia!

    You'll need to use the drop down menu at the top left of the theme editor and select the New request page.

    The exact line that bit of code will show up on will probably vary depending on the theme you're using. All you have to do is edit the bit inside the curly brackets:

    Just make sure that you're previewing that page as an End-user; otherwise you won't be able to see it.

  • Avatar
    Mark Johnson

    I think the anchor part of the guide needs updating, the 'name' attribute no longer works and we have to use 'id' attribute instead. 

    for example:
    An anchor should be marked up as {{<a id="fragment-name"></a>}}.
    It's hyperlink would be {{<a href="#fragment-name">Go to anchor</a>}}.

  • Avatar
    Chellie Esters

    @MarkJohnson when did you realize the 'name' attribute stopped working? I have tried using 'id' instead but because I use bootstrap popover links 'id' tags do not work properly.

  • Avatar
    Mark Johnson (Edited )

    Hey @Chellie, it was when we recently re-branded our help-centre, so i'm not sure if it's related to a newer theme that we're using or...? But our anchors stopped working - and were previously configured as described in the article. 

    My dev team gave me this info:

    "If I recall correctly, using the {{name}} attribute in anchors used to be the de facto way in the past (in earlier versions of HTML/XHTML) and may still be supported on older browsers. However, as browsers get updated over time, they begin to drop certain deprecated syntax; like the {{name}} attribute in {{<a>}} which no longer exists in the latest version of HTML.

    The way to mark up anchors in future would be to use {{id}} attribute instead of {{name}}.
    For example:
    An anchor should be marked up as {{<a id="fragment-name"></a>}}.
    It's hyperlink would be {{<a href="#fragment-name">Go to anchor</a>}}. "

  • Avatar
    Chellie Esters

    @MarkJohnson thanks for that info. Now that you've mentioned it, I do recall 'name' being identified as a depreciated HTML tag, which is what prompted me to research 'id' instead (months ago). There was something weird with using 'id' with Bootstrap popover links, which forced me to put it on hold.

    And yes, I agree, ZD's doc info needs updating.

     

  • Avatar
    Joe Bertoncin (Edited )

    I've added a border to my picture by editing the source code of my article. The border shows in Edit mode:

    However, when I publish the article, no border exists:

    This has been tested in the latest versions of Chrome, Firefox, and IE, with the same result.

    My source code:
    <img style="border: 1px solid black;" src="/hc/en-us/article_attachments/218308267/ExamplePicture.png" />

    Can anyone explain this phenomenon and describe a fix?  Thanks in advance.

  • Avatar
    Chellie Esters (Edited )

    @joebertoncin what code are you using for borders? (Edit: you updated your post with your code after I posted this, so I see it now.)

    Try this: <img style="border: 2px solid #b3b3b3;" src="/hc/en-us/article_attachments/0000000/yourimage.png" alt="Alt Title" width="xxx" height="xxx" /> (Edit: our code looks the same, you're not doing anything different.)

    Personally, I apply borders on the image itself and then import it with the border into the article. Border placement via HTML doesn't give me exactly what I want every time.

    Hope that helps.

  • Avatar
    Joe Bertoncin

    @chellieesters:

    Hello. Thanks for the tip, but I got the same result. Border shows in edit mode, but does not transfer when published.

    My preferred method is adding a border in the article because a border within the image can get ugly when the image is resized.

  • Avatar
    Chellie Esters

    @joebertoncin: That's odd because it showed up in publish for me.

    I found this article that states the border tag is depreciated. Maybe browsers are quietly updating code to get rid of them? The same issue popped up (right above your initial question) on the 'name' tag.

  • Avatar
    Joe Bertoncin

    @chellieesters

    Thanks. I may have to go to borders within pictures, after all. I appreciate your help.

  • Avatar
    Vanessa Zambale

    Embedding a video didn't seem to work for me. I was able to embed the video and it shows during edit mode, however, it doesn't show when I preview.

     



  • Avatar
    Debbie van Cleef

    Hi! I am confused about the editor in HelpCenter.

    In Communities (like this forum) users can format text using the Paragraph styles button. When editing an article in the Knowledgebase the editor is different. The only option to format text is by using the Sizes combobox. This doesn't give the <h2> tags we want.

    2  questions:

    1. Why do you use different editors between knowledgebase and communities?

    2. Viewing the source code should be an option to work directly with HTML tags. However the source code editor is very much unworkable. Especially with large articles. Isn't it possible to use colours to identify the different tags? Like in Notepad++?

     

     

  • Avatar
    Joe Bertoncin

    You should be able to edit your code in Notepad++, then copy/paste it into Zendesk. You'll lose any code formatting (indentations, e.g.), but the code should work.

    It's not a perfect fix, but at least you can make the task of editing easier.

  • Avatar
    Tiffany Phillips

    Hi,

    For all of you guys that are able to see your content when editing but not when published, make sure you're allowing unsafe content in your Help Center. As soon as I did all of my embedded PDFs displayed perfectly. (iframes)

    General > Help Center Settings > Display Unsafe Content

    Hope this helps!

    Tiffany

  • Avatar
    Nicole Relyea

    Thanks for sharing, Tiffany!

  • Avatar
    Paul Wanless

    I had a question about the customization of the current Help Center Source code editor. 

    Is there a way to prevent the <p> element from automatically wrapping other elements or removing additional elements? 

    This is an annoyance to customize some of the articles as there doesn't seem to be anything apparent to override this. Any help would be welcomed.

  • Avatar
    Khoa Cao

    Hi,

    I added a hyperlink with (href: TEL and SMS) by editing the source code of article, and links not work, please help.

    - <a href="tel:XXXX">XXXX</a>

    - <a href="sms://XXXX">XXXX</a>

    Thanks,

  • Avatar
    Vassilios Lourdas

    Hello, can't you implement an easier way to create anchor links without going to the HTML editor? :) Thanks!

  • Avatar
    Jessie Schutz

    Hi Khoa! Welcome to the Community!

    This is a really interesting question; I haven't actually tried to link to phone numbers in HTML before, so I had to do some poking around online. I learned today!

    What I was able to find out is that you need to format the number with a '+' and the country code. So, for a US number, I would code this is as:

    <a href="tel:+1-608-555-0000">Call us!</a>

    and

    <a href="sms:+1-608-555-0000>Text us!</a>

    Based on what I read, this should do the trick!

Please sign in to leave a comment.

Powered by Zendesk