PageList2

PageList1

Cookie-Hinweis Smartphone

16.01.2014

Einzelne Post-Titel in Übersichten von Classic, Magazine, Timeslide individuell färben

Unter den Ansichten Classic, Magazine, Timeslide stehen die Posts oder Postausschnitte mit ihren Titeln auf der Startseite und anderen Übersichtsseiten (Label, Posts eines Monats/Jahres) innerhalb von Listenpunkten, die eine ID haben. Die ID steht nicht an einer Stelle, die man üblicherweise als Selektor nutzen kann, aber mit Hilfe einer eckigen Klammer kann man aus dem entsprechenden HTML-Schnipsel einen Selektor machen. So kann man die einzelnen Post-Titel per CSS ansprechen.
Den HTML-Schnipsel, den man in eckige Klammern setzen muss, damit er als Selektor, also als Bereich, für den man CSS-Kommandos geben kann, genutzt werden kann, findet man im Quelltext nahe über dem entsprechenden Post-Titel in der öffnenden li-Klammer

Beispiel:

<li class="item" data-id="1234567891234567891">


Der Schnipsel, der daraus relevant ist, ist der:

data-id="1234567891234567891"

Unter Vorlage > Anpassen > Erweitert > CSS hinzufügen kann man mit Hilfe dieses Schnipsels nun das Schriftfarb-Kommando für den dazu gehörenden Post-Titel geben:

/* Übersichten Classic, Magazine, Timeslide: Ersten Post-Titel vom 16.01.2014 rot gefärbt */
li[data-id="1234567891234567891"] .title a {
color:#FF0000;
}

Man muss den Text zwischen /* und */ für sich passend ändern, er ist dafür da, dass man später noch weiß, für welchen Post-Titel das Kommando gilt. Text, den man zwischen /* und */ stellt, darf so im CSS stehen. Auch ID-Nummer und Farbcode muss man selbstverständlich gegen die eigenen austauschen.

Fachlicher Hinweis:


data-id="1234567891234567891" ist hier ein Attribut des Listenpunkts (li), in dem es steht. Durch die eckige Klammer wird es im CSS zu einem Selektor, so als handele es sich um einen Klassennamen für den li oder um den direkten id-Namen des li. Weil das Attribut nur in diesem Listenpunkt vorkommt, wird auch nur dieser über das entsprechende CSS-Kommando angesprochen.

Weiterführende Links dazu:




Ute Ziemes, sg.utez.de,

0 Kommentare:

Kommentar veröffentlichen