More flexible knowledge base design and layout, including custom HTML/CSS
There have been a number of different posts in the Community which are about the same core need (customizing the styling of the knowledge base), but many have been marked as "solved" or "delivered" because of options that get you part-way there. I'm consolidating those into this post so we can more easily track this need. This post should not be marked as solved or delivered until a knowledge base can be fully customized in layout and styling.
I've spoken with many customers who still want more flexibility in knowledge base styling, including:
Custom layouts for index pages and articles
More fonts and styling options to better align KB with the rest of a business's website
For those of us who are working to improve the HubSpot product, it's incredibly helpful to have example use cases from our customers, and the posts here on the Community play an important role in our prioritization process.
Giving you more flexibility in KB styling is something we'd like to do, and when we have the bandwidth to dig into this project we'll look to you all for guidance on how to best support your needs. So if customization is important to you, please add your voice to this thread!
For reference, I'm listing here the other posts which are related to this topic:
I’d like to share an update here since it has been a while since we did last time. I wanted to let you know that we are currently investing in improving our editing platform more broadly so that in the near future we can revamp the editing experience within Knowledge Base. More a matter of when we can get to it, not if. We’ll share another update as soon as we have new information.
I 100% agree that this needs to be a feature. At the least you should be able to modify the padding on the header so you can fall inline with brand guidelines related to spacing around your logo.
+1! One of the biggest issues we're having is around accessibility—as one example, our brand and link colors have to be in bold to have AA contrast. Without the ability to do that, we're getting a lot of pings on accessibility audits.
We can't implement fundamental marketing pratices like keeping clear space around the logo (unless we make it tiny) or consistent header/footer across web assets with the current functionality. Even if category styling and Header styling were independent would help.
Please provide an update on this 'under review' status that is almost 2 years ago.
What's going on? This idea was suggested in 2018 and still no option to customize CSS. We are forced to build our own Help Centre website because it's currently very lackluster on Hubspot.
I would like to see a feature that allows us to build our own page templates for the Knowledge Base. We could utilize the existing design manager functionality and simply build a new custom block to pull in the knowledge base articles into the template. We could then choose the template we are using under settings to apply it to all pages.
This seems like it would be the best option as it would enable users to change designs, adjust styles, allow them to change fonts, colors, padding around logos, etc so that their brand standards can be followed. It would allow allow them to add javascript files to pages so that external live chat tools can be used on their knowledgebase site. This is a stumbling block for a few clients that want to replace their contact us page with the knoweldgebase but they use an extenal live chat tool.
This approach would also allow us to customize the header and footer content which is so restricting at the moment.
This is something that would really help improve the knowledge base. Thanks for considering it.
If all you want to do is load up some JS or CSS in your knowledgebase, it is actually trivial. Your knowledgebase portal loads up your portal's global .js file, so just do the overrides from JavaScript.
Visit your portal settings
Click Tracking & Analytics -> Tracking Code in the left nav.
Click the "Customize Javascript" text link, then the "Add custom Javascript" button.
Add JavaScript (example below) that loads up remove CSS & JS.
Save.
if (window.location.hostname == "docs.mydomain.com") {
let script=document.createElement('script');
script.setAttribute("type","text/javascript");
script.setAttribute("src", "https://yourdomain/path/file.js");
let css=document.createElement("link")
css.setAttribute("rel", "stylesheet")
css.setAttribute("type", "text/css")
css.setAttribute("href", "https://yourdomain/path/file.css")
}
I'm still very much on the "I'm embarassed for HubSpot that this product is the only one without a custom template" - the quotes team set up custom templates - and they did it both well and fast and learned a lot about what other features to build from the more advanced users.
It really does boggle the mind that HubSpot PMs at some point decided that support must surely be the one and only part of a brand identity that its customers don't care about. We're talking about 4+ years of people asking for very fundamental HUBL building blocks here.
My possibly wrong assumption here is that the HubSpot Service product is not a priority for the company and so the product leadership team does not devote as many resources to it as they do to other products. There has been so little development of meaningful capabilities on this product line. Will I leave? No. Will I recommend any other companies use HubSpot Service? Absolutely not.
Please let us know when knowledge base customization will make it's way to the design tools. HubSpot's own knowledge base uses more of the browser real estate than what is provided for our portals. For example HubSpot's overall width is 1214 px compared to 1042 px that we have available. The actual content area of the article is 894 px for HubSpot and only 681 px for us. This makes viewing screenshots necessary for our documentation very small and not readable. It would also be good to have a lightbox capability for such images that need more browser real estate to become readable.
Having control over this CSS is necessary as HubSpot's templates are not providing us with the look and feel that we are seeking.
I think it would be next level to have an "expansion pack" for themes that include templates for the knowledge base. Something that didn't have to be part of existing themes, just add-on for those with the theme, run off the theme settings, etc., but have the templates needed to customise the knowledge base beyond CSS. Since not all users need or use knowledge base, I don't think it should be included in themes to avoid confusion ("I thought it was a page template I could use as a website page") but very clear that it is for the knowledge base only.
We need to customize the navigation and the footer. It's ok to have some restrictions, but it's not ok to take this small set of default templates and not make them adjustable. Without the customization, it really looks outdated.
Also, it does not fit to our webpage, as it looks like a completely different page due to unmatching styling.
Greater flexibility in customizing the Knowlege Base would be wonderful! For our application, it would also make the Knowledge Base more versatile. The same customizing flexibility as the forms and CMS would be wonderful 🙂 We would love to be able to add some rich text with embedded links above the search bar.
Could you please clarify? I don't see that option at all. Here is what I see. The "Style" option is limited to 6 or so pre-set styles for titles, headings and the like.
It's absolutely frustrating. Knowledge Base is great feature with great editor. But I can't even change font size at least on Table of Content left panel
It would go a long way toward making KB more user-friendly if we could use inline styling for fonts like you can in the Blog editor tool. We have some very long SOPs in our internal knowledge base and this would make a big difference from a readability standpoint for each article. Thanks!
We desperately need this. The options are so incredibly limited. My boss looks at other KB examples (including Hubspot's!) and wants to know why we can't do the same thing.