Edit image captions in Sketch theme Gallery

eddiemerma · Member · Jul 7, 2015 at 3:15 am
Copy link

Add topic to favorites
When I add captions to images in my gallery in a post the caption appears upon scroll over with a white background, and small black text. I would like it to appear permanently with a transparent black background and white text. How can I make this happen across all my posts?

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Jul 7, 2015 at 5:11 am
Copy link
Hi there, is this the site you are talking about http://eddiesworkshops.com? If so, can you remove the following CSS from your custom CSS please?
```
.site-footer a {
    color: #fff;
    text-decoration: none;
}
#infinite-footer .container a {
    color: #fff;
}
```
At WordPress.com, you are not allowed to hide the WordPress.com and theme footer credits per our Terms of Service (#11). See the Frequently Asked Questions on the Custom Design support page for more information.

You are allowed to restyle the footer credits to better fit with your design as long as they remain readable. If you would like help restyling the existing footer credits, just let us know.

On the captions, can you point me to an example? I looked at several of your posts and can’t find a caption when I hover.
eddiemerma · Member · Jul 7, 2015 at 5:38 pm
Copy link
Sorry about that. I removed the CSS you asked.

On the captions, I added them in my ‘about’ page over the images:
http://eddiesworkshops.com/about/

I would like to make the text box appear smaller and transparent black upon hover. Is this possible?

Thank you
thesacredpath · Member · Jul 7, 2015 at 10:56 pm
Copy link
Give the following a try and see what you think. You can adjust the opacity of the background by changing the last number in the RGBA color declaration. The first three numbers are the RGB color (black) and the last (0.4) is the opacity. The closer to 0, the more transparent, and the closer to 1, the more opaque.
```
.tiled-gallery-caption {
    background: rgba(0, 0, 0, 0.4);
    color: #fff;
}
```
eddiemerma · Member · Jul 8, 2015 at 4:22 am
Copy link
shucks, it didn’t work.
thesacredpath · Member · Jul 8, 2015 at 4:37 am
Copy link
Firebug failed me it seems. It worked when I did it originally. We can use the !important keyword to force the browser to apply the change like this.
```
.tiled-gallery-caption {
    background: rgba(0, 0, 0, 0.4) !important;
    color: #fff !important;
}
```
eddiemerma · Member · Jul 8, 2015 at 12:10 pm
Copy link
Thank you! It worked. Thanks for sticking with me on this detail.

Much appreciated.

Eddie
thesacredpath · Member · Jul 8, 2015 at 5:23 pm
Copy link
Eddie, you are welcome.

No items found.