changing color behind caption in slideshow

[tvtpapa]

Hi guys,

I had a look around the community and wasn't able to find anything on this topic so here it goes - does anyone know of a way to change the color of the area behind the caption in the slideshow.  It's currently the "primary" color which can be chosen in the themes section, but this doesn't look so good on the slideshow.  I've had a look around the CSS (which I'm not so familiar with) but it looks like it may be able to be changed in the "variables.less" section.  If anyone has any ideas or advice, I'd be greatly obliged.  Thanks.

[Adam7]

Is your slideshow live, @tvtpapa? It's probably easier to look at the rendered code to figure out what to change.

[tvtpapa]

Thanks Adam.  Yes the slideshow is live.  I understand you can't give too much direct help with CSS (and I'm a true novice at it) but what is meant by the rendered code, and where would it be.

[Bernadette3]

I believe Adam is referring to using the inspect tool. If you right click on the page you should see the option. In Chrome, at least.  

[tvtpapa]

Thanks Bernadette.  I found what you were referring to and think I can see where the color can be changed.  However I'm probably getting in a little over my head here.  

[Bernadette3]

That's how I feel, too, @tvtpapa! What is the site name? Maybe there's a non-css work around.

[tvtpapa]

My humble site is turtle-valley-toys.com . I think you'll see what I was talking about and the problem is even more noticeable on mobile.  Thanks again for your help.

[Bernadette3]

Thanks for posting. I think the green looks quite nice with your photos. What color are you wanting to change it to? 

Also, wow! Do you hand make those toys? And that view is breathtaking! 

[tvtpapa]

Thanks for having a look Bernadette.  The green is OK but it covers most of the image when looking at it on mobile.  I think I found a different workaround but it's led to another problem.  I was able to chage the opacity of the color so it's much less noticeable.  This was done in the CSS by changing it from 0.7 to 0.1.  It looks great in the site editor now but even though I've saved the CSS changes and re-published the website, its not changing in the published version.  Any thoughts on why this may be?

And yes, I do make those toys as part of my side/hobby business here in Japan.  The view is great although can be a little scary if you're afaid of heights!

[Bernadette3]

I'm not the one to ask, I'm afraid. Adam can take a look tomorrow for you, though! Or there may be another member on tonight that has a suggestion for you.

[Adam7]

It looks like it's being overridden by CSS we use for the slideshow. In the opacity rule, add an important declation like this:

opacity: 0.1 !important;

[tvtpapa]

Thanks again Adam.  I did as you suggested but it hasn't seemed to change the opacity to 0.1 even when saved and published.  I do think we're getting close to the solution though.  Any other thoughts or suggestions?

I had an idea to go back and edit my original photos to create a "blank" area for the caption at the bottom of the photo, but I'm not sure how it would look, especially on mobile.  It also would be pretty time consuming.

[Adam7]

Yea, that would definitely not be ideal. I think you might need to change it for a different set of rules. Look for this:

.galleryCaptionHolderInnerBg, .wslide-caption-bg {
	background: #548f2d !important;
	opacity: 0.1;
	-webkit-transition: opacity 200ms ease-in;
	-moz-transition: opacity 200ms ease-in;
	-ms-transition: opacity 200ms ease-in;
	-o-transition: opacity 200ms ease-in;
	transition: opacity 200ms ease-in;
}

and try changing to this:

.galleryCaptionHolderInnerBg, .wslide-caption-bg {
	background: #548f2d !important;
	opacity: 0.1 !important;
	-webkit-transition: opacity 200ms ease-in;
	-moz-transition: opacity 200ms ease-in;
	-ms-transition: opacity 200ms ease-in;
	-o-transition: opacity 200ms ease-in;
	transition: opacity 200ms ease-in;
}

[tvtpapa]

Hi Adam,  thanks again for all your help on this.  I've edited it as you've suggested but it still stays the same when I publish the site.  I only see the one place to make the changes in the CSS as you pointed out in your previous post.  Is there another place where the opacity should also be changed to 0.1?  I've added the !important delaration as well. Hope this isn't taking up too much of your time.

Scott

[Adam7 · Accepted solution]

It's no problem at all! Try this in Settings > SEO > Header Code to see if it works on the live site:

<style>
	.wslide-caption-bg
	{
		opacity: 0.1 !important; 
	}
</style>

For some reason the changes you made aren't showing on the live site code, so maybe this will work better.

[tvtpapa]

Yes! That did the trick.  Once again, thanks for all your help, and a thanks to Bernadette too if she sees this.

本当にありがとう。

Scott

[Adam7]

Awesome! Glad to hear that.