Kerry

The original CSS that we had you won’t need anymore. Only what I mentioned here.

When displaying captions, you would set the text within the gallery image screen (not the media library). If the image does not have caption text then the overlay wont be there for that individual image.

If you’re comfortable, you can send me a login and I can take a look for you. You can send it privately on my website.

Hi, I’ve updated the plugin to v1.1 and included captions as an option for the masonry display. In the shortcode, set caption to true.

Example:
[gallery display="masonry" caption="true" ids="22,23,24,25,26,27,28,29"]

Now with the CSS, you can ignore most of what we discussed. The only items you would need is below.

.bne-gallery-masonry-wrapper .gallery-single.image-id-27 .caption-overlay { background: red; }
.bne-gallery-masonry-wrapper .gallery-single.image-id-22 .caption-overlay { background: green; }
.bne-gallery-masonry-wrapper .gallery-single.image-id-28 .caption-overlay { background: blue; }

Each image has a unique ID and is now in the HTML markup allowing you to target them specifically. So with the above, I’ve targeted the image with an ID of 27 to use a red background for the overlay, Image #22 with green, and Image #28 with blue.

You, of course, would set these to be different in the CSS. This will also allow you to display them in a random order and the IDs are unique to the image themselves.

You would need to use nth-child rules. Which would allow you to cycle the colors after each one. For example:

.bne-gallery-masonry-wrapper .gallery-single:hover:after {
    content: "";
    position: absolute;
    top: 13px;
    left: 15px;
    right: 15px;
    bottom: 13px;
    z-index: 9;
}
.bne-gallery-masonry-wrapper .gallery-single:hover:nth-child(1n+1):after { background: red; }
.bne-gallery-masonry-wrapper .gallery-single:hover:nth-child(2n+1):after { background: blue; }
.bne-gallery-masonry-wrapper .gallery-single:hover:nth-child(3n+1):after { background: green; }

Basically it would look like the following:

.bne-gallery-masonry-wrapper .gallery-single:hover:after {
    content: "";
    position: absolute;
    top: 13px;
    left: 15px;
    right: 15px;
    bottom: 13px;
    background:red;
    z-index: 9;
}

You added a padding of 13/15 to the images on your site so the above reflects that. However, there is no caption included with the masonry grid so you won’t have text displayed over the color.

This is planned to be added in a later update but not in the near term.

Hello,

You would need to target your CSS using a higher div with an ID. I can give you the CSS you need if you provide a link to your page with the gallery on it.

Yes. In the pro version, the shortcode has a read more option and you can set it to only show for testimonials longer than X characters. The default setting is off and at 250 characters. You can also set the text label that is shown.

Hello,

I can’t provide support for the pro version here, please contact me from the website where you purchased the pro version from with a link to your page and I’ll take a look.

Hello,

Unfortunately it cannot as it would go against the API terms of use — specifically Yelp.