Tagged: ,

Viewing 27 posts - 1 through 27 (of 27 total)
  • Author
    Posts
  • #529601

    Hi,

    I am using hotspot feature on the page deltacontrolstoronto.com/solutions. I want to make hotspot invisible and also increase the size so that it can cover each image. So that if someone hover any image, tooltip shows and by clicking it go on particular link.

    Can you please help.

    #530467

    Can anybody reply on this.

    #530833

    Hi!

    Please turn on custom CSS field for ALB elements – http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/ and then give your element a custom class and then add following code to Quick CSS in Enfold theme options under General Styling tab

    .your-custom-class .av-image-hotspot.av-display-hotspot {
        opacity: 0;
        height: 70px;
        width: 70px;
    }

    Regards,
    Yigit

    #531127

    Hi Yigit,

    Thanks for your response.

    I checked the link it says Turn on Custom CSS Class Field.

    “Once enabled (How to enabled?), the following function adds a new field to each of your Advanced Layout Builder element’s pop up menu.
    First Add this line of PHP to your functions.php file so that the custom class field is enabled:
    add_theme_support(‘avia_template_builder_custom_css’);”

    Can you please tell How I can “Turn on Custom CSS Class Field”

    If you can tell step by step then it will be very easy for me. I am not a Coder but I can do exactly you suggest.

    Also I am using Enfold Child Theme, So do I need to edit function.php of child theme or main?

    Thanks,
    Sushil

    • This reply was modified 8 years, 4 months ago by sushilkin.
    #531134

    Hey!

    Please add the code provided in the link i posted to the functions.php file in Appearance > Editor and then edit your element add, for example “my-custom-class” into custom CSS field and then add the code to Quick CSS field

    Best regards,
    Yigit

    #531162

    Hey Yigit,

    Thanks for your help I done it. So what I could understand is here:

    Step 1. Go to Appearance> Editor – Select Enfold Theme (if you are using Enfold Child) then Select Theme function file (functions.php)

    Step 2. Just remove // in front of the add_theme_support(‘avia_template_builder_custom_css’); function and update
    (this code is already in functions.php you can just copy and this code and use Ctrl+F to find its location)

    Step 3. Open the page where you are using hotspots and put any unique name for class under Custom Css Class field
    (you can use name with some prefix for example dct-hotspot, dct is prefix so, it makes the class name unique)
    Step 4. Navigate to Enfold theme options under General Styling tab, put the following code under Quick CSS section.
    .dct-hotspot .av-image-hotspot.av-display-hotspot {
    opacity: 0;
    height: 70px;
    width: 70px;
    }

    Step 5. Refresh the page. All done, see the change. hot spots are not invisible.

    #531163

    Hey!

    Do you mind creating a temporary admin login and posting it here privately?

    Regards,
    Yigit

    #531283

    Hi Yigit,

    It’s okay. I don’t know how to create admin login.

    My problem is solved but if you can look at the page, hot spots taking time to get invisible. first it shows all the hotspots and then making invisible one by one as per their sequence.

    Thanks,
    Sushil

    #531709

    Hi Yigit,

    Can you please reply.

    Thanks
    Sushil

    #532303

    Hey!

    I don’t see the hotspots anymore when I checked the site. Did you fix it? Please remove browser cache then reload the page.

    Cheers!
    Ismael

    #532834

    Hi Ismael,

    Yes I implemented, but it works slowly.
    I checked and recorded video for you.
    Please check here.
    https://www.youtube.com/watch?v=is0aeN-RUFI

    It first loads all the hotspots and then make it invisible one by one.

    Thanks,
    Sushil

    • This reply was modified 8 years, 4 months ago by sushilkin.
    #533037

    Hey!

    Alright. I can see the issue now. Please add this in the Quick CSS field:

    .av-hotspot-container .av-image-hotspot-pulse {
        display: none !important;
    }
    
    .av-hotspot-container .av-image-hotspot_inner 
        background: transparent !important;
    }

    Remove browser cache then reload the page.

    Regards,
    Ismael

    #537018

    Hi Ismael,

    I put the above code after the existing code in quick CSS but issue is still the same.

    existing code is
    #top .dct-hotyspot .av-image-hotspot.av-display-hotspot {
    opacity: 0;
    height: 70px;
    width: 70px;
    }

    When I tried to put code above the existing code, all the white hotspots were visible (not disappear).

    #538724

    Hey!

    My bad. Yes, the hotspot still displays. Please add this code:

    .av-hotspot-container .av-image-hotspot-pulse {
        display: none !important;
        animation: none !important;
    }

    Remove browser cache then hard refresh the page. If it doesn’t work, please post the login details here.

    Cheers!
    Ismael

    #539174

    Hi, I put the above code and the final code is:
    #top .dct-hotyspot .av-image-hotspot.av-display-hotspot {
    opacity: 0;
    height: 70px;
    width: 70px;
    }
    .av-hotspot-container .av-image-hotspot-pulse {
    display: none !important;
    }
    .av-hotspot-container .av-image-hotspot_inner
    background: transparent !important;
    }
    .av-hotspot-container .av-image-hotspot-pulse {
    display: none !important;
    animation: none !important;
    }
    issue is same. No change

    #539182

    I also tried following
    #top .dct-hotyspot .av-image-hotspot.av-display-hotspot {
    opacity: 0;
    height: 70px;
    width: 70px;
    }
    .av-hotspot-container .av-image-hotspot-pulse {
    display: none !important;
    animation: none !important;
    }

    problem is same as before.

    #540942

    Hey!

    as Ismael already said: if it does not work, then please send us login details.

    Best regards,
    Andy

    #541140

    Hi Andy,

    Here are the Credentials.

    Thanks

    #543354

    Hi Andy / Ismael,

    Any updates?

    #544923

    Hi Andy or Ismael,

    no one is replying. Can you please tell how much time it will take to resolve this issue.

    Thanks.
    Sushil

    #545438

    Hi!

    Sorry for the late reply!

    Video you posted here – https://kriesi.at/support/topic/can-i-increase-the-hotspot-circle-size-and-make-it-invisible/#post-532834 is private so i could not check it. I included a screenshot to show you how it looks like on my end.
    Can you please explain what is the current issue so we can make sure to understand it?

    Best regards,
    Yigit

    #545497

    Hi Yigit,

    Please have a look on video now.
    in fact your screenshot is also not working for me. (Image could not be loaded)

    You can see in the video, all hotspots visible at page load and disappear one by one. I want not to show white hotspots. only invisible.

    Regards,
    Sushil

    • This reply was modified 8 years, 4 months ago by sushilkin.
    #545505

    Hi!

    I added following code to Functions.php of your child theme in Appearance > Editor

    
    function add_custom_hotspot(){
    ?>
    <script>
    jQuery(window).ready(function(){
    jQuery('.av-image-hotspot').addClass('av-display-hotspot');
    });
    </script>
    <?php
    }
    add_action('wp_footer', 'add_custom_hotspot');

    Please review your website now

    Regards,
    Yigit

    #545511

    Hi Yigit,

    Now all hot spots are visible for one second and then disappear all.
    But It works better now. It’s an acceptable solution.

    Just for an idea, is it possible to change the color and shadow of hot spot to transparent instead of white or any color in hotspot properties.

    Regards,
    Sushil

    #546766

    Hey!

    I can’t find any hotspots at all at the link in private content. So it seems to me that you already achieved what you wanted, right? If not explain exactly where we can see what you are talking about and use screenshots to hightlight your intentions please.

    Regards,
    Andy

    #546771

    Hi Andy,

    Now these hot sports can’t be found easily. When somebody load the the page first time, or refresh the page 2-3 times then hotspot shows for fraction of a second. I already said its an acceptable solution for me. It’s done for me.

    But this time I am only suggesting that if, you provide the option to change the color of hotspot, pulse colour to transparent and option to increase size at hotspot properties (see the snapshot), its good for users to customize as per their need. May be in next update.

    #547919

    Hey!

    Please feel free to request such feature here – https://kriesi.at/support/enfold-feature-requests/ :)
    I am marking this thread as resolved for now to avoid confusion :) Let us know if you have any other questions or issues!

    Cheers!
    Yigit

Viewing 27 posts - 1 through 27 (of 27 total)
  • The topic ‘Can I increase the hotspot circle size and make it invisible?’ is closed to new replies.