Bugfix für WordPress Theme MistyLook durch CSS-Trick

Veröffentlicht am Februar 28, 2010 von Simon A. Frank

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.

Dieser Beitrag wurde unter CSS, Programmierung, WordPress abgelegt und mit , , verschlagwortet. Setze ein Lesezeichen auf den Permalink.

Eine Antwort zu Bugfix für WordPress Theme MistyLook durch CSS-Trick

  1. Tom sagt:
    November 1, 2010 um 21:18 Uhr

    Danke für diese Arbeit. Habe grad zwar nach was anderem gesucht, aber dieser Tipp hat mir bei diesem Problem geholfen.

    T.

    Antworten

Kommentar verfassen

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre, wie deine Kommentardaten verarbeitet werden.