Overriding the css of a theme from a plugin

  • Resolved gotsanity

    (@gotsanity)


    11 years, 9 months ago

    I am building a menu plugin that utilizes jquery and css to style and interact with a custom menu. The plugin works as intended in the default theme but in most other themes there are lots of issues with style inheritance (mainly with hovers). I managed to get the plugin css loaded after the theme styles using wp_enqueue_style() but attempting to override the theme css (even a direct copy of selectors) doesnt seem to work. Example and github sources are below:

    main github repo

    current theme style

    Example of issue. Mouseover the links on side to see hover style issues

    the exact style being applied during hover is this:

    .widget li:hover {
	background-color: #2183c4;
	-moz-box-shadow:1px 1px 5px #000;
	-webkit-box-shadow:1px 1px 5px #000;
	box-shadow:1px 1px 5px #000;
	-moz-border-radius: 8px 8px 8px 8px;
	border-radius: 8px;
	color: #fff;
}

    Should be the following for the plugin only:

    .widget li:hover {
	background-color: none;
	-moz-box-shadow: none;
	-webkit-box-shadow: none;
	box-shadow: none;
	-moz-border-radius: none;
	border-radius: none;
}

Viewing 7 replies - 1 through 7 (of 7 total)

  • Can you increase the specificity? Or add your CSS as inline style?

    Thread Starter gotsanity

    (@gotsanity)

    I tried increasing the specificity but it didn’t seem to work. As for inline styles i can’t do that because its a hover selector i am trying to effect

    Maybe I’m missing something, but the CSS file being loaded on that example site (flying-menu.css) doesn’t seem to have the styles you mention in it. There’s no li:hover in it, for instance.

    The only :hover I see is at the bottom, and it’s commented out.

    Thread Starter gotsanity

    (@gotsanity)

    I am currently commenting from a phone so i can’t verify but i believe there is another stylesheet that should be loaded. But if not, then i bet your observation is the culprit. what are you using to view the source?

    I just used Firefox’s “View Source” option, and clicked through in the source view to the flying-menu.css file. Then I double-checked with the file in your Git repository, and I didn’t see it there either.

    Thread Starter gotsanity

    (@gotsanity)

    Have I mentioned lately that late night coding is a bad idea? It seems that I was loading an earlier revision of the stylesheet. The issue is resolved, thanks a bunch!

    No problem.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Overriding the css of a theme from a plugin’ is closed to new replies.