How to Enhance Appearance of Your KB Using CSS

Enhance the appearance of your Knowledge Base site with Cascading Style Sheets (CSS). Customize colors, fonts, and layouts to create a visually appealing and unique experience.

Here is an example of a site powered by ProProfs Knowledge Base using custom CSS styles:

The site has modified the color scheme, fonts, and other visual aspects to overhaul the look and feel of the standard ProProfs Knowledge Base product.

CSS has several benefits:

• It allows you to store style presentation information (such as colors, fonts, layout, etc.) separately from your HTML structure.

• It gives you precise control over your page’s design and format.

• It reduces the use of code, thus enabling fast page speed.

• It allows responsive web designs for a better user experience across devices.

This article covers the following:

• Supported CSS Types
• Add or Edit CSS
• Applying CSS Styles
• Styles and Format Drop-Downs
• Changing the Default Font
• Reverting to the Default CSS
• Multiple Sites and CSS

Supported CSS Types
 

ProProfs Knowledge Base supports CSS integration in various sections to give you maximum control over your site's appearance. Here’s where you can apply CSS and what it affects:
 

1. Page-Specific CSS
    

   • Path: Edit page > Toolbar > Insert > CSS Editor.
   • Use this for styling text paragraphs, headings, tables, or other elements on a specific page or folder.
   • Changes made here will apply to all pages or folders within the specific site you are working on.
     
     
     
     
      

2. Header CSS
    

   • Path: Settings > Branding > Custom Header > CSS.
   • Write CSS specifically for your custom header design.
   • These styles apply exclusively to the current site and allow you to keep header-specific CSS organized.
     
     
     
     
      

3. Site CSS
    

   • Path: Settings > Branding > Advanced > Site CSS.
   • Use Site CSS to override default app CSS for specific customizations, such as:
     • Hiding elements.
     • Modifying the Table of Contents (TOC).
     • Styling buttons or adjusting settings.
   • These changes apply only to the current site and will not affect the page layout or header.
     
     
     
     
      

4. Global CSS
    

   • Path: Settings > Branding > Advanced > Global CSS.
   • This section works similarly to Site CSS but applies to all sites under your account.
   • Ideal for maintaining consistent styling across multiple sites.
     
     
     
     
      

5. Tooltip CSS
    

   • Path: Edit Tooltip > CSS.
   • Use this section to override existing tooltip styles for customized pop-up designs.
     
     
     
     
      

6. Help Widget CSS
    

   • Path: Settings > In-App Help > CSS.
   • Customize styles specifically for the help widget on your site.
     
     
     
     
     
      

Add or Edit CSS

Step 1: Click "Insert" and select "CSS Editor" from the dropdown menu.

Step 2: An overlay will appear displaying your site’s CSS. You can add or edit the CSS as you wish.

The CSS file comes with the system’s default style. However, you can modify any of these styles.

It includes:

• The default font style: body {}

• Bullet and list styles: ul {}, li {}, ol {}

• Table styles and classes

• Horizontal Rule: HR {}

• Hyperlink colors and styles: a{}, a:link, a:visited, a:active, a:hover {}

• Styling for the home page: #startcontainer {}

You are allowed to change any of the default CSS. You can also add more CSS styles and classes to control the layout of any page.
 

Applying CSS Styles

You can manually apply CSS to different page elements such as Image(s), Link(s), and Table(s), among others.

To apply CSS:

• Double-click on the element and go to the Advanced tab.

• Enter the CSS class name or ID you want to apply to the element.

Below is an example of an image:

Styles and Format Drop-Downs

The CSS powers the toolbar’s styles, format, and other options. If you want to change the formatting, such as the fonts, sizes, colors, etc., you must do it in the CSS.

Below is the mapping of Styles elements in the CSS.
 

Below is the mapping of Format elements in the CSS.

Changing the Default Font

You can change the default font for all pages using the steps below:

1. Click "Insert" and select "CSS Editor" from the dropdown menu.

2. Locate the body {} class at the top of the list.

3. Locate the font family attribute and font size as highlighted below.

4. Make the change and click OK.

Here are some web-safe font options for COPY and PASTE :

• font-family: Verdana, Geneva, sans-serif
• font-family: Georgia, “Times New Roman,” Times, serif
•  font-family: Arial, Helvetica, sans-serif
• font-family: Tahoma, Geneva, sans-serif
• font-family: "Trebuchet MS", Arial, Helvetica, sans-serif
• font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif

You can also follow this guide for changing the paragraph and heading styles.
 

Reverting to the Default CSS

If you break or damage the CSS code, you can click Revert to default CSS to restore the CSS to the original setting.

1. Click Revert to default CSS and hit OK.

2. Refresh the page to restore the original CSS setting.

Multiple Sites and CSS

Each site you create will have its separate CSS styles. Sites do not share CSS styles.

If you want to use the same CSS styles from a site you already created, you will need to copy the CSS from one site and paste it to the new site.

That is all about modifying CSS styles in ProProfs Knowledge Base.