Knowledge base styles

[radko]

Hi!
Is there any way how to modify CSS of the knowledge base like used font family?
Thanks!

[roisinkirby · Accepted solution]

This conversation is around the tool as it is built currently; if you would like to upvote the ability to further customize this tool going forward, please visit our ideas forum, including this idea.

Hey @radko at this time the Knowledge Base can only be customized in the following ways:

Click the Customize tab to edit the appearance of your knowledge base:

• Navigation bar - here you can customize the way your knowledge base appears in a web browser:
  •  Favicon - the small image that appears at the top of the browser tab.
  • Company logo - your knowledge base logo image.
  • Name your knowledge base -what you want your knowledge base to be called, e.g., Help Center or Knowledge Base.
  • Company website URL - the link for your company website, this will be linked to your logo image.
  • Text link to your company website -  this text will appear in the upper-right corner of your knowledge base, linking to your Company website URL.
  
• Header - this is the content that appears in the top section of your knowledge base website:
  
  • Welcome message - this displays above the search bar on your knowledge base home page.
  • Header color - select a color bubble or use the color picker to enter or select a custom color. This color will fill the space behind the search bar.
    
  
  • Header background image - in place of a Header color, you can upload your own background image to fill the space behind the search bar. Click Browse images to choose an image from your file manager, or Upload to select a new image from your computer.
• Links - this color will be used for any text links throughout your knowledge base.
• On the left side of your Customize settings, you'll see a live preview of how your knowledge base will appear on different device types. Use the tabs to adjust the preview and see how your knowledge base will appear on different device types. This preview will update with all your changes in real time.

 

Please be advised that while there are no public roadmaps at this time this is a brand new tool that HubSpot will be constantly improving and expanding based on feedback.

[Gonzalo]

@roisinkirby solution is the good way to start. @radko there you can customize some basic properties that will give you some similar look to your corporate website.

But if you want go deeper in the customizations you can connect to your portal by FTP and go to:

/portals/yourportal-withcustomerHub/content/templates/CustomerHub/KnowledgeBase/Assets/kb-style.css

That file is loaded in the Knowledge pages so you can improve the appearance there.

Take in count that this service is in beta and there is no documentation about editing this file so that can be overwritten at some point if they launch a new update.

[Kristen]

Just spoke to a client who wishes the KB to be available as a template in design manager. It is important for a client to have all of their pages with a similar look and feel. Right now, it is not as seamless as there is quite a bit of difference in styling. 

[huddlehouse]

Hey Kristen! This week I noticed that in the Design Manager there are Knowledge Base components you can now add to templates. When you look at the dependents for the components you can actually open the components/pages for the Knowledge Base...

I asked support about them and they said this is not an upcoming feature and they don't know what I am able to see them. Do you have any insights?

[sid_appbase]

@roisinkirby Any updates here? There is a very simple solution, use better fonts/styles. I have asked this to support multiple times over the last six months, and they point me to this article. It would be great if you can nudge the team to improve the fonts used in the article.

It is uninspiring to create articles when they look this bad. Here's the CSS snippet that improves the font.

.kb-article p,
.kb-article div {
    font-family: "proxima-nova", "Helvetica Neue", Helvetica, Arial, sans-serif;
    line-height: 1.53;
    margin: 0 0 .625rem;
    font-size: 17px;
    color: #565867;
    margin-bottom: 17px;
}

At the very least, can you provide a way to update these by designer templates or FTP?

@Gonzalo I was trying the FTP solution you recommended, but it looks the file paths have changed, and I wasn't able to write anything back. Do you have any workaround for this currently?

[fwchris]

I just had a talk with my support agent today.

It's not only "uninspiring" as another commenter put it; it's absolutely disingenuous when we see how nicely the Hubspot articles appear right in the chat window, and in the browser and compare it to what we as paying customers get. 

I counted 3 different fonts (2 san serif and 1 serif), and the article body font looks like the default Times New Roman font. At first, I thought that my pop-up blocker had killed whatever was controlling a style sheet or something. Then I realized that there was no way to edit the font in the Knowledge Base. I'd be happy to have at the very least the  basic Hubspot font as a default available. 

It's mind-boggling how something so basic is not even offered, whereas solutions like Zendesk's Knowledge Base and Intercom's Articles (example), cover this.

[crmal91]

This really is a feature we would like to see introduced.  The current font option looks horrendous.  We were able to change the fonts in some of the marketing products such as the blog we created.  We should be able to have the same customer facing fonts across your product suite.

[Marcey]

I would love to have some HubSpot Template designs for the knowledge center!

[raylawrence]

Sure, but even te chance change to sans-serif font would go a long way.

[siddharthlatest]

Really need this feature. Cutomization with CSS would be great (along with some templates from you guys), but you need to change to using good default fonts ASAP.

[Sharni-styles]

Our company would also love some Hubspot Template designs!

[mollymetzger]

I would love this functionality!! Please allow us to edit the template and CSS styles of Knowledge Base. 

Having featured images for categories or articles would be fantastic -- Even something as simple as having tiles and icons would make it look so much better. Here is an example: https://www.ebates.com/help

[Sharni-styles]

Our company would also love to be able to customise the Knowledge Base Centre!

[Sneeps]

If there was a way to currently display more than two articles on the homepage of the Knowledge Base, that would be very beneficial.  I am suggesting this because we would like users to have the ability to try and find their issues from that page rather than relying so much on the search bar itself, or clicking on "See all articles".  Plus, it makes you look like you have some more content than just a few articles in general.  

[Stratshock]

This. We need the ability to edit the knowledge base template, as well as the ability to display more than two article.

[brianserocke]

Would really love for the ability to define custom knowledge base styles to be implemented.

It is disappointing that the knowledge base doesn't include the ability to match front-end form styling and other classes to landing pages or website pages. The knowledge base is supposed to be an extension of the company's brand and a platform for their current customers to use. Have a slightly disconnected front-end experience hurts the brand and makes the company look inconsistent.

[cwishart]

I want to customize the header and fonts to match my brand, currently there are no real customizations options. 

Please allow us to do so.

[rrumpf19]

We would like to adjust the number of articles presented in each category/subcategory on the main index page. Currently there are only two articles listed before the 'view more' button.

We're working on creating a recently added or 'trending' category, but it almost defeats the purpose if users get to the index and have to dig to find the article(s) they're looking for. 

[jennysowyrda · Accepted solution]

Hi all,

If you would like to see more customization implemented in the future, I would recommend upvoting this idea in the ideas forum.

Thank you,
Jenny

[rrumpf19]

@jennysowyrda It doesn't seem like the idea you mentioned includes any insight from the Hubspot team. Could you please shed some light on when these knowledgebase features will be either prioritized, or completed? 

[jennysowyrda]

Hi @rrumpf19,

While not all ideas have comments from the HubSpot team, ideas are regularly monitored and reviewed by the HubSpot team. 

I do not have an update around if and when this idea will be completed, however the best place to share your thoughts and suggestions will be through the idea, as that is the space monitored by the product team.

Thank you,
Jenny

[RHearnRencore]

The changes that have been made to the styling of the Knowledgebase has been steps in the right direction, being able to apply a .css would be brilliant. Having more editing options on the standard template would be awesome. I would like to change the "kb-search-section" banner so that it does not take up half of the page, just being able to lower the height of this would improve the landing page tremendously.

Keep Up the good Job. Please don't stop and give us all the customizations we want.

[JoeMayall]

Hi folks!

If you're looking for more information about knowledge base design and layout, including custom HTML/CSS, I encourage you to check out this post from our knowledge base Product manager.

Best!

Joe

Ideas Forum Manager