Design
  • 28 Jul 2022
  • 4 Minutes à lire
  • Contributeurs
  • Sombre
    Lumière
  • PDF

Design

  • Sombre
    Lumière
  • PDF

There is no French content available for this article, You are viewing the fallback version (English).

Design settings determine the look and feel of the knowledge base project, including adding a favicon, choosing the layout, logo, colors, and font family settings.

This is a project-level setting.


Accessing Design

Go to SettingsKnowledge base siteDesign

1_ScreenGIF-Changing_the_different_design_elements_in_your_Knowledge_base-min

Changing the Favicon

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. Go to SettingsKnowledge base siteDesign
  2. Hover over the default favicon and click on it
  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. You can see a preview of the chosen favicon on the Preview section
  5. Click Save
Pro-tip

Always use an image with minimalistic and square dimensions (in pixels).
Document360 resizes any image you upload to fit the canvas.


Changing the knowledge base Layout

  1. Go to SettingsKnowledge base siteDesign
  2. Under Layout, you can find Center layout and Fluid layout
    • Center layout will fit your content more to the center in a browser window
    • Fluid layout will extend your content to the edges of a browser window. You can choose between Small and Medium indent in this layout option.
  3. Select the desired layout
  4. Click Save

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

  1. Go to SettingsKnowledge base siteDesign
  2. Under Logo, select the desired checkbox. You can keep an image or text as the logo
    To add an image as the logo:
    • Select YOUR LOGO or Image. Now, you can add the logo image in one of two options available:
      • Using a URL: Paste the image URL from any external source and click Insert
      • Upload an image: Choose your file from the Drive or Upload an image from your local computer storage and click Insert
    • You can see a preview of the chosen logo image in the Preview section
    • Click Save

To add text as the logo:

  • Select the text checkbox and add the desired text

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

  • You can see a preview of the chosen logo text in the Preview section
  • Click Save
Character limit for logo text

You can add up to 30 characters.


Adding logo URL

Add a clickthrough URL to your logo with the Logo URL. When a user clicks the logo, it redirects to the added logo URL.

  1. Go to SettingsKnowledge base siteDesign
  2. Add the desired URL in the Logo URL field
  3. Click Save

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


Changing the color

Add primary and secondary colors to enhance the user experience in the knowledge base.

  1. Go to SettingsKnowledge base siteDesign

  2. Under Color, you can find the below five options:

    • Primary color

    Color of the top bar and logo text of the home page and documentation portal
    a. Click the Primary color palette
    b. Choose the desired color from the color picker or enter the desired Hex, RGB, or HSL color code
    c. You can see a preview of the chosen color in the Preview section

    • Secondary color

    Color of the dropdown and hover options
    a. Click the Secondary color palette
    b. Choose the desired color from the color picker or enter the desired Hex, RGB, or HSL color code
    c. You can see a preview of the chosen color in the Preview section

    • Link color

    Color of the hyperlink
    a. Click the Link color palette
    b. Choose the desired color from the color picker or enter the desired Hex, RGB, or HSL color code
    c. You can see a preview of the chosen color in the Preview section

    • Link hover color

    Color of the mouseover hyperlink (under the mouse pointer)
    a. Click the Link hover color palette
    b. Choose the desired color from the color picker or enter the desired Hex, RGB, or HSL color code
    c. You can see a preview of the chosen color in the Preview section

    • Visited link color

    Color of the hyperlink that has been visited recently
    a. Click the Visited link color palette
    b. Choose the desired color from the color picker or enter the desired Hex, RGB, or HSL color code
    c. You can see a preview of the chosen color in the Preview section

  3. Click Save


Font family

You can change the fonts of your Knowledge base anytime.

Body font

All the Paragraph content, left navigation pane (categories, sub-categories, article titles), and the Navigations (header, footer, menus, controls)

Heading font

All the Heading content with the H2, H3, and H4 tags.

  1. Go to SettingsKnowledge base siteDesign
  2. Under Font family, you can choose the body font and heading font. Click on the desired dropdown, and a list of available fonts appear
  3. Select the desired font. You can see a preview of the chosen font in the Preview section
  4. Click Save
Can I upload a custom font family?

Currently, there is no option to upload or use any custom OTF (OpenType), TTF (TrueType), or WOFF (Web Open Font Format) fonts available on the web or the local storage of your device.


Cet article vous a-t-il été utile ?