WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Overriding the css of a theme from a plugin (8 posts)

  1. gotsanity
    Member
    Posted 1 year 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;
    }
  2. esmi
    Forum Moderator
    Posted 1 year ago #

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

  3. gotsanity
    Member
    Posted 1 year ago #

    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

  4. Patrick Johanneson
    Member
    Posted 1 year ago #

    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.

  5. gotsanity
    Member
    Posted 1 year ago #

    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?

  6. Patrick Johanneson
    Member
    Posted 1 year ago #

    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.

  7. gotsanity
    Member
    Posted 1 year ago #

    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!

  8. Patrick Johanneson
    Member
    Posted 1 year ago #

    No problem.

Topic Closed

This topic has been closed to new replies.

About this Topic