Neu CSS vor schließendem head-Tag laden

hazelly · 25. Februar 2025

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!

martinwolf · 13. März 2025

Zitat von hazelly:
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 · 2. Mai 2025

@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

Suche

Suche

Neu CSS vor schließendem head-Tag laden

hazelly

Aktives Mitglied

martinwolf

Offizieller Service Partner

Markus - eRock Marketing

Offizieller Service Partner

Ähnliche Themen