Code Snippets

Knowledge Base

Customizing your HelpDocs

Code Snippets

We get asked about customizing HelpDocs a lot, and our Engineers love to help. Here's some of the common CSS and JavaScript snippets we get requests for.

18 docs by 2 team members

Disabling Authorship and Updated Times

From our experience, customers love being able to see who updated an article and when. That being said, sometimes you might want to hide all that metadata away.

Getting Help with Code Snippets

HelpDocs comes packed full of customization options: CSS, Javascript and HTML. Our customers have built some amazing things with all three of these. If there's anything you want to customize, you probably can!

Making Tables Scroll When They're Too Wide for the Page

Gotta show a lot of data at once? Tables are a great fit. Except if you end up with a lotta data in your table, it might go off the page. Here's how to make the tables scroll.

Using a Background Image in the Header

When you set up your HelpDocs you'll get your primary color as the background for your header. Sometimes you might want to change this into an image. 📷

Stopping Video Embeds from Resizing

Use the noresize class to maintain exact dimensions for embedded videos in your Knowledge Base articles.

Making Video Embeds Responsive

If you're embedding videos from Youtube or Vimeo, you might find that they don't occupy the full width of the article. You can make these embeds fluid with a little custom JavaScript.

Using HelpDocs with RTL Languages

The HelpDocs text editor has a button you can click to switch text direction for RTL (right-to-left) languages like Hebrew. But there's some other parts of your template you'll want to edit to make everything appear in the right (pun intended) direction.

Condense Top Article Spacing on Bars V4

Our Bars V4 template has a large header to make the top articles stand out. If you want to make the header a little smaller you can add some code to condense it down a little so they appear side-by-s…

Adding Lightboxes to Images

Lightboxes allow your customers to expand an image or a GIF for a closer look. This might be useful for the little details they can't quite see without expanding or accessibility for people with vision impairment.

Overriding the Font on Your Knowledge Base

If you're looking to load a fancy new font of your own or simply want to make a small change to one element, you can override fonts on your knowledge base with a little CSS.

Making Your Printed HelpDocs Look Nicer

Users can print your articles using the regular browser flow (Ctrl/Cmd-P). You can make their printing experience nicer by adding a print stylesheet.

Disabling Top Articles

From our experience Top Articles are helpful for customers as they guide them towards the most useful articles. We don't offer a native way to turn them off, but you can hide easily with a little CSS.

Using Different List Styles

Our default list schema is numbers > lowercase letters > lowercase Roman numerals. If you want to change that, you totally can.

Disabling Related Articles

Related articles are calculated automatically and inserted at the bottom of your articles. We're always trying to improve the suggestions, but if they aren't what you'd hoped for, you can disable them completely.

How to Change the Logo Link

Navigation is a huge part of a successful knowledge base. Giving your users an easy way to get back to your company website or application is pretty crucial 🙃

How to Add Extra Spacing

HelpDocs is designed with usability and accessibility in mind, but there might be times where you want to add additional spacing between paragraphs or around images.

Add HTML Before the Closing Body Tag

Customizing your docs with JavaScript snippets and CSS is an awesome way to make them stand out. 🦄

Customizing Feedback Icons

Wanna change the look of your feedback buttons? You can with a little bit of JavaScript. 💅

A simple icon of a bookmark with a star near the bottom to represent a featured article A simple ribbon icon. It has a slightly rounded border and a star at the bottom of it. ​ Disabling Authorship and Updated Times

A simple icon of a bookmark with a star near the bottom to represent a featured article A simple ribbon icon. It has a slightly rounded border and a star at the bottom of it. ​ Getting Help with Code Snippets

A simple icon of a bookmark with a star near the bottom to represent a featured article A simple ribbon icon. It has a slightly rounded border and a star at the bottom of it. ​ Making Tables Scroll When They're Too Wide for the Page