You may have uploaded a custom image to be used as your Knowledge Base logo. However, it looks too small when used on your Knowledge Base. Let's find out how to make it look better.

1. Rules for a good Knowledge Base logo

A good Knowledge Base logo should:

Be simple, and contain a single line of text
Every component of the logo should hold on the same vertical line (eg. actual logo icon and company name text)
Be much larger in width than in height

As to guarantee the visual structure of your Knowledge Base, we have to put a hard constraint on your logo height. If the height was allowed to grow dynamically, some items could get wrongly aligned vertically (ie. the Knowledge Base menu).

2. Customize the logo height with CSS

If you are unable to come up with a better logo image using Section 1 recommendations, you can still customize the logo height using CSS.

Crisp Knowledge Base lets you customize the Knowledge Base CSS. This lets you fine-tune the design of some Knowledge Base elements, such as the header logo container.

To customize your Knowledge Base CSS, you may follow those steps:

Go to: https://app.crisp.chat
Go to your settings: click on the settings icon
Click on "Knowledge Base"
Click on "Customize your Knowledge Base"
In "Include custom HTML code", click on "Edit included HTML code"

In the modal that opens, you may paste the following HTML code, used to override the header logo height via CSS (adjust it to what looks better for you):

<style type="text/css">
  .csh-header-main-logo img {
    height: 40px !important;
  }
</style>

Updated on: 17/02/2025