Getting Started
Setting Up a Custom Domain
Managing Users
Setting or Updating the Name in Your Profile
Can I Schedule a Demo?
The HelpDocs Trial
Setting the URL Style for your Articles
Switching Between Multiple Accounts
Adding or Changing Your Profile Image
Logging In To Your HelpDocs
Understanding Smart 404 Pages
Understanding Top Articles
Writing and Editing Articles
Stale Articles
Text Editor
Content Blocks
Inserting Videos
Adding an HTML Block
Using Markdown Blocks
Adding Embeddables
Using Code Blocks
Getting Started with Content Blocks
Using Quote Blocks
Inserting Images
Understanding Article Statuses
Article Backups, Revisions, and Versioning
Managing Clips
Text Editor Shortcuts
Adding Tags to Articles
Using Folds
Using Ordered Lists
Moving an Article to a Different Category
Inserting Images into Ordered Lists
Adding Note, Tip, and Warning Callouts
Switching the Editor Mode
Adding Buttons
Unassigned Articles
Understanding Search Results
Duplicating an Article
Incompatible Browser Extensions
Filtering Articles
Downloading Articles to PDF
Deleting an Article
What is Readability?
Collaborating on Articles with Presence
Adding a Table of Contents
Restoring Deleted Articles
Editing Category Metadata
Exporting & Backing Up Your Articles
Hiding Articles from Public Search Engines
Delete a Category
Featuring an Article
Creating Draft Versions of Published Articles with Working Copy
Bulk Select & Edit Multiple Articles
Creating a Subcategory
Hidden Categories
Linking to a Part of an Article
Previewing Articles
Using help.new to Create Articles
Editing Images
Setting Up Integrations
Front Integration
Slack Integration
Available Commands in Your Slack Workspace
Get Feedback, Activity, and Contact Form Notifications in Slack
Installing the Slack Integration
Sharing Articles From HelpDocs to Slack
Configuring Your Slack Integration
Intercom Integration
Drift Integration
Chrome Extension
Connecting Heap
Connecting Google Analytics
Adding a Feedier Carrier
Adding Hotjar
Connecting Gorgias
Connecting Lucidchart
Connecting GoSquared
Connecting Gainsight PX
Connecting Segment
Connecting Kommunicate
Using HelpDocs with Ticketing Systems
Connecting LiveChat
Connecting Chatra
Connecting Statuspage
Connecting Crisp
Connecting Belco
Syncing Content to elevio
Adding FullStory
Enabling Comments with Disqus
Connecting Doorbell
Connecting Sunshine Conversations
Connecting Hyperping
Customizing your HelpDocs
Code Snippets
Condense Top Article Spacing on Bars V4
Adding Lightboxes to Images
Overriding the Font on Your Knowledge Base
Making Your Printed HelpDocs Look Nicer
Making Video Embeds Responsive
Disabling Authorship and Updated Times
Getting Help with Code Snippets
Disabling Top Articles
Using Different List Styles
Using HelpDocs with RTL Languages
Disabling Related Articles
Using a Background Image in the Header
Making Tables Scroll When They're Too Wide for the Page
How to Change the Logo Link
How to Add Extra Spacing
Add HTML Before the Closing Body Tag
Customizing Feedback Icons
Custom HTML Templates
Customizing an Article Slug, Meta Description & Short Version
Understanding the Contact Form
Changing the Language in Common Phrases
Hiding the Contact Button
Adding Custom CSS
Setting Article Display Order
Adding Custom Navigation Links
Setting a Custom Favicon
Setting Category Display Order
Uploading Your Brand Logo
Adding URL Redirects
Featuring a Category
Adding Icons to Categories
Hosting HelpDocs at a Subfolder of Your Site
Adding an Open Graph Fallback Image
Choosing a Template
Testing Customizations with .dev
Adding Custom JavaScript
Adding Cookie Consent
Multilingual Translation
Machine Translations
Understanding Machine Translation Credits
Customizing How Machine Translations Work
Automatically Translate Articles with Machine Translations
Setting Up Multilingual
Understanding Multilingual Translation
Translating Categories
Translating Articles
Permissioning
Creating a Read-Only Permission Group for Public Articles
Creating and Managing Permission Groups
Getting Started with Permissioning
Assigning Permission Groups to Categories
Assigning Permission Groups to Articles
Removing Permission Groups from Articles
Authentication
Setting Up Two-Factor Authentication
Setting Up and Using SAML Single Sign-On
Restricting your HelpDocs with Custom JWT SSO
Using OpenID Connect for Single Sign On
Configuring Slack Single Sign On
Restricting Your Docs to Logged In Users
Shared Password Protection
Accessing User Data in HelpDocs
Data & Analytics
Filtering Stats
Getting Team Event History with Audit Trail
Understanding Articles Clicked
What are Tickets Avoided?
Exporting Your Stats
What is the Happiness Score?
Lighthouse
Understanding Lighthouse
Lighthouse Widget API
Integrating Lighthouse with Live Chat Providers
Installing Lighthouse
Adding Lighthouse Trigger Buttons to Webflow
Billing
Cancelling Your Account
Downloading Invoices and Receipts
Updating Your Billing Information
Changing Your Plan
Subscribing to a Plan for the First Time
European Union VAT Charges
Tax Residency Certificates and Forms
FAQs
I can't log in to my HelpDocs account or complete signup
How do I reset my password?
How do I change my email?
Can I use multiple HelpDocs accounts together?
Can I migrate or import my data from another service?
Who counts towards the user limit on plans?
Can I Change the HelpDocs Branding?
Can I have a single article appear in multiple categories?
Can I host my internal docs in HelpDocs?
I’m seeing a blank screen when I load my knowledge base
Help! No articles are appearing on my knowledge base
What is an account slug?
I've added a script but it isn't working
Help! My app's not loading 😭
Can I embed files into HelpDocs?
How do related articles work?
Can I host my API docs in HelpDocs?
Will translated articles be deleted if I remove that language?
My Article Has a Blank Space to the Left. What's Wrong?
One of my headings isn't showing in the table of contents
I'm getting 'Your connection is not private' on my custom domain
HelpDocs Support Scope
How do I publish an article that's not available in the default language?
Why isn't my contact form showing up?
Guides
Optimizing Your Knowledge Base for Search
Creating a Knowledge Base from Scratch
Finding CSS Selectors in Your Browser
Clearing the Cache in Your Browser
Writing Clear and Digestible Knowledge Base Articles
Resources
Security & Compliance
Table of Contents
- Knowledge Base
- Guides
- Finding CSS Selectors in Your Browser
Finding CSS Selectors in Your Browser
Updated
by River Sloane
One of the awesome things with HelpDocs is that it's just so customizable and getting it to fit in with your brand is a piece of cake. The easiest way to do this is to use Custom CSS. But getting CSS to work can be tricky, particularly if you're not a developer.
Here's a guide on how to target elements on your knowledge base and customize them to match your brand.
Finding the Developer Console in Your Browser
The very first thing you'll need to do is find the developer console in your browser.
Don't worry—there's nothing to be scared about here. The developer console is an easy way to view the elements of a page and edit them live without actually changing the code.
With the console, we'll just want to view the CSS selectors we've added, so you can effectively target them and change the way your knowledge base looks.
Chrome

- Click the Chrome Menu button in the top right corner This'll look like either a vertical ellipsis (if you're super smart and keep your Chrome up to date) or an arrow of increasing redness (if you're like me and you haven't closed Chrome this year)
- Hover over More Tools
- Click Developer Tools
You can also use your keyboard using these shortcuts:
- Mac: Use
Ctrl
+Cmd
+I
- Windows:
F12, Ctrl
+Shift
+I
Safari

- Click Safari > Preferences in the top menu bar
- In the Advanced tab, tick Show Develop menu in menu bar
- In the top menu bar, you'll see a new menu named Develop
- Click Develop > Show Web Inspector
You can also use your keyboard using this shortcut:
- Mac: Use
Ctrl
+⌥
+I
Microsoft Edge

- Press F12 on your keyboard
- Click DOM Explorer
You can also use your keyboard using these shortcuts:
- Windows:
Ctrl
+Shift
+I
First, enable Inspections by entering about:flags in the URL bar, then tick Show "View Source" and "Inspect Element" in the context menu. Then, right click and press Inspect Element to view the CSS selectors for that element.
Internet Explorer

- In the top menu bar, click Tools > Developer Tools
You can also use your keyboard using these shortcuts:
- Windows:
F12
Firefox

- In the top menu, click Tools > Web Developer > Inspector
You can also use your keyboard using these shortcuts:
- Mac: Use
Ctrl
+Opt
+I
- Windows:
Ctrl
+Shift
+I
Opera

- On Mac
- In the top menu bar, click Page > Developer Tools > Opera Dragonfly
- On Windows
- In the top menu bar, click Tools > Advanced > Opera Dragonfly
You can also use your keyboard using these shortcuts:
- Mac: Use
Ctrl
+Opt
+I
- Windows:
Ctrl
+Shift
+I
Finding the Correct CSS Selectors
Fantastic! So by now you should be able to bring up your developer console by either using the menu or by inspecting an element on the page. Good job so far. You're well on your way to being able to customize your HelpDocs 👍
Now, let's go through an example. I'll be using the Chrome DevTools to change all link colors on articles from pink to purple.
- First, I'm going to open an article with a link in. Then, I'll Right Click on top of the element and click Inspect
- My console will pop up with the selected element information. On the left is the HTML and on the right is the CSS. I'll need to look at the CSS.
Looks like I've found the CSS Selectors. I can tell because the console shows me some CSS which looks pretty familiar (color: #f44599;
). The box next to it indicates a pink color which is exactly the same as my link color. It also shows#articleBody a
which can translated as div > link - Now I've found the element I'm looking for I'll copy the information in bold so I can use it in my own CSS in HelpDocs. I won't copy the link in the top right because it's not part of the CSS
#articleBody a {
color: #f45599;
} - Now it's time to head to HelpDocs. I'll go to Settings > Code > Custom CSS and paste in the CSS I just found
- Phew, I'm almost there! Time to change my link color (you can use this tool to find a color). I'm going for
#721DFE
, a nice light purple. I'll simply replace the old color with my new one - I'll hit Save Changes and now my link colors are all purple instead of pink! 🎉
That's pretty much it. For more advanced tutorials on using CSS head over to Good luck and have fun customizing your HelpDocs! 👩🎨