Neu CSS vor schließendem head-Tag laden

hazelly

Mitglied
16. November 2023
9
1
Hallo zusammen,

durch ein "Fremd-Plugin" wird CSS vor dem schließenden Head-Tag geladen. Wir kann ich dieses CSS überschreiben?
Ich habe es bereits über die Datei layout/header.tpl versucht und dort eine CSS-Datei vor dem schließenden head-Tag eingefügt, allerdings wird das CSS des Plugins immernoch danach geladen. Wie kann ich mein CSS im Template als letztes vor dem schließenden head-Tag einfügen?

Danke im Voraus!
 
Zuletzt bearbeitet:

martinwolf

Offizieller Servicepartner
SPBanner
6. September 2012
3.572
311
Hallo zusammen,

durch ein "Fremd-Plugin" wird CSS vor dem schließenden Head-Tag geladen. Wir kann ich dieses CSS überschreiben?
Ich habe es bereits über die Datei layout/header.tpl versucht und dort eine CSS-Datei vor dem schließenden head-Tag eingefügt, allerdings wird das CSS des Plugins immernoch danach geladen. Wie kann ich mein CSS im Template als letztes vor dem schließenden head-Tag einfügen?

Danke im Voraus!
Wenn das CSS vom Plugin dort platziert wird, hast Du da gar keinen Einfluss drauf, denn das wird kurz vor dem Rendern des DOMS dort platziert. Also später als Du dich da reinhängst.
 

Markus - eRock Marketing

Offizieller Servicepartner
SPBanner
10. November 2022
61
27
@hazelly, was genau ist denn hier dein Vorhaben? Möchtest du einzelne Parts vom Plugin-CSS überschreiben oder davon alle Styles entfernen?

Wenn du einzelne Styles überschreiben willst, braucht dein CSS einfache eine höhere Gewichtung. Im Nova ist es glaube nicht vorhanden aber im Snackys-Template steht eine ID im <html> Tag (<html id="snackys-tpl">), kann aber ins NOva implementiert werden.
Da ID's mit die höchste Gewichtung haben, kannst du so Styles besser überschreiben.

Gehen wir davon aus, dass du dort etwas von ".plugin-class" überschreiben möchtest.
Code:
/* Dein CSS */
#meineid .plugin-class{
    color: red;
}

/* Plugin-CSS */
.plugin-class{
    color: green;
}

Obwohl dein CSS vor dem des Plugins kommt, wird dein CSS angewendet, da es durch die ID eine höhere Gewichtung hat.

Du kannst auch alle Styles einer Angabe komplett zurücksetzen, über "all: unset"
Code:
/* Dein CSS */
#meineid .plugin-class{
    all: unset;
}

/* Plugin CSS */
.plugin-class{
    color: green;
    width: 10px;
    height: 10px;
}

Durch das "all: unset" und deiner höheren Gewichtung über die ID setzt du deren Styles für "plugin-class" zurück