WordPress.org

Forums

Post UI Tabs
[resolved] Plugin overrides Theme fonts (16 posts)

  1. Ciaran
    Member
    Posted 1 year ago #

    Hi

    Great plugin thank you.

    How do I get the font style inside the tabs to match the font style of the rest of my site? Do I have to re-create the CSS on my site and amend there, or can I do it more easily?

    Screenshot here -

    Thanks for your help

    Ciaran

    http://wordpress.org/extend/plugins/put/

  2. loucks14
    Member
    Posted 1 year ago #

    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!

  3. Mark / t31os
    Moderator
    Plugin Author

    Posted 1 year ago #

    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.

  4. CFSAdmin
    Member
    Posted 1 year ago #

    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.

  5. loucks14
    Member
    Posted 1 year ago #

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

  6. Mark / t31os
    Moderator
    Plugin Author

    Posted 1 year ago #

    @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. :)

  7. CFSAdmin
    Member
    Posted 1 year ago #

    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. :(

  8. Mark / t31os
    Moderator
    Plugin Author

    Posted 1 year ago #

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

  9. CFSAdmin
    Member
    Posted 1 year ago #

    No problem.

    Many thanks for all the time you are taking

    Here you go :)

  10. Ciaran
    Member
    Posted 1 year ago #

    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

  11. Mark / t31os
    Moderator
    Plugin Author

    Posted 1 year ago #

    @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. :)

  12. CFSAdmin
    Member
    Posted 1 year ago #

    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 :)

  13. Mark / t31os
    Moderator
    Plugin Author

    Posted 1 year ago #

    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).

  14. CFSAdmin
    Member
    Posted 1 year ago #

    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 :)

  15. CFSAdmin
    Member
    Posted 1 year ago #

    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 :)

  16. Mark / t31os
    Moderator
    Plugin Author

    Posted 1 year ago #

    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... :)

Topic Closed

This topic has been closed to new replies.

About this Plugin

  • Post UI Tabs
  • Frequently Asked Questions
  • Support Threads
  • Reviews

About this Topic

Tags

No tags yet.