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
chmln-helpbar-widget__text
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)
chmln-helpbar-widget__plus
chmln-helpbar-widget__icon
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!
Examples
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.