Badge color change on hover

Follow

Christopher Snider

• September 21, 2021 15:39

Based on my exploration of the configuration options for styling a badge, and searching here, there is no option or ability to change the color of a badge on hover is there? Ideally, we're looking to have a somewhat neutral color for the badge icon when the page loads, but the color changes on hover to indicate the badge is clickable (on click, the tooltip would open).

Have I missed anything? Is there an opportunity to make this a feature request for the Pendo Product team to consider down the road?

0

• 

  Howard Lio

  • September 21, 2021 17:11

  Hi Christopher Snider,

   

  Thanks for your post in the Discussion Community. There is not an out of the box feature to have the color of the badge change in different states, but you could look to make this change with custom code either in your application's CSS or in Pendo's Global CSS. 

   

  If you're interested in making a feature request for Pendo, you can do so here at our feedback site (login to your Pendo account): https://feedback.us.pendo.io/

  0

  Comment actions Permalink
• 

  Christopher Snider

  • September 21, 2021 17:42

  To address this within Pendo's Global CSS, would that be within Theme > Guide Container > Advanced Settings > Supplemental Styles?

  I don't see a way to target that color attribute since it's being set by the Pendo application first before being implemented on our application.

  0

  Comment actions Permalink
• 

  Howard Lio

  • December 07, 2021 20:45
  • Edited

  Hi Christopher,

  Global CSS only exists within our classic guides editor, which I'd recommend only using for global CSS stylesheet which do apply for all guides (classic vs. visual design studio). To enable classic designer, you would talk to your CSM or Support representative who can make these adjustments for your subscription settings:

  

  You can grab the CSS selector for the badge and apply a :hover state styling to the selector you have for the badge, which would live within that global css stylesheet.

  If you need any further help, I'd recommend engaging with our Professional Services team who can help look at custom code and additional Pendo customizations!

  0

  Comment actions Permalink

Please sign in to leave a comment.