Can I increase the hotspot circle size and make it invisible?

Can anybody reply on this.

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 9 years, 1 month ago by sushilkin.

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.

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

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.

Hi Andy,

Here are the Credentials.

Thanks

Hi Andy or Ismael,

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

Thanks.
Sushil

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 9 years ago by sushilkin.

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

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.