- 06 Apr 2023
- 5 Minutos para leer
- Colaboradores
- Impresión
- OscuroLigero
- PDF
Design
- Actualizado en 06 Apr 2023
- 5 Minutos para leer
- Colaboradores
- Impresión
- OscuroLigero
- PDF
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 Settings → Knowledge base site → Design
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.
- Go to Settings → Knowledge base site → Design
- Hover over the default favicon and click on it
- 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
- You can see a preview of the chosen favicon on the Preview section
- Click Save
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
- Go to Settings → Knowledge base site → Design
- 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. In this layout option, you can choose between Small and Medium indent.
- Select the desired layout
- Click Save
Adding a logo
Replace the default "YourLogo" displayed in the top left of the knowledge base by uploading your desired logo.
- Go to Settings → Knowledge base site → Design
- 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
- Select YOUR LOGO or Image. Now, you can add the logo image in one of two options available:
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
You can add up to 30 characters.
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.
Adding logo URL
Add a clickthrough URL to your logo with the Logo URL. A user clicks the logo and redirects to the added logo URL.
- Go to Settings → Knowledge base site → Design
- Add the desired URL in the Logo URL field
- 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
Customize your knowledge base's primary and secondary colors to align with your brand.
Go to Settings → Knowledge base site → Design
Under Color, you can find the below two options:
Primary
Color of the top bar and logo text of the home page and documentation portal.
a. Click the Primary 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 sectionSecondary
Color of the dropdown and hover options.
a. Click the Secondary 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 sectionClick Save
Changing the hyperlink color
Customize the hyperlink colors in your knowledge base to enhance the user experience.
Go to Settings → Knowledge base site → Design
Under Hyperlink color, you can find the below three options:
Link
The default color of the links in your knowledge base.
a. Click the Link 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 sectionHover
Color of the mouseover hyperlink (under the mouse pointer)
a. Click the Hover 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 sectionVisited
Color of the hyperlink that has been visited recently
a. Click the Visited 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 sectionClick Save
Font family
You can change the fonts of your Knowledge base anytime. All the Paragraph content, left navigation pane (categories, sub-categories, article titles), and the Navigations (header, footer, menus, controls) All the Heading content with the H2, H3, and H4 tags.Body font
Heading font
- Go to Settings → Knowledge base site → Design
- Under Font family, you can choose the body and heading font. Click on the desired dropdown, and a list of available fonts will appear
- Select the desired font. You can see a preview of the chosen font in the Preview section
- Click Save
Can I upload a custom font family?
Document360 provides a list of common fonts used in documentation. However, you can configure your desired font in the knowledge base. For more information, check out our dedicated article: How to configure a custom font in the knowledge base?