US English (US)
BS Bosnian

Contact Us

If you still have questions or prefer to get help directly from an agent, please submit a request.
We’ll get back to you as soon as possible.

Please fill out the contact form below and we will reply as soon as possible.

  • Book a Demo
  • Product Updates
  • Contact Us
English (US)
US English (US)
BS Bosnian
  • Home
  • Customization
  • Customization Guides
  • Advanced Customization

Adding Custom CSS

Contact Us

If you still have questions or prefer to get help directly from an agent, please submit a request.
We’ll get back to you as soon as possible.

Please fill out the contact form below and we will reply as soon as possible.

  • Getting Started
    Users Accessibility New to Helpjuice? Start Here Content Management Multiple Languages/Translations & Localization Multilingual Knowledge Bases Analytics Video Tutorials
  • Customization
    Customization Guides
  • API V2
  • API V3 and Webhooks
  • Article Editor
  • Billing / Subscription
  • Authentication
  • Pricing
  • Swifty AI Chatbot
  • Swifty AI Helpbar
  • What's New
+ More

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!

css how to edit how to css designing customization custom css

Was this article helpful?

Yes
No
Give feedback about this article

Related Articles

  • Integrating Your Knowledge Base With Your Ticketing System
  • Shopify/Liquid Variables and Objects Reference

Copyright © 2025 - Helpjuice

Helpjuice, Inc. is a registered US Corporation, EIN # 45-2275731

Download W9
  • Help
  • Features
  • Pricing
  • About
  • Careers
  • Customers
  • Blog
  • Case Studies
  • Resources
  • Knowledge Base Examples
  • Privacy Policy
  • Terms of Service

Why is the knowledge base important?

With a knowledge base, you can allow your customers to self-help themselves, thus reducing your customer support by up to 60%. Furthermore, you can also have your team get instant answers to the questions they need without having to email themselves all using knowledge base software.

What is the purpose of a knowledge base?

The purpose of knowledge base software is to allow you to host your knowledge base/corporate wiki in one centralized 'hub'. Both your customers, and employees can now access information within seconds!

Made with from Miami, Bosnia, Morocco & Brasil

+1 (833) 387 3877 support@helpjuice.com
Expand