change hotspot symbol

Hey Stefan,

Thank you for the inquiry.

Yes, this should be possible with CSS modifications. Please add the following code to the Quick CSS field:

.av-hotspot-container-inner-wrap .av-image-hotspot:nth-child {
    width: 20px;
    height: 20px;
}

.av-hotspot-container-inner-wrap .av-image-hotspot:nth-child(1) .av-image-hotspot_inner {
    background: red;
}

The first CSS rule adjusts the size of the hotspots, and you can modify the width and height values as needed. The second rule applies a different background color (red in this case) to the first hotspot. If you want to use an image as the background, you can replace the background property with the appropriate CSS code for setting a background image.

For more information on working with background images in CSS, you can refer to the following resource: https://www.w3schools.com/cssref/pr_background-image.php

Feel free to customize the code according to your specific requirements. Let us know if you have any further questions or need additional assistance.

Best regards,
Ismael

Hi,

Thank you for the update.

The image is not displaying correctly because it a little bit larger than the hotspot container. To fix the issue, you may need to specify the background-size property.

.av-hotspot-container-inner-wrap .av-image-hotspot:nth-child(1) .av-image-hotspot_inner {
    background-image: url("https://test.s-design.tirol/Salzraum/wp-content/uploads/fahne.png");
    background-size: contain;
}

Best regards,
Ismael

Hi,
Thanks for the link to your page, I don’t see a pulsing animation for the hotspots so I assume that you figureed that out, but your flag image doesn’t have a transparent background, so if you want it to you will need to change the image:

Best regards,
Mike

Hi,
True that the flag is a PNG but it doesn’t have a transparent background, please check in a image editor.
When I check in my image editor the background is white & gray boxes:

this is a PNG that does have a transparent background:

Perhaps you have a version of this on your computer that dose have a transparent background, but the on on your website is not, try downgrading it and checking
To hide the numbers try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

#top .av-hotspot-image-container .av-image-hotspot .av-image-hotspot_inner {
    color: transparent;
}

After applying the css, please clear your browser cache and check.

Best regards,
Mike

Hi,
Try adding
background-color: transparent;
color: transparent;
like this:

.av-hotspot-container-inner-wrap .av-image-hotspot:nth-child(1) .av-image-hotspot_inner {
background-image: url("https://test.s-design.tirol/Salzraum/wp-content/uploads/2023/06/salzraumfahne-40.png");
background-size: contain;
background-color: transparent;
color: transparent;
}

Best regards,
Mike

Hi,
Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike