We are very excited to announce a big set of feature changes in KnowledgeOwl!
Most of these center around category icons, homepages, and theme/look and feel experience. Without further ado, I'd like to introduce you to three amazing new features (full description below or take a look at our Wisdom Wednesday recording on them!)
1: An actual Category Icon Picker
Previously, the category icon field just had a file picker/upload option, and just displayed the URL of the category icon you selected. If you wanted to use those category icons anywhere, you'd need to write your own script to do so.
First, we wanted to give you a better user experience of using the category icon field. We moved it a lot higher in the editor and gave it a file preview, so you can see exactly what icon you've selected.
But most importantly: we've integrated directly with Font Awesome here so that you can choose an icon directly from Font Awesome, set the color you'd like it to be, and the style variant. (You can also still upload an icon file directly yourself, if you don't want to use Font Awesome!) We've had a lot of fun playing around with different Font Awesome icons and style variations in our testing, and we hope this helps you find icons you want to use without having to convert file types, hire a designer, or other inconveniences.
Here are some sample screenshots:
And, now that we've given you a more pleasant way to select category icons, we figured we should also give you a way to use them, so we're even more excited to announce that we have a:
2: New homepage display option to show category icons
This one is huge for us. We've long relied on the base-cats template to generate the category list on the homepage. Over the years, we've come to regret many of the choices we made in that template. So when we started building a new template to include category icons, we decided to learn from those mistakes.
We'd like to introduce our new homepage template: the icon-cats template! This template does a lot of new things:
- It will automatically display the category icons you've added to your categories in the homepage display. (Though we do have it set to use a few "default" icons in case you forgot to add any!)
- It includes a variable to set a max number of categories to display (max=8, for example!)
- It also includes a variable to set how many categories you want displayed per row (col=4, for example!)
- It structures the underlying HTML for the category panels in a different way, using flex characteristics, cutting out some confusing and unnecessary breaks and containers, and using a more modern default CSS for those. The CSS and behavior here are loosely styled after the homepage on this support KB.
And yes, that look is achievable using FontAwesome Duotone icons in the category picker, the icon-cats template, and nothing else!
Check out the updated documentation at Add category icons to your homepage category panels to see more info on how to use the new merge code and our tips for working with it. If you're hesitant to try it out in your live knowledge base, contact us and request a temporary sandbox copy of your knowledge base to try things out in!
3: New theme + sample content for new-from-scratch knowledge bases
One of our biggest requests from new customers has been wanting to have more theme options in their knowledge bases.
Building themes is...well, actually unbelievably complicated. We spent some time this year trying to build a full-fledged new theme and realized that it would take us months--if not years--to make the full set of changes we wanted to make. To be honest, we'd like to have a totally different interface for selecting and configuring themes, and trying to do that while maintaining backwards compatibility with existing themes was a huge undertaking. We still intend to do it some day, but we needed something we could deliver sooner and faster.
Along the way, we realized that a lot of the requests for theme changes were from people who wanted something that looked a bit like the theme we use here in support.knowledgeowl.com. And we realized that maybe one of the things we've done wrong with our themes in the past was to hide a lot of what they were doing.
So we're trying a different approach.
Starting today, all new knowledge bases created from scratch (e.g. not made by copying an existing knowledge base) will get created a bit differently. They'll have:
- Custom CSS added to style the knowledge base similarly to our Support knowledge base. This CSS is heavily commented to try to make it easier for you to figure out how to change certain elements of the theme using CSS.
- Some template content to show a bit about what KnowledgeOwl can do. This helps us offer some orientation materials to totally new users while also showcasing some of the different configuration options that are available. It also helps any of you who might have writer's block staring at an empty knowledge base. 😊
- The new icon-cats homepage layout used by default, so they'll have category icons on the homepage from day one.
- A new article icon-actions merge code to tidy up the Custom Article HTML template in Settings > Style, Custom HTML > Article (and to make it easier to globally hide each of those article action icons!). See Update your article actions merge code on using this merge code in your knowledge base!
- We've moved all of the Homepage HTML out of Knowledge Base > Home Page and put it into Settings > Style > Custom HTML > Home Page. We often make this change as part of updating themes for customers and figured it might make it easier for people to play around with the new theme.
Since we couldn't build this fully into the theme selector, you won't see any new theme options in Settings > Style; the changes are largely done through some tweaks to Custom HTML and a lot of Custom CSS.
But if you're curious about this theme and have an empty KB slot in your account, go ahead and create a new knowledge base to test it out.
If you don't have any empty space, let our support owls know and we can give you a complimentary sandbox to see the new theme for yourself.