[Solved] Disable focus on element/overlay

Hi Jess.

Just add this CSS: 

.dpit-overlay{
    display: none !important;
}

Or just for specific tour:

#dpit-wrapper-<tour-id> .dpit-overlay{
    display: none !important;
}

Thanks a lot. I tweaked it a bit (.dpintro-overlay) and it worked. 🙂

Can you also advise what is the selector for the tool tip itself, as I want to add a fade-in effect to it when it appears on the screen. Now that the overlay is disabled, it looks sluggish/not smooth at all when the tooltips appear abruptly out of nowhere. I'd like to add a transition effect but I just need to specify the selector itself - can you help please, thank you!

Regards

@jess you are right. Identifiers, that I sent you are for new major update, that is coming soon. My bad. Please keep in mind to change .dpintro-... to .dpit-... after v5.x.x is released. You can find details about coming update here.

Thanks for the update!

Would you be able to advise please on what is the selector so I can add css to the tooltips and make them appear with fadein. Thanks!

Hi - I'm using the "Light" theme, but I would like to change the background colour - can you help please with how to do that? Thanks!

Hi Jess,

style themes are now designed to be adaptive to accent color - it's automatically calculate a contrast and when it is evaluated as a low contrast with light background, it is switched to dark. I understand that this feature could be restrictive for cases as yours so I'm happy to find a solution for you. 

• Fast temporary solution: Please go here:  https://deeppresentation.com/plugins/dp-intro-tours/?start-intro-tour=start-theme-demo . Choose the template and accent color you are using. Then gradually darken the accent color until the background color of the tooltip switches to light. Then use this accent color on your website.
• For next update: I implement turning on/off this automatic accent color contrast feature, so then you can switch back to original accent color

OR you can use own CSS to set overlay background manually:

.dpit-overlay {
    background-color: <color of background> !important;
}