Gallery caption font

[ypryor]

Hi there,

How can I change the colour of gallery captions? They are white by default and I can't see any options for changing the colour.

Thank you in anticipation of your help.

Kind regards,

[Adam7]

We don't include a color option for gallery captions in Theme > Change Fonts, so you'd need to do this with CSS customizations. Are you familiar with CSS and HTML at all, @ypryor?

[ypryor]

Thanks Adam for your reply to my enquiry. I'm not familir with CSS  and have only basic understanding of HTML. But I do have a science and programming backgroud. Please provide instructions as to the way forward. I'm sure I'll make sense of it (with a bit of research along the way).

Kind regards,

[BJ5]

Is your site published? I could probably give you a quick css override that you could paste into Settings > SEO > Header Code.

[ypryor]

Yes, the site is published:

www.highlandsmediator.com

Thanks

[BJ5 · Accepted solution]

Add this to Settings > SEO > Header Code, and it will change the color on the published site:

<style>
    .imageGallery .galleryCaptionInnerText
    {
        color: #f8eaa9 !important;
    }
</style>

That hex code can be changed to something else; one in my example is the color used right above the gallery.

[ypryor]

Fantastic! Many thanks, BJ.

[BJ5]

You're welcome!

[benj2]

Hi weebly,

When i hover on my gallery images, the caption font color or either opacity is too light, which the they are not easy to read.
May i know how to change the font color to solid white? Thanks.
It needs to be applied to all gallery page.

Here's one of the pages I'm talking about.
https://www.kwokwahtyre.com/mb-e-cls.html

ben

[Bernadette3]

Hi @benj Thanks for posting. It doesn't look like there's an option to change the font color in the editor, but there is an option to bold the font. I think that could definitely help. Log into the editor and click Theme>Change Theme>Gallery Captions. You should see the dropdown to change the style of the font to bold. 

[Rally1]

BJ

Your code to change the Caption text works.

I want to change the Background colour so I used

<style>
.imageGallery .galleryCaptionBackground
{
color: #f8eaa9 !important;
}
</style>

But that didnt work . Please what is the wording used to change the Background

Thanks

[BJ5]

That's great! You want something more like this:

<style>
.imageGallery .galleryCaption
{
background-color: #f8eaa9 !important;
}
</style>