Tagged: ,

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • August 5, 2015 at 8:47 pm #483586
    haydaw

    Hello,

    I currently have a page with 3 image-with-hotspot elements in a row vertically, and I would like the numbers to be continual instead of starting over for each element. For example, instead of 1-2-3, 1, 1, I would like it to be 1-2-3, 4, 5.

    I saw another post in regards to changing them to stars, and I believe this would be similar, however I am not sure about how to adjust the numbers per item.

    Link below.

    Thanks!

    August 6, 2015 at 4:11 pm #483988
    Elliott

    Hey haydaw!

    I don’t see an easy way of going about that except for using CSS.

    Add this to a codeblock element in the page.

    <style type = "text/css">
#top .av-image-hotspot_inner {
    color: #0097E3 !important;
}
.av-image-hotspot_inner::after {
    display: block;
    color: white !important;
    position: absolute;
    top: 0px;
    left: 8px;
}
.avia-builder-el-21 .av-hotspot-container-inner-wrap > .av-image-hotspot:nth-child(1) .av-image-hotspot_inner::after {
    content: "1";
}
.avia-builder-el-21 .av-hotspot-container-inner-wrap > .av-image-hotspot:nth-child(2) .av-image-hotspot_inner::after {
    content: "2";
}
.avia-builder-el-21 .av-hotspot-container-inner-wrap > .av-image-hotspot:nth-child(3) .av-image-hotspot_inner::after {
    content: "3";
}
</style>

    Regards,
    Elliott

    • This reply was modified 9 years, 4 months ago by Elliott.
    May 13, 2016 at 9:05 am #631924
    neburayar

    Hi, I´m trying to renumber the hotspots too, I need instead 1, 2, 3, 4, etc, that show 234, 432, 123, etc….. I´m trying that css, but I don’t know why is not working for me. Can you help me, please? Thank you!

    May 15, 2016 at 7:08 am #632454
    Rikard

    Hi,

    Could you provide us with a link to the site in question so that we can take a closer look please?

    Thanks,
    Rikard

    May 15, 2016 at 11:43 am #632495
    neburayar

    Hi, thank you! You are saving my life!!

    May 17, 2016 at 8:25 am #633546
    Ismael

    Hi,

    We checked the site but the hotspot is set to blank. Please create a test page. If you want the number to continue on two hotspots, add 3 hotspots to the first image and then 6 hotspots for the second. We can then use css nth child selectors to hide the first 3 hotspots for the second element. Example:

    .av-hotspot-container-inner-wrap .av-image-hotspot:nth-child(-n+3) {
    display: none;
}

    Best regards,
    Ismael

    February 21, 2017 at 2:48 pm #749993
    ermington

    Hi, apologies for the thread necromancy but having trouble making the above css work, could you offer any advice?
    test page url included as private link.

    February 27, 2017 at 6:03 am #752150
    Ismael

    Hi,

    @ermighton: What do you want to do with the hotspots exactly? The css code above might not work in your case because the hotspot element is setup differently.

    Best regards,
    Ismael

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.