Plugin css overwriting my own

  • Hi,

    I changed some of the footnote css by adding it to my theme’s css file. Unfortunately, the plugin adds its own css after that directly into the web page, so it overrides the changes I make to the footnote styles.

    The original version of this by Simon Elvery, which I had been using, had an option to overwrite the built-in css. Could such an option be included in future versions, either by allowing it be added in the settings or (preferably) by having an option to suppress the insertion of the default css?

    • This topic was modified 2 months, 3 weeks ago by yorkslad12.
Viewing 7 replies - 1 through 7 (of 7 total)

  • As an interim solution…You may be able to override the plugin CSS by writing a more specific rule. What is the CSS you have added?

    Thread Starter yorkslad12

    (@yorkslad12)

    Yep. All of the calls are below, but it’s the ol.footnotes one that is causing me problems.

    .footnote-link {
    font-size: initial;
    font-size: 1rem;
    font-weight: 700;
    }

    ol.footnotes {
    margin-top: 2.4em;
    margin-bottom: 0;
    font-size: 0.9em !important;
    padding-left: 0;
    }

    ol.footnotes:before {
    border-top: 1px #5e5853 solid;
    padding-top: 10px;
    width: 34%;
    content: "";
    display: block;
    }

    ol.footnotes li {
    list-style-type: decimal;
    margin-left: 1.6em;
    padding-left: 0.4em;
    }

    a.footnote-link {
    text-decoration: none;
    }

    What if you tried adding something like this? .entry-content ol.footnotes
    Instead of just ol.footnotes, add an additional selector to make the rule more specific. This should supersede the plugin’s less specific selector. Check your theme’s structure using your browser’s Inspector and choose a class or element that contains ol.footnotes. I think even body should do the trick. Hope this helps!

    Thread Starter yorkslad12

    (@yorkslad12)

    Thanks. I’ll give that a go… though obviously not as good as an option to suppress css from the plugin ??

    (I generally have a ‘thing’ about plugins injecting css directly or not being over-writeable. Two of the other plugins on my site do this with css that doesn’t meet accessibility requirements and will be a much tougher fix.)

    Thread Starter yorkslad12

    (@yorkslad12)

    Hi again,

    No joy I’m afraid, on Firefox or Chrome. The declaration with .entry-content is in there but the font-size line is struck out, even when marked as !important.

    At a guess I’d say it’s because the ol.footnotes always comes after whatever’s in my .css file (though !important should still override it, I’d have thought).

    That’s very weird! Both of these approaches should override the plugin’s CSS. If you don’t mind sharing a link, I’d be happy to take a closer look to help you troubleshoot this.

    Another thing to try….put the font sizing in this selector: ol.footnotes li That’s what I have done, and it works for me.

    Thread Starter yorkslad12

    (@yorkslad12)

    Interesting – that does now work (without the .entry-content but with the !important).

Viewing 7 replies - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.