PS - I did some homework, trying to learn more about how HTML colors work, especially at this website: http://html-color-codes.info/color-names/. For the life of me, I can't find a color that matches any of those dark header hues used in Grafik.

I think what I'd like to do is have the caption area in my GridGallery match the colors of the Search Box - that steel grey interior with a navy border. Or, to match the dark navy area inside of the lighter blue in the header.

Is it possible to send me color codes for these two colors (the steel grey and the navy?) None of the basic ones seem to work (I just tried various color for an hour, without success.)

Hi Carrie

To remove the uppercase from your GridGallery module you can add the following to the Custom CSS field of your templates parameters..

.j51gridgallery figcaption {

    text-transform: none;

}

Ciarán

Hi Carrie

Presuming you are using FireFox or Chrome, an excellent tool we use a lot here at Joomla51 is the Colorzilla plugin. This browser plugin allows you to click on any color within your browser window and it will copy the hex code for that color to your clipboard... http://www.colorzilla.com/

Steel Grey: #E7E9EA
Navy/Blue: #587695

Ciarán

Ah yes - so much better without the caps! And... the Colorzilla tool is utterly amazing - SO helpful, thank you! The colors you sent me actually weren't quite the ones I meant - but I was able to download Colorzilla to both browsers, and easily select the colors I intended - bringing an absolutely breath-taking result. So pretty!!

Now, two last little fine-tuning tweaks needed on this Grid Gallery:

1) I now have the caption border set to navy blue, which shows up great on the top and bottom. However, since all of my images are very light colored, when the caption box pops up, it appears to have a white border on the sides. I think perhaps the caption box just is a few pixels too narrow to cover the photo fully . Is it possible to adjust this width so that the blue borders will show on the sides rather than the white overflow? (See counselinglibrary.org, GridGallery on top of home page, to see what I'm talking about.)

2) On Image 4, the text wraps so far to the side on the second line that it crashes into the border - though there's plenty of room left on the 3rd line. Milder versions of this spacing problem appear on a few others. I tried adding a space or two within the text, but the HTML ignored it. Is there some CSS or something that could add just a little bit of padding on the sides so it spaces out better?

Thanks again for all your help!

Hi Carrie

Could you try adding the following to the Custom CSS field of your templates parameters which will hopefully resolve both issues ..

.grid figcaption {

    box-shadow: none;

}

.grid figcaption span {

    display: block;

    padding: 0;

}

Ciarán

Yup - worked perfect. Thanks! :lol: