Michael

Hello Yasin. I was able to get help in another forum post, where I was provided the following CSS code to add for the intended result, which I have used at the following page:

https://www.storageconsignments.com/shop-preowned/

Here is the CSS code I pasted into Astras customizer:

a.bwg-a {
position: relative;
}

.bwg-title1 {
position: absolute;
background-color: #00000080;
padding-top: 5px;
padding-bottom: 5px;
bottom: 0px;
}

I love the options for 10web galleries and I still might upgrade. I will contact the support team to get clarification on the cost.

Thank you!

Oh sure. I didn’t know. Well then thank you so much for the kind help!

So I added that code to my CSS and it didn’t change the font color, but then I realized something. One of the reasons I wanted to switch from Envira to 10Web gallery plugin is that 10Web has many more options in their user interface (they have more options in their free interface than Envira in their paid version). They don’t have caption positioning but they do have text color! Duh. So I just went in and switched it to white, with the rest of your CSS code from before pasted into the customizer. Anyway, I really appreciate your help, as you aren’t being paid to help me. Are you in the US? I’d like to send you a $20 tip for your help. Do you have Venmo?

Thank you! I copied your code and changed it a little. I have a hazy understanding of how this is working. That first code snippet enabled the second one to position correctly. I don’t want dark font with a white outline, just a white font. But when I put color: white; the color remains dark gray. Is there a way to make the font white and why is the last thumbnail lower than the rest? (UPDATE: I just realized that the last thumbnail is lower than the rest only in the gallery “preview” but the actual page does not have that problem so that doesn’t seem to be an issue – disregard).

But why isn’t my font white? I’m so close! Thanks again for your help!!

a.bwg-a {
position: relative;
}

.bwg-title1 {
position: absolute;
color: white;
background-color: #00000080;
padding-top: 5px;
padding-bottom: 5px;
bottom: 0px;
}

• This reply was modified 10 months, 3 weeks ago by Michael.
• This reply was modified 10 months, 3 weeks ago by Michael.

This is how I want my thumbnails to look. Can you share with me the CSS code that I will need to put in my Astra customizer to make them look like this?

Also, can you clarify for me, if I pay $30 for the basic plan, I get support and updates for 6 months. Do I have to renew the basic plan or is it for lifetime access?

• This reply was modified 10 months, 3 weeks ago by Michael.
• This reply was modified 10 months, 3 weeks ago by Michael.

No… that was the wrong selection. I’m really trying to figure out the code on my own but I may need help. The class that I need to modify is in here, right? But I tried to modify “bwg-title1” and “bwg-title2” individually and in combination and none of those worked. Any suggestions as to what my amended CSS code snippet needs to be?

The class I need to amend is somewhere in here right? Is it “skip-lazy bwg-masonry-thumb bwg_masonry_thumb_0”?

• This reply was modified 10 months, 4 weeks ago by Michael.

So to fix the captions in the Envira gallery, they told me to go to Astra/Customize/Additional CSS and paste the following code into the textbox:

.envira-gallery-item-inner .envira-title {
position: absolute;
bottom: 0;
text-align: center;
color: #fff;
background-color: #00000080;
padding-top: 10px;
padding-bottom: 10px;
}

So to fix the 10web gallery linked in the thread above, I would need to find the equivalent name to replace “.envira-gallery-item-inner and .envira-title” right? And I would do this by right clicking on the thumbnail and selecting “inspect” which shows the HTML and CSS code. I feel like I’m almost to a solution. Forgive me, it has been years and I only took the one class, but this feels like it should be simple to figure out.

Thank you. I don’t know any PHP. I found a gallery plugin by 10web that allows a great number of customization and 9 free gallery styles, and I will try to apply your CSS suggestion to modify where my captions are located (over the thumbnail). Tech Support at Envira showed me how to add CSS to modify the caption, so I think I just need to figure out how to do the same with the 10web gallery, located here: https://www.storageconsignments.com/bwg_gallery/test2
I would rather use 10webs free gallery, which has more options than Envira’s “Basic” plan.

Thank you for your response. I did take an HTML and CSS class but it was 15 or 20 years ago, and I forgot most of it. If I can’t find a plugin with this design option, I will have to figure out how to do what you recommend. When I try to view the HTML in the block editor for the gallery, it only shows the “short code”. Anyway, thank you!

Yes. I spent a couple hours installing plugins earlier today. None of them had the appearance I needed in the free version, and I didn’t want to keep paying for premium versions only to reach a dead end like I did with Envira. Maybe I’ll try my luck with some additional plugins. I can’t believe that after all the challenges I faced, I am finally at a standstill so close to the end of having my site done.