How to change background color inside magnifying glass viewing area?

  • Resolved agg2

    (@agg2)


    7 years ago

    My website has a black background but the background inside the magnifying lens viewing area is set to white. How can I change this? Seems I can’t touch this styling because you put it inside an iframe.

    <div class="zoomLens" style="... background-color: white; ...;">&nbsp;</div>

    The page I need help with: [log in to see the link]

Viewing 14 replies - 1 through 14 (of 14 total)
  • Plugin Author David Rosendo

    (@drosendo)

    Hi,

    There is no iframe, what you are showing me is the zoomLens that is in absolute position.

    you can try this

    div.zoomLens{background-color:transparent!important;}

    If you issue is fixed, please close this thread, and if you like my plugin please do review I really appreciate it.

    Cheers,
    David

    Thread Starter agg2

    (@agg2)

    It didn’t work for me: see this sample product page. If you hover around the edges of the image, the background appears as white.

    Plugin Author David Rosendo

    (@drosendo)

    Hi,

    The code I gave you does work…

    
.zoomLens {
    background-color: transparent !important;
}

    Now if its not applying maybe you are putting the css in the wrong place.

    try inserting in: Apperance > Costumize > Additional CSS

    Cheers,
    David

    Thread Starter agg2

    (@agg2)

    Sorry – my bad, I had a stray curly bracket preceding the code. It has fixed the problem – thank you for your prompt replies. Fast support is hallmark of a good developer. My utmost thanks!

    Plugin Author David Rosendo

    (@drosendo)

    Hey,

    No problem ??

    if you like my plugin please do review I really appreciate it.

    Cheers,
    David

    Thread Starter agg2

    (@agg2)

    Of course, done. 5/5.

    Plugin Author David Rosendo

    (@drosendo)

    Awsome! Thanks!

    Cheers,
    David

    Thread Starter agg2

    (@agg2)

    Is there a reason the default isn’t transparent by the way? Just a suggestion…

    Plugin Author David Rosendo

    (@drosendo)

    Actually it’s not me, its the jquery plugin for the zoomlens ??

    I just let it be…

    https://igorlino.github.io/elevatezoom-plus/

    Cheers,
    David

    Thread Starter agg2

    (@agg2)

    Perhaps you could consider overriding the jquery plugin in a future update? It seems to me that white does not work in all situations, whereas transparent always works regardless of theme variations.

    • This reply was modified 7 years ago by agg2.
    Plugin Author David Rosendo

    (@drosendo)

    Yeap!

    My future update is SVI v4, it’s a major change! many things will change ??
    I will keep that in mind.

    Thanks,
    David

    Thread Starter agg2

    (@agg2)

    Actually, I retract my earlier request/suggestion about setting 

    .zoomLens {
    background-color: transparent !important;
}

    It will cause a visual glitch. It should be set to black in my case, or whatever the website’s background color is, not transparent.

    Plugin Author David Rosendo

    (@drosendo)

    Hi,

    Then just apply the black background

    div.zoomLens{background-color:#000!important;}

    CHeers,
    David

    Thread Starter agg2

    (@agg2)

    Yes, thanks. It is easy once you know the relevant CSS selector. ??

Viewing 14 replies - 1 through 14 (of 14 total)
  • The topic ‘How to change background color inside magnifying glass viewing area?’ is closed to new replies.