Plugin overrides Theme fonts

I would like to know this as well. If I could “up vote” the question Ciaran has posed.
This is a great plugin by the way, tried others none worked, this has been spot on and easy from the start!

The plugin loads jQuery UI skins, which define their own font rules.

If you want to inherit font styling from your theme, whilst maintaining the jquery skin appearance, it may be a simple case of adding a couple of helper css definitions into your theme’s stylesheet.

It’s these two rules in the jquery themes/skins that cause a problem.

.ui-widget {
	font-family: Verdana,Arial,sans-serif;
	font-size: 1.1em;
}
.ui-widget input,
.ui-widget select,
.ui-widget textarea,
.ui-widget button {
	font-family: Verdana,Arial,sans-serif;
	font-size: 1em;
}

All we need here is a few overriding rules in the WordPress theme….

Add the following to the bottom of your theme’s stylesheet(style.css).

.ui-widget,
.ui-widget input,
.ui-widget select,
.ui-widget textarea,
.ui-widget button { font-family:inherit!important; }

And the tabs should now inherit styling from the parent elements in your theme, but of course feel free to change the font-family definition in the above to an actual font if you prefer.

Hope that helps.

Hello

Awesome plugin by the way. Have recommended this to my friends with WordPress sites as it’s great ??

I have tried adding the code to my style.css but to no avail. Where do I find the code above that?

I have gone through everywhere I can think of but no joy or am I just being thick?

Thank you for any help that you can give.

This worked brilliantly for me ! Thank you very much for the quick and easy response.

@cfsadmin – What are you trying to find? Your theme’s stylesheet is typically in wp-content/themes/YOURTHEMENAMEHERE/. The plugin stylesheets are loaded from an external source(so you can’t edit those).

@loucks14 – Glad to hear it’s all working out for you. ??

Hello Mark

I have added to the stylesheet the bits you suggested but the font still doesn’t change.

I think I am not explaining myself correctly. If I understand, you enter this in the style.css (which I have done)

.ui-widget,
.ui-widget input,
.ui-widget select,
.ui-widget textarea,
.ui-widget button { font-family:inherit!important; }

and then all should work?? If this is the case then unfortunately, it doesn’t resolve my problem. I am gutted as this plugin is great and just what I needed. ??

Could you link me to a problem page? It’s hard to advise on alternative CSS without seeing the/a problem page.

No problem.

Many thanks for all the time you are taking

Here you go ??

Hi Mark

That worked great, thank you very much – I was able to change the colour of the fonts to match my theme as well.

Appreciate the help

Ciaran

@cfsadmin, i don’t see the suggested CSS added to your theme’s stylesheet… are you sure you made the adjustments to the correct file?

@ciaran, Happy i could help. ??

Hello Mark

I did add them then took them out as they did nothing. I will add them again so you can see if am doing it right.

I am a Network Manager with a fair bit of experience in WordPress which is why I don’t get what it is doing. My CSS and PHP are not great but I understand the basics. If something more in-depth is needed, I am happy to try.

Again, thank you so much for all your help and especially your time.

Gareth ??

Hi CFSAdmin,

Can you try explicitly setting the font family for the rule instead?

.ui-widget,
.ui-widget input,
.ui-widget select,
.ui-widget textarea,
.ui-widget button { font-family: FONTNAMEHERE !important; }

The rule was almost working, it just couldn’t find font styling on the containing element, so fell back to the original rule(in essence making the new CSS appear to do nothing).

Hello John

Thanks very much for getting back so quick. I have tried this but no luck. Was wondering if it’s the size of the font as it looks similar now? How do I change the font size for it if this is the case?

Thank you once again,

Gareth ??

Hello John

Took a stab in the dark and now have the font size down and all is well. This is what I added at the bottom of the stylesheet and it works ??

.ui-widget,
.ui-widget input,
.ui-widget select,
.ui-widget textarea,
.ui-widget button { font-family: Arial, Helvetica, Sans-serif!important;
    font-size: 12px!important; }

Thank you, thank you, thank you ??

Working in IT is a pain and I know how much time is needed by us all so a big thank you for all the time you have taken ??

Gareth ??

Hi Gareth,

Glad to hear you got there in the end, i knew it would be a matter of just tweaking the CSS to fit what you are working with.

Happy to hear you have everything setup as you want it now, and i’m happy to have helped… ??