Plugins Intro Tour Tutorial Support Disable focus on element overlay ...
Notifications
Clear all

[Solved] Disable focus on element/overlay

7 Posts
2 Users
0 Likes
326 Views
(@jess)
Posts: 8
Active Member Customer
Topic starter
 

Hi! Usually when you add a tour item/tool tip, the subject element/overlay is somewhat highlighted and the background is either dimmed our blurred via the option (Should Be Content Under Overlay Blurred?). Is there any way to remove this dimming/blurring effect entirely? Basically I need the whole page to remain the same colour, and the tool tip to simply appear at the designated places. Help?

Thanks!

 
Posted : 17/03/2023 1:34 pm
(@admin)
Posts: 85
Member Admin
 

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;
}

 

 
Posted : 20/03/2023 5:16 pm
(@jess)
Posts: 8
Active Member Customer
Topic starter
 

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

 
Posted : 20/03/2023 6:13 pm
(@admin)
Posts: 85
Member Admin
 

@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.

 
Posted : 21/03/2023 2:51 pm
(@jess)
Posts: 8
Active Member Customer
Topic starter
 

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!

 
Posted : 22/03/2023 11:23 am
(@jess)
Posts: 8
Active Member Customer
Topic starter
 

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!

 
Posted : 03/05/2023 10:52 pm
(@admin)
Posts: 85
Member Admin
 

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;
}
 
Please check the CSS Customize documentation, to see how to customize style of tours by own CSS.
 
Posted : 05/05/2023 3:02 pm
Share:
chevron-right-circle linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram