Welcome to the Getting Started with Customization Course

Hey there 👋

Matt from HelpDocs here to say welcome to the Getting Started with Customization course.

This course is aimed at non-developers who are looking for a little technical guidance on how to make their knowledge base kick ass, without bothering their developers. 💪

By the end of this course you're gonna have a great understanding of everything from why you would want to customize in the first place, right the way through to being able to add JavaScript snippets to introduce custom functions to your documentation. 🤓

The Lessons

1. Why Customize? - Part 1

   In this lesson, we'll cover the motivation behind customization. And we'll touch on what you'll need to know before you dive headfirst into designing a customer-centric knowledge base.
   We talk about the importance of creating a unified customer experience. And touch on brand voice, language and of course the design. 🖌️

2. Wireframing and Design (Why Customize? - Part 2)

   Following on from the video in lesson 1, part 2 covers the basics of creating the basic structure and design for your knowledge base. We touch on what you'll want to consider, and the best approach to take with your documentation workflow. Spoiler alert: It's all about being customer-centric!

3. Basic CSS Tweaks

   Now we start on the basics. Using a V3 starter template, we learn some of the fundamentals behind where to place style overriding code including:
   1. Change primary colors of text, icons, and highlights
   2. Adjust font styles and weights
   3. Restyle links
   4. Change placeholder color

4. Customizing the Feedback Icons

   Here you'll learn how to remove feedback icons, and how to replace the stock icons with an emoji or custom icon. 👍👎

5. Add a Global Print Button

   Learn how to add a functional print button to your articles that shows up dynamically throughout your knowledge base. We cover the basics of finding and adding the JavaScript print function, how to call the function on a button click, and we restyle the button in CSS. 🖨️

6. Customize the Header

   In this lesson we run through how to use CSS to override the stock style for your knowledge base header and replace it with an image. There's also a sneaky trick about how to host your images directly in HelpDocs. 🖼️

7. Add a Customizable Welcome Message

   Here we take a look at recurring strings controlled in the HelpDocs i18n section of the Settings dashboard. You'll learn how to add a call to a dynamic string element in your customized template, and where you can update this element 👋

8. Replace the Top Articles section with Featured Articles

   In this section we get a little more complex. We remove the existing Top Articles feature from the Curve template, and replace it with a Featured Articles section using some partial context data ⭐

9. Add a sticky search bar to your knowledge base

   Last but by no means least, in this video we run through how you can use a little code to add and remove a sticky class to your search bar and search results. Letting you can keep your search bar at the top of the browser window 👍

So when you're ready, let's go ahead and get started 🙃