What is CSS Snippets in Document360

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 Document360 Knowledge base site

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

You can find the Custom CSS and Custom JavaScript tabs, click the Custom CSS tab → and click the Snippets button right underneath it

A blade window opens on the right side, preloaded with seven basic snippets that you can use to customize your knowledge base site namely

Body font style

Heading format tag style

Change table styles

Align image center in documentation

Change Home page builder hero section

Change call-outs styles

Disable back to top

You can also use other snippets other than the predloaded Custom CSS snippet

for example, if you need to set a modification 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);

Click ctrl + S inside the Custom CSS code block to save the changes you made.

What is CSS Snippets

CSS Snippets

Why are CSS Snippets used?

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

What's Next