Each Helpjuice knowledge base is different from one another. Some are actionable, focusing on a auto updating top FAQ. While others are more search driven with the search bar in the center stage. Adding custom CSS helps customize your account. 

There are a few possible ways to edit your Knowledge base CSS. Helpjuice is using three CSS files with its main CSS file called  question.css, which is used for page layout and style. The other two files are CSS framework (file: screen.css) and default template style (file: cube-theme.css). 

Variety of ways to add custom CSS

1. Uploading CSS file

If you want to keep some of already existing styles you can override CSS values by placing your own CSS file below these CSS files inside Customize -> Main Layout page.

2. Inline CSS method

Second method to add custom CSS is using the  inline CSS method. This means that you won't need to upload a file every time you want to change something, all you would need to do is change values inside the editor. Below is an example of inline method for editing CSS. You can insert this CSS just above closing head tag inside Main Layout page.

<!-- My custom CSS -->
<style>
body{color:red;font-size:15px}
.myDiv{background:red}
</style>
<!-- End of my custom CSS -->
</head> <!-- this is closing head tag -->

3. NEW: Using our CSS Editor

Newest, easiest and most recommended way to add CSS is using our CSS Editor, which can be found in Customize -> menu on the left side.

Note: For accounts created before 1st December 2014, you would need to link or include file inside Main Layout to connect CSS written in CSS Editor with your knowledge base. All account created after 1st December 2014 will automatically have that file includes in Main Layout. In the next few steps we will explain how you can link CSS Editor with your knowledge base.

1. Write some CSS in CSS Editor

2. Open Main Layout page and locate closing </head> tag

<!-- this is where new code should be inserted -->
</head>

3. Just before closing head tag add "link" tag with source of CSS Editor file

<!-- CSS Editor style -->
<link href="/assets/main.css" rel="stylesheet">
</head>

All you would need to do next is click Save button and open your front-end or visitors side of knowledge base. Can you see the difference? If you do, than you successfully linked CSS from CSS Editor with your knowledge base.

And now all is left is you to add CSS code to your knowledge base and to customize it. If you are our customer than we can customize your knowledge base for free! All you would need to do is  contact us and we will be more than happy to do customization for you!