Closed sn3p closed 4 years ago
Mhm ok, it seems only the body classes are prefixed:
<body class="foo-shepherd-enabled foo-shepherd-target">
Not sure if this is by design, but the docs state that ALL classes will be prefixed:
classPrefix | string | The prefix to add to all the shepherd-* class names. |
---|
@sn3p yes, they are no longer all prefixed. The idea is you prefix only the necessary ones for styling.
Ok, prolly want to change this in the docs as well then 😄
I get your point, but in our case we are using CSS Modules to scope classnames. Our preferred way is to scope all classes to the component to prevent style leakage.
Hello!
I thought I was having the same issue till I found this post. However, I still have some questions. I see in the typing comments that classPrefix only applies to
The prefix to add to the `shepherd-enabled` and `shepherd-target` class names as well as the `data-shepherd-step-id`.
I'm not sure if this applies to shepherd-header classes? I currently have 2 tour instances and want to have different backround-color for each. Currently I am just overwriting the default shepherd-header class to change it for both to 1 color. Is there still a way to apply different styling to 'title's?
@samywang92 the classPrefix
is only added to those elements, but it will work for what you want to do. For example, you would do something like this:
.my-prefix-shepherd-enabled .shepherd-header {
background-color: blue;
}
Each individual step also has the classes
option if you need to style certain steps differently.
@rwwagner90 Thank you for the swift reply! I tried your example and it did not work for me. I examined the elements and it seems that only my targeted element gets the tour-dashboard-shepherd-enabled
class.
Unfortunately my step does not. It gets the tour-dashboard
added to the step-id but not to shepherd-enabled.
<div aria-describedby="step-cecd3a6a-be16-448c-93c9-51effd5feebf-description" aria-labelledby="step-cecd3a6a-be16-448c-93c9-51effd5feebf-label" role="dialog" tabindex="0" class="shepherd-has-title shepherd-element shadow-md bg-purple-dark shepherd-enabled" data-tour-dashboard-shepherd-step-id="step-cecd3a6a-be16-448c-93c9-51effd5feebf" style="position: absolute; left: 0px; top: 0px; margin: 0px; right: auto; bottom: auto; transform: translate(0px, 47px);" data-popper-escaped="" data-popper-placement="bottom">
I tried using classes
on the step but setting background-color changes the shepherd-content
background and not the shepherd-header
. What am I doing wrong?
@samywang92 I don't understand. shepherd-enabled
is a wrapper for all steps. To change the shepherd-header
style you'll want to do what I suggested.
@samywang92 here is a CodePen https://codepen.io/rwwagner90/pen/ExPvWgX
I have the same settings as your codepen however I couldn't get it to work with classPrefix. I was able to get it to style by adding a custom class name to defaultStepOptions
since it applies to the parent of shepherd-header and styled accordingly with css though!
Maybe its something with vue/nuxt? Not exactly sure but thank you for your assistance!
@samywang92 with the same settings, it should work the same way. The JS framework should not matter. Please make sure to match the settings up exactly, and if it does not work, please provide us with a reproduction.
Using Nuxt: 2.10.2 Vue-shepherd: 0.2.1
Set up with a shepherd.js
Nuxt plugin:
import Vue from 'vue'
import VueShepherd from 'vue-shepherd'
import 'shepherd.js'
import 'shepherd.js/dist/css/shepherd.css'
Vue.use(VueShepherd)
nuxt.config.js:
...
plugins: [
...,
'@/plugins/shepherd'
],
...
css:
.tour-dashboard-shepherd-enabled .shepherd-element .shepherd-header {
background-color: purple;
}
component within mounted():
const firstTime = cookie.get('dashBoardFirst')
this.$nextTick(() => {
const tour = this.$shepherd({
defaultStepOptions: {
classes: 'shadow-md bg-purple-dark',
scrollTo: true
},
useModalOverlay: true,
classPrefix: 'tour-dashboard'
})
tour.addStep({
title: '<h4 class="tour-font tour-header">Welcome!</h4>',
attachTo: { element: '#element-id', on: 'top' },
text: `<pre class="tour-font">Thank you for using our service, \nlet's get started!</pre>`,
buttons: [
{
action() {
return this.back()
},
classes: 'tour-btn-secondary tour-font',
text: 'Back'
},
{
action() {
return this.next()
},
text: 'Next',
classes: 'tour-dashboard-btn-primary tour-font'
}
]
})
if (firstTime === undefined || firstTime !== 'false') {
tour.start()
cookie.set('dashBoardFirst', 'false')
}
@samywang92 seems like that should be okay. What's the problem with it?
.tour-dashboard-shepherd-enabled .shepherd-element .shepherd-header {
background-color: purple;
}
Styling shepherd-header with classPrefix
does not work. The background is the default grey.
@samywang92 that does not tell us much. We would need to know is the classPrefix not added or something are your style selector wrong, etc. Like what is the actual problem? If you can make a reproduction on CodePen or CodeSandbox or something, we can help you debug, but since my CodePen works, I would compare all the things and see what's going wrong.
I don't see any effect:
https://codepen.io/snap/pen/dyoLWBw?editors=0010