Moderne Webbrowser (lies: Chrome/Chromium, Firefox, Safari, Opera, aber eher nicht IE) haben mittlerweile alle sogenannte „Entwickler-Tools“ an Bord, die man nutzen kann, um das ausgegebene Markup (aber z.B. auch das CSS oder Javascript) einer Webseite zu analysieren. Sie sind alle ähnlich leistungsfähig, unterscheiden sich aber natürlich in der genauen Bedienung ein wenig.
Ich erklär's mal am Beispiel von Chrome:
1. Webseite öffnen.
2. Rechtsklick auf das, was man analysieren will, in der Webseite; in Deinem Beispiel: der Kasten „Wegweiser“ in der Seitenleiste, und im Kontextmenü „Element untersuchen“ wählen.
3. Es öffnen sich die Developer-Tools, das ausgewählte Element ist bereits vorselektiert – allerdings ist das (bedingt durch die Verschachtelung von HTML-Elementen, speziell Containern) nicht immer exakt, man muss prüfen, ob man das richtige Element ausgewählt hat und ggf. korrigieren.
Das gesuchte Element ist in Deinem Fall: <div class="serendipitySideBarItem container_serendipity_plugin_staticpage">. Die Klasse .serendipitySideBarItem wird
allen von Seitenleistenplugins erzeugten Boxen in der Sidebar zugewiesen, die zweite Klasse ist individuell (kann aber
auch mehrfach vergeben sein; es gibt Seitenleistenplugin, von denen sich mehrere Instanzen gleichzeitig installieren lassen, z.B. der HTML-Klotz). Das kannst Du nun in der style.css (oder einer anderen CSS-Datei, falls es eine gibt) so verwenden:
Code: Select all
.serendipitySideBarItem {
/* Styles für ALLE Seitenleistenplugins */
}
.container_serendipity_plugin_staticpage {
/* Styles NUR für die Liste der statischen Seiten */
}
Bei Namen der Klassen
muss Groß-/Kleinschreibung beachtet werden – SideBarItem ist
nicht dasselbe wie sidebaritem. Nutzt man sowohl die allgemeine als auch die spezielle Klasse, sollte die allgemeine
immer zuerst im Stylesheet auftauchen, damit man Styles der allgemeinen Klasse in den speziellen überschreiben kann. (Man muss keine Styles doppelt vergeben, die Elemente bekommen immer die Styles beider Klassen zugewiesen.)
Und bitte niemals,
niemals,
niemals sowas schreiben, auch wenn es in alter Dokumentation und alten Stylesheets immer noch zu finden ist:
Damit werden die Styles
nur auf Elemente mit der Klasse .serendipitySideBarItem angewandt, die auch ein div sind. Das ist unnötig, nicht „vorwärtskompatibel“ und vor allem sehr schwer zu überschreiben, weil es die sogenannte „Spezifität“ des Selektors (unnötig) erhöht. Kurz gesagt würde folgendes:
Code: Select all
div.serendipitySidebarItem {
background: black;
}
.container_serendipity_plugin_staticpage {
background: white;
}
dazu führen, dass der Hintergrund der Box schwarz bleibt,
obwohl er von der speziellen Klasse eigentlich überschrieben werden soll – aber der erste Selektor hat durch den zugefügten Elementselektor (div) mehr Gewicht.
YL
