Multiblog: 1 Plugin für alle Blogs, aber mit je anderen CSS in jedem Blog - wie?

csign

Hallo,

am Beispiel des Plugins AVA AMAZON habe ich mal die Frage:

Ich habe WP 3.0 als Multiblog mit 4 Blogs installiert. Jedes Blog nutzt dieses Plugin aktiv.

Jedoch benötige ich in jedem Blog ein anderes CSS-Styling für die Darstellung dieses Plugins.

Im Plugin-Ordner selbst ist eine CSS-Datei für das Styling.

Wenn ich aber in dieser mein Styling ändere, hab ich genau das in allen Blogs.

Ich habe dann versucht, das Styling aus dieser Datei in die CSS-Datei meines Themes zu kopieren.

Code

#avhamazon-widget .wishlistcaption {
font-size:80%;
line-height:120%;
margin-top:8px;
text-transform:uppercase;
}

Jedoch hat das nichts gebracht, Priorität hat offenbar immer die CSS-Datei aus dem Pluginordner.

Wie kann ich das bewerkstelligen, dass ich mit 1 Plugin unterschiedliche CSS-Stylings in meinen unterschiedlichen Blogs wirksam unterbringe?

Danke.

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

Söan

Du könntest das Plugin umbauen. Das wäre aber eine unschöne Art, da die Änderungen bei Updates verloren gehen.

Kopiere mal die Styles in die Themes und wende die CSS Regel !important an.
Wenn das nicht hilft, entferne die CSS Anweisung aus dem Plugin, dann kann sie die anderen nicht mehr überschreiben.

csign

Danke, dass mit dem "!important" kannte ich noch gar nicht :shock:

Aber irgendwie geht es dennoch noch nicht oder ich hab was falsch verstanden bzw. falsch geschrieben:

In den Plugin-CSS steht nun:

Code

#avhamazon-widget .wishlistcaption {
font-size:200%;
}

Ich hab den Wert mal übertrieben auf 200% gesetzt, normal waren 100% drin.

In meiner Theme-CSS-Datei habe ich nun eingefügt:

Code

#avhamazon-widget .wishlistcaption {
font-size:80%; !important
line-height:120%;
margin-top:8px;
text-transform:uppercase;
}

Er übernimmt alles (uppercase z.B.), nur eben die font-size nicht, die ist nach wie vor auf 200%, also wird das "!important" ignoriert - oder hab ich es nur falsch geschrieben/formatiert/eingesetzt?

csign

Jetzt hab ich's!! Kleiner, aber entscheidender Fehler:

das

Code

!important

muss auf jeden Fall noch vor dem Strichpunkt hin; also richtig ist

CSS

#avhamazon-[URL="http://forum.wordpress-deutschland.org/lexikon/?do=showentry&item=widget"]widget[/URL] .wishlistcaption {
font-size:80% !important;
line-height:120%;
margin-top:8px;
text-transform:uppercase;
}

Und schon funktioniert es astrein.

Vielen Dank - you made my day!!!!:smile:

Morris

Sehen wir mal von der Krücke "!Important" ab.

Entscheidend ist einmal die Reihenfolge wie die CSS-Dateien eingebunden werden.
Eine zweite CSS-Datei überschreibt also die Deklarationen der Ersten.

Das andere Kriterium ist die Wertigkeit der Selektoren. Je genauer die Position eines Elements im DOM-Baum definiert wird, desto wertiger ist die Definition und kann auch von späteren ungenaueren Definitionen nicht überschrieben werden.

Gruß
Mo

csign

oh je, das klingt ja ganz schön kompliziert :sad:

Aber was gibt es bei dem Code

Code

#avhamazon-[URL="http://forum.wordpress-deutschland.org/lexikon/?do=showentry&item=widget"]widget[/URL] .wishlistcaption

zu "werten", der taucht doch nur einmal auf - nämlich in den Plugin-CSS selbst, hat das Theme dann keinen "Vorrang" mit seinem gleichlautenden CSS für

Code

#avhamazon-[URL="http://forum.wordpress-deutschland.org/lexikon/?do=showentry&item=widget"]widget[/URL] .wishlistcaption

?

Morris

In welcher Reihenfolge werden die CSS-Dateien eingebunden?
Wenn erst die Theme-CSS und dann die Plugin-CSS eingebunden werden, kannst du so erstmal nichts machen.

Statt

HTML

#avhamazon-widget .wishlistcaption

kannst du aber auch z.B.

HTML

html body #avhamazon-widget .wishlistcaption

schreiben, womit die untere Zeile eine höhere Gewichtung bekommen würde.

Solltest du irgendwo noch ein Element mit einer ID oder einer Klasse im DOM-Baum haben z.B.

HTML

html body div#canvas #avhamazon-widget .wishlistcaption

wird das noch höher angerechnet.

Gruß
Mo

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Multiblog: 1 Plugin für alle Blogs, aber mit je anderen CSS in jedem Blog - wie?

Jetzt mitmachen!