shepherd-pro
Custom styling
Hi there!
What is the appropriate way of customizing the Shepherd styling? For example, if I wanted to change the color of the overlay modal or popover background color, is it correct to override existing CSS classes (if shepherd/styles.css is imported) or define the same classes that Shepherd relies on? Or maybe I missed something and there is a way to pass list of classes to style the popover, its header and footer and overlay modal?
Thanks!
@xblurx you can either include none of the default styles and manually style everything or you can override the default styles. We do a lot of overrides for https://shepherdjs.dev/ if you want to look at the CSS we have there. You can also pass the classes option to steps.
@xblurx you can either include none of the default styles and manually style everything or you can override the default styles. We do a lot of overrides for https://shepherdjs.dev/ if you want to look at the CSS we have there. You can also pass the
classesoption to steps.
Yeah, I noticed that. Though correct me if I'm wrong: you only get to manually style the popover container (pass classes to it in a descriptor object) ?
And one question, if you don't mind. Do you have to override shepherd css classes to style an arrow, footer or header?
What I am trying to say here is, is there a way for a user of the library to just describe steps jsx elements directly with all the styles needed, and let the library render it in the context of overlay modal and other stuff? Without predefined popover structure and styles applied to it. And if not, is there a technical reason behind the current way things are?
It's just I like the way the overlay modal behaves, adaptive highlighting, floating-ui and stuff, but this thing with overring custom styling seems unclear to me
@xblurx I don't understand what you mean. Check out how we style things for https://shepherdjs.dev/