Customize site

Updated
  • Updated on Feb 7, 2025
  • Published on Jan 2, 2025
  • 11 minute(s) read
  • Janeera D A
  • Charulatha Ravichandran
  • Manoharan Soundarraj

Plans supporting customization of Knowledge base site

Professional
Business
Enterprise






In your Document360 project, you can manage your Knowledge base site design and customization from the unified Customize site feature. Customizing the appearance and functionality of your knowledge base is crucial to creating a seamless experience for your users. Document360's Customize Site feature allows you to tailor your knowledge base site to align with your brand identity and user preferences. Whether it's selecting themes, adjusting colors, or personalizing layouts, these customization options empower you to create a site that is not only visually appealing but also accessible and user-friendly.

Imagine managing a SaaS product’s support documentation. With Customize site, you can match your brand’s colors and logo, ensure accessibility using auto color contrast, and personalize layouts for better navigation.

For your information (FYI)

This enhancement is available in KB Site 2.0. To migrate from KB site 1.0 to KB site 2.0, read the article on KB site 2.0 migration.

NOTE

Customize site is a project-level setting. The changes will reflect in the entire project.

Basic site customization

To perform the basic customization:

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

    The page holds all the basic site design configurations.

  2. You can choose one of the three options to set the theme for your knowledge base site from the Site theme field:

    • Both Light & Dark

    • Light only

    • Dark only

  3. In the Branding section, you can choose a Logo and Favicon. Additionally, you can set a custom redirection link for the logo. When a user clicks the logo on your Knowledge base site, they will be redirected to the specified link, such as your company website or a specific landing page.

    NOTE

    Customers who already have a customized logo and favicon will not be affected until they navigate to the Customize site settings and save the changes.

  4. In the Colors section, select the Auto set color contrast to meet WCAG standards checkbox to apply the colors based on your brand to your site elements automatically.

    NOTE

    For more information, read the article on Web Content Accessibility Guidelines (WCAG).

    1. In the Brand color section, you can choose a primary color for CTA's, selection states, and more.

    2. In the Hyperlink color section, you can customize the color of hyperlinks in your knowledge base to enhance the user experience. Under this option, you can choose from the three radio options:

      • Use industry standard: Applies a commonly used hyperlink color

      • Use brand color: Applies the same color you chose from the brand color

      • Use a different color: It allows you to select default, hover, and visited colors for hyperlinks.

    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.

  5. In the Fonts section, you can change the fonts of your Knowledge base content anytime.

    There will be two sub-sections:

    1. Article font paring: This font will be applied to all your article titles and contents.

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

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

  1. In the Styling section, you can choose the style for the buttons and form elements. The three options available are:

    • Rounded

    • Sharp

    • Bubble

  2. In the Site layout section, you will find two options:

    • 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. Once done, click Save.

Configuring the basic customization for the Knowledge base site.

Advanced site customization

Personalize your website by incorporating branding elements, header and footer sections, homepage, login page, and error pages in one central location.

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

    The page holds all the basic site design configurations.

  2. Click Customize site.

  3. From this section, you can configure the following site elements:

    The changes you apply on the left section can be previewed on the right window. To edit specific element, click on the desired item in the Preview window. The corresponding settings will appear in the left panel.

  4. Use the dropdown to choose the different pages.

    The new interface for the Home page builder provides easier navigation and customization for each section of the homepage.

  5. Click the Save button at the top right to save your changes.

  6. Click Preview to get a glimpse of how your site looks.

  7. Click Publish to commit all the changes you have made.

Configuring the advanced customization for the Knowledge base site.

FAQs

How do I change the site theme?

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

How do I change the Favicons?

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.

Why is the favicon added not rendering on the Knowledge base site?

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.

How do I change the site logo?

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.

How do I add text as the logo?

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.

How do I add custom logo URL?

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.

How do I set a different logo for different themes?

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');
}

How to choose the brand color?

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.

  1. Once done, click Save.

How do I choose font family in customize site?

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).

  1. 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?

How do I change the default paragraph style?

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.

How do I change the button styles?

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.

How do I change the site layout in customize site?

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.

  1. Click Save.

How do I set the default font for my articles on the Knowledge base site?

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?

Related articles