1. Carrie Wrigley
  2. Commercial Templates
  3. Wednesday, 06 August 2014
  4.  Subscribe via email
I'm really loving the way my grid gallery displays here: counselinglibrary.org

This is using the Grafik template, but the Renovate Grid Gallery. So it's super-imposing Grafik font styles on the grid style, when the text appears (all caps.) I don't particularly like the caps used in that font, but can't figure out where to change it. I assume it would be site-wide, to both the Grid Gallery, and the side menus and other elements, right? I'd like to use something without the caps, and more similar to the font in Renovate modules and/or that more resembles the basic content font in Grafik.

I'd also like to adjust the color of the background for the text in the Gallery - perhaps to the dark blue of the Grafik header above it, or something similar. That dark blue, placed so close to the black of the module, isn't quite working. So - where do I change that color? Any chance you can give me the number for the dark blue in the header, so I can match it?
Accepted Answer Pending Moderation
0
Votes
Undo
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.)
  1. more than a month ago
  2. Commercial Templates
  3. # 1
Accepted Answer Pending Moderation
0
Votes
Undo
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
  1. more than a month ago
  2. Commercial Templates
  3. # 2
Accepted Answer Pending Moderation
0
Votes
Undo
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
  1. more than a month ago
  2. Commercial Templates
  3. # 3
Accepted Answer Pending Moderation
0
Votes
Undo
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!
  1. more than a month ago
  2. Commercial Templates
  3. # 4
Accepted Answer Pending Moderation
0
Votes
Undo
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
  1. more than a month ago
  2. Commercial Templates
  3. # 5
Accepted Answer Pending Moderation
0
Votes
Undo
Yup - worked perfect. Thanks! :lol:
  1. more than a month ago
  2. Commercial Templates
  3. # 6
  • Page :
  • 1


There are no replies made for this post yet.
Be one of the first to reply to this post!

Join Our Newsletter

* indicates required
We respect your privacy and do not tolerate spam and will never sell, rent, lease or give away your information (name, email, number, etc.) to any third party. Nor will we send you unsolicited email.
Joomla51 - Mullaghmore, Co. Sligo, Ireland
Joomla51.com is not affiliated with or endorsed by the Joomla! Project or Open Source Matters.
The Joomla! name and logo is used under a limited license granted by
Open Source Matters
the trademark holder in the United States and other countries.