Shortcode Affects Primary Navigation CSS

Community Forums Forums Design Tips and Tricks Shortcode Affects Primary Navigation CSS

This topic is: not resolved

This topic contains 3 replies, has 2 voices, and was last updated by  David Chu 9 months, 1 week ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #78823

    katymartin
    Participant
    Post count: 20

    Hey gang… wondering if anyone might have some ideas for me. I’ve purchased a plugin from CodeCanyon called ‘Restaurant Menu Builder.’ I installed it on my StudioPress “Beautiful Pro” theme.

    When I added the required shortcode to the Menu page, it seems to mess with the overall spacing/sizing of all other text on the page. For example, on that page alone, the Primary Navigation font is HUGE and so is the footer text.

    I’ve tried messing around with the plugin CSS but nothing seems to work. I’m hopeful perhaps some wonderful person here might have some insight as to how to fix the conflict. Unfortunately, the plugin designer doesn’t offer any support.

    The page can be found here: http://netstorepro.com/pizza/menu/

    Thank you!

    http://netstorepro.com/pizza/menu/
    #78861

    David Chu
    Participant
    Post count: 1364

    Katy,
    That was a very intriguing and odd problem. I finally traced much of it. The plugin developer is using an extra CSS script, which he’s calling “normalize”. Of course, plugin developers must often use CSS. But plugin developers don’t always use CSS practices that are sensible or flexible. When I eliminated its commands, things began to go to normal size.

    This plugin gets my all-time award for obnoxious CSS styling. There are probably many offenses in there, but the main one is the simplest. He has “!important” on every single line!! I’ve never seen that anywhere, and I get around. It’s the lazy coder’s way of making absolutely sure that their code will predominate. It completely ignores the idea that the rest of the site’s styling needs to coexist with any plugin styling.

    Imagine people at a party, all having conversation, and then there’s one guy who is yelling at the top of his lungs the whole time to make sure he’s heard above everyone else. Dirty little secret: some plugin developers write good PHP code, but cannot use CSS style well at all. It’s a different skill. Using “!important” can be a helpful solution where there’s no way around it, and a couple of those isn’t catastrophic. But every line? Whew.

    If you’re lucky, there may be someplace in the plugin that allows you to shut off the plugin CSS. If so, then the developer at least slightly cares about plugin compatibility with themes.

    Beyond that, an adept CSS coder could probably override those silly commands one by one, but it could take awhile.

    Dave


    Dave Chu · Custom WordPress Developer – likes collaborating with Designers

    #79043

    katymartin
    Participant
    Post count: 20

    Awesome, David! Thank you so much.

    I eliminated the “normalize.css” and all of the “!important” tags and things are looking MUCH better. Still need to do some testing but I think this may have solved my problem.

    You’re the best.

    #79048

    David Chu
    Participant
    Post count: 1364

    Katy,
    Wow, thanks, glad to hear it. I do like brainteasers, and that was a singular one.

    In a small way, I can see why he/she is trying to use CSS brute force – that app is pretty complex, and they are trying to “make” it always work. But if you use carefully chosen markup and CSS, no “importants” needed, or at least very few.

    Woo themes and many Themeforest themes also routinely abuse “important”, making modding those themes remarkably annoying. I had a Twitter exchange with Susan Nelson about this. :-)

    Have a lovely day!
    Dave


    Dave Chu · Custom WordPress Developer – likes collaborating with Designers

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.