Customize site

You can change the Knowledge base site theme by following the below steps:

1. Navigate to Settings () > Knowledge base site > Customize site in the Knowledge base portal.

2. In Site theme section, you can choose from three options:

   • Both Light & Dark

   • Light only

   • Dark only

Favicon (short for favorite icon) is a small icon, usually 16x16 pixels, used by web browsers to identify your website. The favicon appears in the browser tab for the website, the bookmarks list, and the browsing history list.

1. Navigate to Settings () > Knowledge base site > Customize site in the Knowledge base portal.

2. In the Branding section, hover over the default favicon and click Click to change on Favigon.

3. Now, you can add a Favicon in one of two options available:

   • Using a URL: Paste the image URL from any external source and click on Insert.

   • Upload an image: Choose your file from the Drive or Upload an image from your local computer storage and click Insert.

4. Click Save.

PRO TIP

• Always use an image with minimalistic and square dimensions (in pixels).

• As a best practice, ensure your favicon is sized at 48 x 48 pixels for optimal rendering across platforms.

This issue could be faced when the favicon added does not meet the specified criteria, including size and format. Make the necessary changes to the favicon or try re-uploading it on your Knowledge base site.

Replace the default Logo displayed in the top left of the knowledge base by uploading your desired logo.

1. Navigate to Settings () > Knowledge base site > Customize site in the Knowledge base portal.

2. In Branding section, hover over the default Logo and click Click to change.

3. Now, you can add a Favicon in one of two options available:

   • Using a URL: Paste the image URL from any external source and click on Insert.

   • Upload an image: Choose your file from the Drive or Upload an image from your local computer storage and click Insert.

4. Once done, click Save.

You can add a text as the logo by replacing the default logo displayed in the top left of the Knowledge base.

1. Navigate to Settings () > Knowledge base site > Customize site in the Knowledge base portal.

2. In Branding section, click Don't have a logo? Use name instead.

3. Enter the desired text in the input field.

   For example, you can add a company name or tagline instead of a logo image.

4. Click Save.

NOTE

You can add up to 30 characters for logo text.
The maximum size for a logo is:
Height - 40 px
Width - 270 px
When you upload a logo with a bigger size, the logo size will be scaled down and kept within the maximum size.

For example, uploading a logo with a size 500x1000 px (height x width) will be scaled down to 40x80 px.

Add a clickthrough URL to your logo with the Logo URL. A user clicks the logo and redirects to the provided link.

1. Navigate to Settings () > Knowledge base site > Customize site in the Knowledge base portal.

2. Add the desired URL in the Logo URL field.

3. Click Save.

NOTE

• If you do not add a logo URL and a user clicks the logo, it redirects to the Knowledge base home page.

• Custom logo URL is an optional field.

If you're using a KB site 2.0 project, you can add custom code to set different logos for light and dark themes.

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 CSS tab and paste the following CSS snippet:

.brand-logo img {
    content: url('Paste the Light mode logo URL here');
}

/* Override logo image when the theme is set to "dark" */
html[data-bs-theme="dark"] .brand-logo img {
    content: url('Paste the Dark mode logo URL here');
}

To choose the desired brand color for your Knowledge base site, follow the steps below:

1. Navigate to Settings () > Knowledge base site > Customize site in the Knowledge base portal.

2. Under Colors, you can choose the color for Brand color. This will be used as a primary color for CTA's, Selection states, and more.

NOTE

If you have chosen the option Auto set color contrast to meet WCAG standards, both light and dark theme colors will be set automatically. Otherwise, you need to manually set colors for each theme.

3. Once done, click Save.

To change the fonts of your Knowledge base, follow the steps below:

1. Navigate to Settings () > Knowledge base site > Customize site in the Knowledge base portal.

2. Under Fonts section, there will be two sections: Article font parsing and Site font.

• Article font paring: This font will be applied to all your article Titles and Contents.

NOTE

Click Have a specific font combination in mind?, to select more font options. By clicking it, you can choose the font for titles and content.

• Site font: Select the font in the dropdown. This will be applied throughout the Knowledge base site. It includes the left navigation pane (categories, sub-categories, article titles) and the Navigations (header, footer, secondary navigations, controls).

3. Select the desired font and click Save.

NOTE

Document360 provides a list of common fonts used in documentation. However, you can configure your desired font in the knowledge base. For more information, read the article on How to configure a custom font in the knowledge base?

Currently, there is no direct option to change the default paragraph style. However, you can change the default article font in the Document360 editor.

To set the default font for your articles:

1. Navigate to Settings () > Knowledge base site > Customize site in the Knowledge base portal.

2. In the Fonts section, choose your desired font pair in the Article font paring tile. This font will appear in the Knowledge base articles.

   For instance, if you draft content in Verdana in the Knowledge base portal but select Ubuntu + Open Sans in the Article font pairing, in the Knowledge base site, the article title will appear in Ubuntu, and the article content will be in Open Sans.

NOTE

You can also select your custom font for your articles. For more information, read the article on How to configure a custom font in the knowledge base?

To change the paragraph style for individual articles:

1. Open the desired article in the Advanced WYSIWYG editor and select the text.

2. Click Format, then choose a font style in the Typography section.

To change the button styles of your Knowledge base site, follow the steps below:

1. Navigate to Settings () > Knowledge base site > Customize site in the Knowledge base portal.

2. In the Styling section, you can select the button style from the options such as rounded, sharp, and bubble.

To change the site layout in customize site, follow the steps below:

1. Navigate to Settings () > Knowledge base site > Customize site in the Knowledge base portal.

2. Under Layout, you can find the Full width and Center.

• Full width: Full width will extend your content to the edges of a browser window.

• Center: The center layout will fit your content more in the center of a browser window.

3. Click Save.

To set the default font for your articles:

1. Navigate to Settings () > Knowledge base site > Customize site in the Knowledge base portal.

2. In the Fonts section, choose your desired font pair in the Article font paring tile. This font will appear in the Knowledge base articles.

   For instance, if you draft content in Verdana in the Knowledge base portal but select Ubuntu + Open Sans in the Article font pairing, in the Knowledge base site, the article title will appear in Ubuntu, and the article content will be in Open Sans.

NOTE

You can also select your custom font for your articles. For more information, read the article on How to configure a custom font in the knowledge base?