Bugfix für WordPress Theme MistyLook durch CSS-Trick
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.
