Small cosmetic bug in Simple Grey theme

Hi!

I’m not sure why, I just checked the CSS and the test environment as well, the font families look all right to me. I will look into this more in-depth later.

Maybe the theme overrides the :hover attribute with a higher specificty CSS rule, but I think it should have appeared before 4.0 as well.

Anyways, you can try either of these custom CSS snippets to make sure that the right font is used:

.results .item .content h3 a:hover {
    font-family: Open Sans !important;
}

or maybe with quote tags:

.results .item .content h3 a:hover {
    font-family: 'Open Sans' !important;
}

I’m not sure what happened. I rebuilt my LESS CSS file and now its working fine without any modifications.

Thanks!

Quick question: is there a reason you are using “!important” in style-simple-grey.css (lines 73 and 91)?

I’m asking because if that’s not needed it would be great if you could get rid of them in the next release, it’s messing with my CSS overrides and I don’t really like to change the plugin’s code (it means less work after every update).

Thank you

Hi!

I’m happy it’s working for you now ??

Yes, I had to use !important in some cases. As much as I hate to do these kinds of “hacks” to get around issues, there was no other option as for now.

The reason why I had to, is that I’m always testing the plugin with different themes, just to make sure it looks and works all right. And some very well known themes use very strong CSS specificity rules like #top input, or #top div, and similar.. In that specific case the #top ID is used on the document body. Keep in mind that this particular theme in example is used on over 100 000 sites.

Now the problem is, that since he uses CSS rules with the “#top …” ID prefix, in some cases the paddings, margins, fonts were overwritten. There are 3 possible solutions to override those rules:
– Use the search ID in the CSS to get higher specificity rules – won’t work in all the cases, since the plugin is multi instance, and each one has a different ID – so predictively all the IDs should be pre-generated in the CSS, which leads to excessive code
– Use inline CSS – I think it’s just as bad as the previous solution
– Use !important modifiers – best of the 3 possible solutions.

I wish there was some kind of standard for both plugin and theme developers to follow in terms of CSS compatibility.