The Grid CSS classes

Support
#1

In The Grid, on this page: http://staging.jeremyborum.com/credits/

I’m trying to style the text which pops up when the mouse hovers over my images. That text is the image title, excerpt text (image caption in the WP backend), and links. This code almost works, but the colors fail. When I change the colors in the Chrome Inspect Element window it DOES work, which is weird. Could you please tell me why the font size, line height, and text decoration work properly, but the colors have no effect?

These styles are in my style.css in themes/pro-child/

Many thanks.

/* Image title <h2> */ .tg-item .tg-light h2 { color: blue; font-size: 18px; } /* Excerpt (image caption) text <p> */ .tg-item .tg-light p { color: #abcdef; font-size: 15px; line-height: 18px; } /* Links in the excerpt (image caption) text */ .tg-item .tg-light a:link { color: #fedcba; text-decoration: underline; } .tg-item .tg-light a:hover { color: red; text-decoration: underline; }

Before you tell me that you can’t offer support:

Both you and Theme-one both refuse to provide support for TheGrid specifically because it was bundled with X. This is confusing, unfair, and wrong.

I have seen you write repeatedly on this forum:

The grid is a 3rd party plugin. Though it is bundled in the theme, we are not familiar of the code and it requires further assistance from the creators of the plugin.

However, on CodeCanyon.net Theme-one writes repeatedly:

If The Grid was included in your theme, for any question or issue, please contact the theme author directly. He will handle support for 3rd party plugins included with the theme.

Both of you deny support because the plugin was bundled, but SOMEBODY has to stand by the product I purchased and I think it ought to be the company I gave money to. (You)

Could you try to help please?

#2

Hi There,

Please try adding !important after the color name :slight_smile:

Let us know how it goes

/* Image title <h2> */
.tg-item .tg-light h2 {
color: blue  !important;;
font-size: 18px  !important;;
}
/* Excerpt (image caption) text <p> */
.tg-item .tg-light p {
color: #abcdef  !important;;
font-size: 15px  !important;;
line-height: 18px  !important;;
}
/* Links in the excerpt (image caption) text */
.tg-item .tg-light a:link {
color: #fedcba  !important;;
text-decoration: underline  !important;;
}
.tg-item .tg-light a:hover {
color: red !important;
text-decoration: underline  !important;;
}

Hope it helps

#3

I see. It’s a specificity issue in the CSS, and The Grid’s code is more specific than mine. Thank you.

For anybody else who finds this via search, a more thorough explanation:

My code did not style the title, excerpt, or link text in The Grid because it was too non-specific and came too early in the document.

Any custom CSS you put in the Customizer or in style.css will be in <head>. The Grid re-iterates CSS in a <style> tag once for each grid on the page, and because of how CSS works that overrides the <head> code because it is more specific and/or more recent.

If you want to style all The Grid elements on the whole site, then stopping the cascade of CSS with !important is a reasonable solution.

If you want to style specific grids only, then you must be extremely specific with your class selectors.

#4

One more note for posterity: Wordpress DOES allow HTML content in metadata, which can then be used by The Grid to produce dynamic and active content.

In my case, my grid is full of images. In the Wordpress back end both the image description and image caption can contain HTML. From the perspective of The Grid, an image’s “Excerpt” is what the WP backend calls “Caption.” When I fill the caption with HTML, then I get active content in The Grid.

To future-proof this post for anybody else who is curious, the page is question is currently:
staging.jeremyborum.com/credits/
but will eventually be moved to
www.jeremyborum.com/credits/

#5

I added !important to all my CSS for TheGrid. Oddly, the colors work with the exception of one thing. In the title font-weight: bold fails although font-size and the others work.

Do you have any clues why?

The page again: staging.jeremyborum.com/credits/
The current code:
/* Image title <h2> */ .tg-item .tg-light h2 { color: gold !important; font-weight: bold !important; font-size: 18px !important; line-height: 20px !important; } /* Caption text <p> */ .tg-item .tg-light p { color: gold !important; font-size: 15px !important; line-height: 18px !important; } /* Links */ .tg-item .tg-light a:link { color: maroon !important; text-decoration: underline !important; } .tg-item .tg-light a:visited { color: maroon !important; text-decoration: underline !important; } .tg-item .tg-light a:hover { color: red !important; text-decoration: underline !important; }

Thank you.

#6

Hi,

Try adding body .

eg.

/* Image title <h2> */
body .tg-item .tg-light h2 {
color: gold !important;
font-weight: bold !important;
font-size: 18px !important;
line-height: 20px !important;
}
/* Caption text <p> */
body .tg-item .tg-light p {
color: gold !important;
font-size: 15px !important;
line-height: 18px !important;
}
/* Links */
body .tg-item .tg-light a:link {
color: maroon !important;
text-decoration: underline !important;
}
body .tg-item .tg-light a:visited {
color: maroon !important;
text-decoration: underline !important;
}
body .tg-item .tg-light a:hover {
color: red !important;
text-decoration: underline !important;
}

Thanks

#7

That works, I suppose because it stops the CSS from cascading even farther upstream. Thanks.

#8

You’re welcome!
We’re glad we were able to help you out.

#9

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.