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.

Why are CSS Snippets used?

CSS Snippets, or any code snippets, are used to save time in development.

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 your borders and images stand out on your page.

Steps to customize CSS using CSS snippets in the Document360 Knowledge base site

  1. In the Knowledge base portal, click Settings → Knowledge base site → Custom CSS and JavaScript

  2. You can find the Custom CSS and Custom JavaScript tabs, click the Custom CSS tab → and click the Add code snippets button right underneath it

  3. A blade window appears, preloaded with seven basic snippets that you can use to customize your knowledge base site namely,

  • Body font style
  • Heading tag font style
  • Change table styles
  • Align image center in documentation
  • Change Home page hero section background
  • Change call outs styles
  • Disable back to top

You can also use other snippets other than the pre-loaded Custom CSS snippet .

For example, if you need to make modifications to your images and borders, you can use the below snippet inside your code block

.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);
  1. Click Ctrl + S inside the Custom CSS code block to save the changes