New to the community? Start here

[Hustle Pro] Slider close options and overlay

0

When using pop-ups, there’s an option for users to close them by clicking away from the pop-up. It would be great to have that as an option for sliders. It would also be great to have the semi-transparent background behind the slider or some kind of background under the close X and “never see this again” text to make them more visible.

Mon, 27 Jul 2020 19:03:27
More Hustle Pro discussions
Hustle Pro
  • Adam
    • Support Gorilla

    Hi SJNBham

    I hope you’re well today!

    As for the semi-transparent background overlay and option to close slide-in by clicking on background too – I’ve already passed your suggestion to our Hustle development team for consideration.

    As for adding background under “X” and “never see this again”, I think we could use some additional CSS for this.

    If you could, please, point me to the slide-in in question so I could see it “live” on your site, I’d be happy to look into it and help you with it.

    Best regards,
    Adam

  • Adam
    • Support Gorilla

    Hi SJNBham

    Thanks!

    Adding CSS like this to the site – via “Appearance -> Customize -> Additional CSS” rather than Hustle’s custom CSS – should add background to the “X” icon:

    .hustle-ui .hustle-button-icon [class*="hustle-icon-"] {
  background:rgba(255,0,0,0.5)!important;
  padding:10px;
}

    This one sets “half”-transparent red background so you can change the color (in RGB format) and transparency (that’s the 0.5 value in background line) and you might want to adjust padding to your liking.

    This padding along with background should also make it more visible and “easier to tap” (as it will be bigger) on mobile devices, I believe.

    Best regards,
    Adam

  • SJNBham
    • Design Lord, Child of Thor

    Hi Adam,

    I was just recommending some of those styling changes as the default for the plugin.

    Also, I think we’re seeing a different experience related to the issue on mobile with the close button being hard to hit. After some experimenting, I think it’s because we’re using the Compact styling. When we use the Default styling, the popup doesn’t have an issue. When we use the Compact styling, the popup content isn’t getting the padding on the right like it is on the left for mobile.

    Try these two popups to reproduce:

    Example Default style: https://bhamdev.wpengine.com/gov/court/courtroom-video
    Example Compact style: https://bhamdev.wpengine.com/

    Tried this with the TwentyTwetnty theme enabled to try to rule out conflicts in styling there and the issue persisted.

  • Adam
    • Support Gorilla

    Hi SJNBham

    Thanks for response!

    I tried to test that on my own setup with both Default and Compact styles but I didn’t experience any issues like that – with the right padding. I can see that on your example page but can’t get it the same way on my own setup.

    I think this might be a matter of some specific setting of popup then.

    There’s an option to export any module form Hustle (under the “gear” icon for given popup/slide in on the list). Could you export the troublesome one, please, and share .json file with me (preferably via your Google Drive, Dropbox or similar file storage – just share download link with me)?

    I’ll import it to my setup and do some more testing on it so we could “pinpoint” what’s causing it and fix it.

    Best regards,
    Adam

  • Adam
    • Support Gorilla

    Hi SJNBham

    Thanks for response!

    I’m sorry but I’m getting “asset not found” message when I’m trying to access the link. Could you check if the link is correct or re-upload the export form (if you removed it)?

    Alternatively,. you can simply grant me support access to the site in question and I’ll check it there. To grant support access, go to the “WPMU DEV -> Support -> Support Access” page in site’s back-end and click on “Grant support access” button there then let me know here once it’s done.

    Kind regards,
    Adam

  • Adam
    • Support Gorilla

    Hi SJNBham

    Thanks for granting support!

    I imported both these exmaple popups to one of my test sites and… I still can’t replicate the problem there. I can see how the “compact” popup goes behind the screen edge on your site but the same popup on my end works perfectly fine.

    That would confirm that it’s “something” specific to the site that’s affecting this so I’d need to look into it more directly on the site.

    Can I (temporarily, just for testing) set the popup on your site to not disappear automatically after 30 seconds and try some small CSS tweaks (fully reversible of course) right on the site?

    Let me know if you’re fine with that, please.

    Kind regards,
    Adam

  • SJNBham
    • Design Lord, Child of Thor

    Hi Adam,

    Thanks for confirming the popup is working on your site. You’re welcome to turn off the autoclose to poke around with CSS. We were just trying to ensure it wasn’t something with the plugin code accommodating the content and settings we were applying. So there must be something in our site theme or child theme or another plugin that’s causing the issue. No worries if you want to close this ticket without investigating further.

  • Adam
    • Support Gorilla

    Hi SJNBham

    Thanks for response and allowing for changes.

    Unfortunately, the support access to the site is no longer active so I can’t access the site to “play around” anymore. It’s time-valid and it expires on its own for security reasons.

    Would you please grant it again for me?

    I’m very sorry for the delay on my end, we’ve had some more inquires to deal with recently than usually but we are “back on tracks” now.

    Kind regards,
    Adam

  • Adam
    • Support Gorilla

    Hi SJNBham

    Thanks! I see you’ve granted access to “bhamdev…” site and the issue can be replicated there so I did some more testing there too.

    It seems to be related to how Hustle’s and site’s CSS “interact” with each other, making 100% width of popup becoming slightly to much on mobile devices.

    I’ve added this CSS to “Appearance -> Customize -> Additional CSS” and after the cache got cleared, it seems to be helping: 

    /* HUSTLE POPUP TWEAK */
@media screen and (max-width:840px) {
  .hustle-ui.hustle-popup {
    width:97%!important;
  }
}

@media screen and (max-width:480px) {
  .hustle-ui.hustle-popup {
    width:96%!important;
  }
}

    Take a look at the site please and let me know if it’s better now (note: you might need to clear browser’s cache or use incognito mode).

    Best regards,
    Adam