The Customize your Knowledge Base page (https://app.elev.io/kb/customize) enables you to change the HTML, CSS, and JS of the Hosted Knowledge Base to make it look exactly how you like.

Please note, this feature is only available on the Regular Plan and above.



https://cdn.elev.io/file/uploads/p31zYIXbqva6xPpHQh2AIED3E1XMsHXSx5sqD_tcLUk/eErntqKNilghGc_xVYxETy6iGCuh8YK5k6ZX6ycFlBo/Slack - elevio-2018-01-30 14_28-HBY.png

Customizing its Style

Updating the Default Look of the Knowledge Base

To change the colors of the main elements on the page, choose your desired colours in the color palette menu.

To add additional styling customizations to the default header, simply scroll down a little bit to toggle on the option "Enable Custom Styling".

In the CSS block below the toggle, you can now add whatever CSS you want to update the look of the existing header. 

For example, this is the CSS we have in the CSS section. 

.header h1 a {
    display: inline-block;
    text-indent: -100000px;
    background-image: url(http://www.yoursite.com/logo.png);
    height: 40px;
    width: 140px;
    background-size: contain;
    background-repeat: no-repeat;
}

This CSS updates the link to our site in our Knowledge Base's header to a logo of our site, as seen here:


Replacing the Default Header or Footer

If you would like to replace the default header or footer, enter in your own HTML in the respective section 

N.B. The default header is the section above the Search Bar.