Using Custom CSS to style HelpBar

Use Custom CSS to update the style of the 'Smart Widget' Trigger in your HelpBar

Tiago Mota avatar
Written by Tiago Mota
Updated over a week ago

The HelpBar picks up colors from your interface and you can easily adjust those further. You can also adjust the styling of your Smart Widget (the UI element that launches your HelpBar) with Custom CSS to ensure it stands out to users.

πŸ‘‰ Learn more about using Custom CSS in Chameleon.

πŸ‘€ You'll be able to adjust the look of your HelpBar from the Styling page soon!

List of HelpBar Widget selectors

Below are the classes you can target with Custom CSS from the HelpBar 'Smart Widget'.


chmln-helpbar-widget__shortcut (parent class of the shortcut hint -- styles the whole group)
chmln-helpbar-widget__key (used by the squares of the cmd/K keys)

Add these in your Dashboard, as you configure your HelpBar Smart Widget, under the Custom CSS tab. Apply once you're done and your changes will be saved!


Here are a few examples of Custom CSS added to the Smart Widget:

#chmln .chmln-helpbar-widget {
border-color: black !important;

#chmln .chmln-helpbar-widget__text {
font-size: 20px !important;

#chmln .chmln-helpbar-widget__key {
scale: 1.2;

#chmln .chmln-helpbar-widget__key {
color: yellow !important;

β„Ή You can also download the Custom CSS applied to your Smart Widget from the Dashboard.

Explore more

Did this answer your question?