HelpSite Support Center

Contact Us

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:

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: