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
- 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.
- 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 π
- Customizing Feedback Icons Wanna change the look of your feedback buttons? You can with a little bit of JavaScript. π
- 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.
- Using HelpDocs with RTL Languages HelpDocs sets text direction for RTL (right-to-left) languages like Hebrew and Arabic. V5 templates flip the whole page for you. Older templates need a little code.
- 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.
- 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.
- Add HTML Before the Closing Body Tag Customizing your docs with JavaScript snippets and CSS is an awesome way to make them stand out. π¦
- 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. π·
- 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.
- Condense Top Article Spacing on Bars V4 This only works for the V4 Bars template, and this code is no longer maintained. V5 Bars already shows top articles in a row, so it doesn't need it. We strongly recommend upgrading to a V5 template iβ¦
- 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.
- Using Different List Styles Our default list schema is numbers > lowercase letters > lowercase Roman numerals. If you want to change that, you totally can.
- Making Video Embeds Responsive Videos you embed from YouTube, Vimeo, and other providers automatically fill the width of your article and resize with the window. No custom code needed.
- Stopping Video Embeds from Resizing Use the noresize class to maintain exact dimensions for embedded videos in your Knowledge Base articles.
- 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.