Custom HTML/CSS
HelpSite gives you a simple and effective design out-of-the box, with no customization or knowledge of HTML required.
However, we also have advanced customization features to help you fully design your hosted knowledge base however you'd like, to match your organization's brand. You can change the layout through our "Layout & HTML" feature which allows you to add or change the HTML, CSS, and JavaScript used to render your site.
To get started with these features, just signup/login to HelpSite and visit Customize > Layout & HTML.
These features are available during the free trial period, however beyond that they require our Gold plan. See pricing.
We support the following use cases:
- Design the look-and-full of your help site to your liking, to match your company's brand
- Tweaking the styling of your logo to the header or footer
- Drop in your own analytics tracking system code like Google Analytics
- Changing the English snippets to customize text or translate your site into other languages
- Add commenting functionality to each article
- Add a live-chat feature like Olark, LiveChat, etc.
- Change the number of articles displayed on the home page per category
- ... and many more!
The templating uses a language called Liquid. Consult the Liquid templating guide for reference or keep reading below for examples how other other customers have customized their sites. Contact us if you need help!
Customizing CSS
The customization feature described above can be used to completely redesign the entire look-and-feel of a HelpSite, or it can be used to simply tweak a single thing, such as a font, color, etc.
To override our existing CSS, you would just add a <style> tag in the <head> of the Main Layout. You would generally want to put this after the {{ header_core_css }} tag (e.g. immediately above the closing </head> tag, as shown below).
A simple example of just changing the color of links would look like this:
If your CSS doesn't seem to be taking effect, keep in mind the rules of CSS specificity. You can override styles by adding !important, or you can do so without !important as long as you use an equally or higher level of specificity in your selector and apply your styles after our default styles. You can do that either via an inline style="..." attribute, with a <style> tag in the head as shown above, or link an outside hosted CSS file (via <link rel="stylesheet" type="text/css" href="https://example.com/helpsite.css">)
You can use the Google Chrome Inspector or similar tools to inspect our default styles and to find specific CSS class selectors that you may want to extend.
Customizing default strings
Virtually all of the predefined text messages in HelpSite can be easily changed using this feature.
However see also Customizing text in the template for tips on changing the text on a few specific places.
Customization Examples
To help you get an idea of what's possible, here are a few example customers that have customized the look-and-feel of their knowledge base with HelpSite: