Can we allow for custom css classes to be added to popovers and buttons?

[nh916]

I am looking for an easy way to add custom css to the popovers and buttons, but I am having a hard time doing so

[Naren-hybreeder]

@nh916, I have tried the below code on my project and it's working. Can you try it once?

const driver = new Driver({
allowClose: false,	
	closeBtnText:'<img src="/wp-content/uploads/2022/03/close-circle-tour.png" alt="">',
	prevBtnText: 'Previous', 
	nextBtnText: 'Next',
	doneBtnText: 'Done', // Text on the final button
	animate: false //animation stop
});

 driver.defineSteps([
{
element: '#guide1',
    popover: {
     className: 'classname-here',
      title: 'Title here.',
      description: 'Body of the popover',
      position: 'right'
    }
 },
]);
<style>
.classname-here .driver-next-btn, .classname-here .driver-prev-btn{
border: none !important;
text-shadow: none !important;
padding: 6px 28px !important;
font-size: 16px !important;
border-radius: 04px !important;
	}
.classname-here.driver-next-btn{background-color:#f00 !important;color: #fff !important;}
.classname-here .driver-close-btn, .classname-here .driver-prev-btn{color:#0E4165 !important;background-color:transparent !important;}
.classname-here .driver-close-btn{position: absolute;top:8px;right:0;border: none !important;display:block}
.classname-here .driver-close-btn img{z-index: -1;position: relative;}
.classname-here .driver-disabled{display:none !important}
</style>

[Yee-Guo]

@nh916, I have tried the below code on my project and it's working. Can you try it once?

const driver = new Driver({
allowClose: false,	
	closeBtnText:'<img src="/wp-content/uploads/2022/03/close-circle-tour.png" alt="">',
	prevBtnText: 'Previous', 
	nextBtnText: 'Next',
	doneBtnText: 'Done', // Text on the final button
	animate: false //animation stop
});

 driver.defineSteps([
{
element: '#guide1',
    popover: {
     className: 'classname-here',
      title: 'Title here.',
      description: 'Body of the popover',
      position: 'right'
    }
 },
]);
<style>
.classname-here .driver-next-btn, .classname-here .driver-prev-btn{
border: none !important;
text-shadow: none !important;
padding: 6px 28px !important;
font-size: 16px !important;
border-radius: 04px !important;
	}
.classname-here.driver-next-btn{background-color:#f00 !important;color: #fff !important;}
.classname-here .driver-close-btn, .classname-here .driver-prev-btn{color:#0E4165 !important;background-color:transparent !important;}
.classname-here .driver-close-btn{position: absolute;top:8px;right:0;border: none !important;display:block}
.classname-here .driver-close-btn img{z-index: -1;position: relative;}
.classname-here .driver-disabled{display:none !important}
</style>

I try it but it doesn't working.I'm confused for why css style with "deep" but can't working

[kamranahmedse]

We just released v1.0 of driver.js which has been rewritten from the ground up. There is a way to style popover and related items. Please have a look at this docs page and do let me know if you face any issues.

[nh916]

We just released v1.0 of driver.js which has been rewritten from the ground up. There is a way to style popover and related items. Please have a look at this docs page and do let me know if you face any issues.

Thank you so much! I'll look at it soon!