Change lightbox triangles

  • Resolved Annekee

    (@annekee)


    8 years, 5 months ago

    I would like to replace the triangles (arrows) in the Kadence lightbox with an image or use another css arrow, but I just can’t find the place(s) where to change it. I am working on a Virtue child theme. Any idea would be welcome.

Viewing 7 replies - 1 through 7 (of 7 total)

  • Those are down with borders, you can see the css if you right click on the arrow and click inspect in your browser.

    Your targeting this these css classes “button.mfp-arrow, button.mfp-close”

    Kadence Themes

    Thread Starter Annekee

    (@annekee)

    Thank you K., yes I did exactly that, but still couldn’t realize any changes. I’ll give it a try again today!

    Do you have a link? an image your trying to replace with?

    Kadence Themes

    Thread Starter Annekee

    (@annekee)

    I’m sorry Kadence, I’m developing it locally. I tried again to locate the triangles themselves (in the button, .mfp-arrow, in .js etcetera), but to no avail. I already replaced the slider arrows without problems, so I’m not a noob. But these triangles in the lightbox… are they images? Are they css content?

    Yes they are CSS content made with border pseudo elements.

    Here is an example: 

    .mfp-gallery .mfp-arrow {
	background: url(https://i1232.photobucket.com/albums/ff372/Marcin_Gil/magnific%20example/arrows.png) no-repeat center 30px;
}
.mfp-gallery .mfp-arrow:hover {
	background-position: center -370px;
}
.mfp-gallery .mfp-arrow.mfp-arrow-right {
	background-position: center -170px;
}
.mfp-gallery .mfp-arrow.mfp-arrow-right:hover {
	background-position: center -580px;
}
.mfp-gallery .mfp-arrow:before,
.mfp-gallery .mfp-arrow:after,
.mfp-gallery .mfp-arrow .mfp-b,
.mfp-gallery .mfp-arrow .mfp-a {
	display: none;
}
    Thread Starter Annekee

    (@annekee)

    Thank you Kadence, I’m eternally grateful!

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Change lightbox triangles’ is closed to new replies.