arrows in photo gallery upfront

I put a picture gallery from upfront on my "first" site and I wonder if could change the way the arrows are portrayed. Now they're yellow and at the end of each side.

Could the arrows be placed next to the picture with a gradient background (see attachment) so that the arrows are more visible?
Ive granted access.

  • Kasia Swiderska

    Hello rhdawson,

    Those arrows are images, so you would need to create two images like on your screenshot (and upload them to your media library) and add styles like this to your global CSS:

    button.mfp-arrow.mfp-arrow-right {
    background: url('path-to-our-image.png') 0 0 no-repeat !important;
    width: 50px;
    height: 50px;
    right: 30%;
    }
    
    button.mfp-arrow.mfp-arrow-left {
    width: 50px;
    height: 50px;
    background: url('path-to-our-image.png') 0 0 no-repeat !important;
    left: 30%;
    }

    width and height have to be your new images size. path-to-our-image.png should be real url to your new images. With values of left and right you can manipulate how far arrows will be from image.

    Let me know if you still need any further assistance here

    kind regards,
    Kasia