Beste Weg, um Plugin CSS zu überschreiben?

36

Derzeit verwende ich CSS-Spezifität, um Plugin-Stile zu überschreiben. Ich bevorzuge dies zum Bearbeiten des Plugins, da es beim Aktualisieren weniger Kopfschmerzen macht.

Es wäre schön, wenn mein Stylesheet nach den Plugins geladen würde, damit ich nur so genau sein muss, nicht mehr. Dies würde meine Stylesheets viel schöner machen.

plugins css

— Milder Flaum
quelle

1

upvote für das Unterrichten von mir über CSS-Spezifität. Ich habe vor Ihrer Frage noch nie davon gehört und es hat mir sehr geholfen!

— luke_mclachlan

21

Wie Sie vorschlagen, ist der eleganteste Ansatz, wenn Ihre CSS-Überschreibungen nach dem von den Plugins eingegebenen CSS geladen werden. Dies ist ganz einfach zu erreichen - Sie müssen nur sicherstellen, dass Ihre header.phpAufrufe auf Ihr Stylesheet wp_head()verweisen:

<head>
    <!-- all the usual preamble stuff goes here -->

    <?php wp_head(); ?>

    <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" />
</head>

— Tim Coulter
quelle

Und wenn ich ein Kindermotiv verwende? Ich mag es nicht, die header.php meines übergeordneten Themas zu überschreiben.

— Jules

19

Es gibt verschiedene Möglichkeiten, wie Plugins mit CSS umgehen können.

bester Fall: Plugin stellt CSS in die Warteschlange und bietet die Möglichkeit, es zu deaktivieren (deaktivieren, CSS-Code in Ihr Stylesheet kopieren und glücklich sein);
guter Fall: Plugins Hooks-Funktion, die den Style in die Warteschlange stellt (Unhook-Funktion, Hooks mit Mods, falls erforderlich);
Normalfall: Plugin reiht CSS direkt in die Warteschlange ein. Siehe So entfernen Sie ein Skript aus der Warteschlange (gilt auch für Stile). Kurzversion - In der kommenden WP-Version wird es eine Warteschlangenfunktion geben, mit der vorerst umgegangen werden könntewp_deregister_*
Böser Fall: Das Plugin gibt CSS unter anderem wieder. Von Fall zu Fall...

Insgesamt ist es meiner Meinung nach besser und einfacher, separate Stylesheets zu deaktivieren und in eigene zu integrieren, um Probleme zu minimieren und die Leistung zu verbessern (weniger Dateien zum Abrufen).

— Rarst
quelle

Woher soll ich wissen, welches es ist?

— IanEdington

1

Meistens anhand des Codes. :)

— Rarst

1

Ich speichere eine Kopie des "nicht bereit" -Plugins CSS im Theme-Ordner und importiere es durch Hinzufügen in das Theme-CSS

@import url('name-of-the-plugin-css.css');

dazu (ersetze natürlich den Namen der .css durch den, den ich injiziere). Dann ändere ich die CSS-Kopie im Themenordner und speichere sie auf dem Server, wie ich es für die anderen Dateien tue. Oh ja, manchmal kann es notwendig sein, die geänderten IDs oder Klassen durch Zuweisen eines "! Important" zu "nageln".

Ich weiß nicht, ob dies Stand der Technik ist, aber es schadet nicht und funktioniert einwandfrei.

— Sven Knoch
quelle

1

Ein anderer sehr eleganter Weg ist, die Spezifität von CSS zu nutzen.

Also, wenn die CSS des Plugins sagt:

div.product div.images img {
  ......
}

Sie definieren in Ihrem CSS:

body div.product div.images img {
  ......
}

Siehe auch die Antwort von Michael Rader für eine ähnliche Frage.

— Andreas
quelle

Ok, vielen Dank. Dies wäre die akzeptierte Antwort für mich. Verwenden Sie einfach die allgemeine style.css und die Spezifität wirkt wie ein Glanz!

— Luca Reghellin

0

Um das CSS des Plugins zu überschreiben, das bereits die Spezifität und! Important verwendet, habe ich die ID verwendet, um die Klassen zu überschreiben. Das hat meinen Code ein bisschen aufgeräumt. Natürlich ist es auch keine perfekte Lösung, da es nur funktioniert, wenn sowohl Elementen als auch Klassen IDs zugewiesen sind.

Sie können theoretisch auch Attributselektoren verwenden. Ich muss diese Theorie jedoch noch auf die Probe stellen.

— Sean H. Smith
quelle

0

Am Ende habe ich! Important für mein benutzerdefiniertes CSS verwendet und das hat das Styling für das Plugin, mit dem ich Probleme hatte, außer Kraft gesetzt. Der Entwickler des Plugins verwendete! Important im gesamten Plugin-CSS und deshalb konnte ich es nicht ohne! Important überschreiben.

body {
font-family: "Open Sans", Arial, sans-serif !important;
font-weight: 300 !important;    
}

— Randy D
quelle

-1

Um das CSS des Plugins zu überschreiben, das bereits die Spezifität und! Important verwendet, habe ich die ID verwendet, um die Klassen zu überschreiben. Das hat meinen Code ein bisschen aufgeräumt. Natürlich ist es auch keine perfekte Lösung, da es nur funktioniert, wenn sowohl Elementen als auch Klassen IDs zugewiesen sind.

Sie können theoretisch auch Attributselektoren verwenden. Ich muss diese Theorie jedoch noch auf die Probe stellen.

— dsdsd
quelle