Knowledge Base Tool

radko
Member

Knowledge base styles

SOLVE

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

2 Accepted solutions
roisinkirby
Solution
HubSpot Product Team
HubSpot Product Team

Knowledge base styles

SOLVE

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.
    kb-website-url-and-text
  • 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.
    choose-header-color-or-link-color
    • 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.

preview

 

 

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.

View solution in original post

jennysowyrda
Solution
Community Manager
Community Manager

Knowledge base styles

SOLVE

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

View solution in original post

25 Replies 25
JoeMayall
HubSpot Alumni
HubSpot Alumni

Knowledge base styles

SOLVE

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

rrumpf19
Participant

Knowledge base styles

SOLVE

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
Solution
Community Manager
Community Manager

Knowledge base styles

SOLVE

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
Participant

Knowledge base styles

SOLVE

@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? 

0 Upvotes
jennysowyrda
Community Manager
Community Manager

Knowledge base styles

SOLVE

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

0 Upvotes
RHearnRencore
Participant

Knowledge base styles

SOLVE

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.

brianserocke
Contributor | Platinum Partner
Contributor | Platinum Partner

Knowledge base styles

SOLVE

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
Participant

Knowledge base styles

SOLVE

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.

0 Upvotes
Sneeps
Participant

Knowledge base styles

SOLVE

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
Participant

Knowledge base styles

SOLVE

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

Sharni-styles
Participant

Knowledge base styles

SOLVE

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

mollymetzger
Contributor

Knowledge base styles

SOLVE

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

Marcey
Participant

Knowledge base styles

SOLVE

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

Sharni-styles
Participant

Knowledge base styles

SOLVE

Our company would also love some Hubspot Template designs!

raylawrence
Participant

Knowledge base styles

SOLVE

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

siddharthlatest
Participant

Knowledge base styles

SOLVE

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.

roisinkirby
Solution
HubSpot Product Team
HubSpot Product Team

Knowledge base styles

SOLVE

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.
    kb-website-url-and-text
  • 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.
    choose-header-color-or-link-color
    • 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.

preview

 

 

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.

crmal91
Participant

Knowledge base styles

SOLVE

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.

0 Upvotes
fwchris
Participant

Knowledge base styles

SOLVE

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.

sid_appbase
Participant

Knowledge base styles

SOLVE

@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?