Custom CSS & JavaScript

Plans supporting the use of custom CSS and JS in Knowledge base site

CSS snippets

A snippet is a piece of reusable code, and a CSS Snippet "CSS (Cascading Style Sheets) + Snippet" is a set of utilities and interactive examples for CSS3. It helps create the frequently used layout templates. These are pre-written blocks of code that developers can quickly insert into their projects to achieve specific functionalities without writing the code from scratch.

These snippets help streamline the development process by saving time, reducing errors, and ensuring consistency across the codebase.

An example of a CSS snippet:

.shadow {
 box-shadow: 0px 5px 5px rgba(0,0,0,0.4);
 -moz-box-shadow: 0px 5px 5px rgba(0,0,0,0.4);
 -webkit-box-shadow: 0px 5px 5px rgba(0,0,0,0.4);
 }

The above CSS snippet can make borders and images stand out on your page.

Customizing CSS using CSS snippets

To customize CSS using CSS snippets, follow the below steps:

1. Navigate to Settings () > Knowledge base site > Customize site > Custom CSS & JavaScript in the Knowledge base portal.

2. In the CSS tab, you can add code snippets in two ways:

   a. Enter the code snippet in the text area.

   b. Click Add code snippets to add the preloaded snippets (7 preloaded snippets).

3. Once done, click Save or Ctrl + S to save the changes you made.

   For more information, read the article on CSS Snippets.

JavaScript snippets

A JavaScript snippet is a reusable piece of code written in JavaScript, typically used to perform specific tasks or add functionality to a web page. These snippets are often small, focused, and designed to be easily inserted into existing codebases.

Customizing JavaScript using custom JavaScript snippets

To customize JavaScript using custom JavaScript snippets, follow the below steps:

1. Navigate to Settings () > Knowledge base site > Customize site > Custom CSS & JavaScript in the Knowledge base portal.

2. From the left navigation pane, click on the JavaScript tab and paste the desired code in the JavaScript snippet.

   For example, to move the related articles above the feedback section in the Knowledge base site, paste the following code into the JavaScript snippet.  

window.onload = function () {
$(".content_block_text" ).append("<div class=\"sperator\"><hr></div>");
$('.related-articles-container').appendTo('.content_block_text') 
}

4. Once done, click Save.

Troubleshooting

Adapting custom code for the Single Page Application (SPA) model in Document360

With the transition of the Document360 website to a Single Page Application (SPA) model, any custom JavaScript dependent on page refresh events may no longer function as expected. This is because SPAs refresh only the article content, not the entire page.

Below are the areas where users can inject Custom JavaScript within the Document360 portal:

1. Custom JavaScript

   Navigate to Settings () > Knowledge base site > Customize site > Custom CSS & JavaScript in the Knowledge base portal.

2. Custom HTML Integrations
   Navigate to Settings () > Knowledge base site > Integrations > Custom HTML in the Knowledge base portal.

Recommended solution

To ensure compatibility with the SPA model, update your custom JavaScript to use the articleload event. This event triggers when the article content refreshes, ensuring your scripts work seamlessly in the new architecture.

1. Replace any code that relies on page refresh events with a subscription to the articleload event.

2. Use the following code snippet to adapt your custom scripts:

   window.addEventListener('articleload', function() {
     // Your custom JavaScript code here
   });

3. Test your updated scripts to confirm they function correctly in the SPA environment.

   If the issue persists after following these steps, please contact the Document360 support team for further assistance: Contact Document360 Support