Applying Custom CSS to Your Help Center


 
Ivan Penchev
Last Updated: 3 months ago

Sometimes the default options for customization won't be enough for you and you would like to do something more, something beyond what's supported. That's where the custom CSS option comes into place. In this article, we will see how you can customize your help center even further by supplying some custom CSS.

Note that the following article needs you to have some skills in writing CSS, so if you don't have such, you may need to find a developer or write us so we can help you with your customization endeavours.

How do you find what is the element to apply style to?

In order to be able to create your custom CSS, you will, of course need to know the selector of the elements you would like to customize. Here I will list the most common ones and their respective selectors at which you should apply your custom style.

  • Header -- .jumbotron
  • Search Field -- .search-field
  • Search Bar Button -- .search > .input-group-addon
  • Logo -- .navbar-brand
  • Category Boxes -- .category-box
  • Footer -- footer

More info about the element selector you could find by using the "Inspector" in "Developer Tools" of your browser and inspecting the element you are interested in.

Where do you place those styles?

In the customizer, you should go to the "Style" section:

Customizer
Customizer "Style" section

At the bottom of which you will find the "Custom CSS" editor. This is the place where you will be writing you custom CSS rules.

Custom CSS editor
Custom CSS editor


Recommended Articles


Was this article helpful?


Can't find what you are looking for? Don't worry, you can always Ask Us