Shortcode Affects Primary Navigation CSS

[katymartin]

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/

[David Chu]

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

[katymartin]

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.

[David Chu]

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

[Author]

Posts