Understanding Basic Customization


Written By Diego Selzlein (Administrator)

Updated at September 11th, 2017

Some themes support Basic Customization. This feature, allows you to easily change some basic layout details your Knowledge Base uses, like links and body colors.

If the theme you installed supports it, you'll be able to see this menu under Customize:

If you can see it, it means you can easily change basic layout configurations. You only need to change those fields and click on Apply and your Knowledge Base will have its layout updated.

How does it work?

If you look at your Main CSS you'll notice some SASS variables being used there, like in:

In this example, $links_color is a SASS variable and it will be set to the color selected in the Basic tab.

Here's the list of variables currently used by Helpjuice when compiling CSS:

  • $links_color: color set in Links field;
  • $titles_color: color set in Titles field;
  • $body_color: color set in Body field;
  • $background_color: color set in Background field;
  • $theme_color: base color for the theme. It's used in the header's background and some other places, like in buttons;
  • $body_font: Font Set on the Body Font field;
  • $titles_font: Font Set on the Titles Font field;
  • $brand_image_url: The URL to the image uploaded for the Brand Image field. It defaults to a Helpjuice provided sample image;
  • $back_image_url: The URL to the image uploaded for the Header Image field. It defaults to a Helpjuice provided sample image.

Be aware that:

  1. If you remove one of those variables from your CSS, its correspondent field will be hidden;
  2. If your theme does not support all of the available variables, they will be hidden from you in the Basic tab. If you add one of them to your Main CSS and refresh the page, they will be shown;
  3. Missing values (like a blank color field) will cause Main CSS to fail validation. You won't be able to save it.

Was this article helpful?