Document360’s Feature Spotlight – How to Add Custom CSS and JavaScript to Your Website

Customize your website’s style and enhance specific parts of your site, using custom CSS and JavaScript. Document360 gives you the capability to customize your knowledge base website in the settings section with three different options.

• Custom CSS
• JavaScript
• Custom Tags

Having your Knowledge Base look and feel like as similar as possible to your own main site makes the process of moving your customers across seamless Have a look at the below video on how Document360 allows you to customize your knowledge base website.

How to find the selector name?

First, you should know the selector name (Ex, Class or ID name of the div) to change the “Style”. Now you can choose the section that you want to change and then right click to Inspect. In the DevTools window, you can easily view the selector name and the default CSS. At this point, you will now know the selector name and then you can write your custom CSS in the Settings section to customise it as required.

Change the Color or CSS style

If you would like to change the color or style of your knowledge base website, you can write your Custom CSS in this section. Your custom CSS would be included in the HTML, just before ending head tag. You should paste all the customized CSS code on the Custom CSS page in Settings.

Make changes on the Landing page

For example – To change header title, font size, font family and the color on the landing page

.landing_top h1 {
font-size:3.5rem;
color: #0035ff;
font-family: "Comic Sans MS";
}

The above CSS will change the size of the Landing Page Header text to a larger size and color of the text will be blue.   For example – To change the landing page header background color ( below code specifies a gradient shade, but the solid color is also possible) and font color.

.landing_top {
background: linear-gradient(135.94deg, #134660 0%,#005a7e 37.15%,#1c738b 54.98%,#55a6a6 100%) !important;
color: #fff4cc !important;
}

 

Documentation Website Changes

We are using the font “Source Sans Pro”, except for headings, For the headings, we are using the font “Montserrat”, If you want to change the font-family for the knowledge base, please change the body CSS according to your company’s font by using the below – customized code.

body {
font-family: "Courier New";
color:#222222;
}

  Similarly, if you want to change the Heading of the article font, you can change the code from the below- mentioned tags according to your size.

h1, h2, h3, h4, h5, h6 {
font-family: " Impact", sans-serif;
}

 

Adding a Custom JavaScript Widget

In this custom JavaScript section, you can insert custom scripts to your knowledge base website. Your custom java scripts would be included in the HTML, just before ending head tag. For example – To display an alert box after the page load.

$(document).ready(function(){
alert("Hello! I am an alert box!");
});

Adding Custom Tags

Custom Tags allows you to give your custom JavaScript and external libraries. Document360 gives you three options to include your scripts in the below sections:

• Header
• Beginning of body
• End of body

The Scripts or the external libraries URL that you add in a specific Custom Tag section will be reflected in the respective section of the HTML. For example – To include Fresh Chat in your knowledge base. Check out this article for a detailed look at how to include Fresh Chat by adding Custom Tags So, go ahead and customize your website landing pages and articles with CSS and JavaScript in Document360 today and let your customers have a great user experience.