Für kleine Blogprojekte setzte ich sehr gerne das nett gemachte WordPress Theme „MistyLook“ von Sadish ein. Leider hat dies einen kleine Bug: Verwendet man Bilder-Galerien, so wird der Schatten-Effekt durch ein Link-Border überdeckt, was ziemlich hässlich aussieht. Möchte man dies mit dem CSS User-Stylesheet Editor von WordPress beheben, steht man vor einem Problem. Fügt man
div #gallery-1 img { border-width:0px; }
ein, so bringt das leider gar nichts: Das CSS für die Gallery wird (vereinfacht gesprochen) erst nach dem User- und Theme-Stylesheet geladen und überschreibt so dies. Folgendes einfaches Beispiel illustriert das Problem:
<head>
<title>Test</title>
<style>/* Style 1: */
div #meintext strong { color:red; }/* Style 2 (nicht änderbar): */
div #meintext strong { color:green; }</style></head>
<body>
<div>
<span>Hallo <strong>Welt</strong></span>
</div>
</body>
Die kleine Rätselaufgabe: Sie möchten, dass das Wort „Welt“ rot dargestellt wird, dürfen jedoch weder die Definition „Style 2“ noch den HTML-Quelltext sondern nur die Zeile nach „Style 1“ verändern. Geht das?
Bisher dachte ich, dass das nicht geht und habe immer tief in den WordPress-Code eingeriffen, um die Reihenfolge der CSS-Sheets zu ändern. Aber neulich kam die Erleuchtung: Es geht doch. Dennn bei der Vererbung werden Definitionen, die auf höherer Ebene ansetzten, nicht überschrieben. Folgendes CSS stellt also das Wort „Welt“ rot dar:
/* Style 1: */
body div #meintext strong { color:red; }/* Style 2 (nicht änderbar): */
div #meintext strong { color:green; }
Daraus ergibt sich folgender CSS-Code für den Bug in dem WordPress-Theme „MistyLook“:
#content .entry a:link,#content .entry a:visited {
border-bottom-size:0;
}body div #gallery-1 img {
border-width:0;
}body div #gallery-2 img {
border-width:0;
}/*… */
body div #gallery-9 img {
border-width:0;
}
Sicherlich gäbe es noch andere Möglichkeiten, aber diese ist wohl relativ einfach und unkompliziert.
Danke für diese Arbeit. Habe grad zwar nach was anderem gesucht, aber dieser Tipp hat mir bei diesem Problem geholfen.
T.