5202

ein Blog über technische Fragen zu Blogger

Dynamische Ansichten: Flipcard-Kacheln färben

von

Gestern habe ich geschrieben, wie mich an der dynamischen Ansicht 'Flipcard' die langweiligen Kacheln störren. Mein Blog hat viel Text und wenig Fotos und eine monoton graue Kachel neben der nächsten monoton grauen Kachel finde ich fade. Um das Layout interessanter zu gestalten, möchte ich jeder Kachel einen eigenen Grauwert geben.

Vorneweg, die Idee umzusetzen war ... schwierig! Zwischenzeitlich habe ich sogar gedacht, dass geht mit CSS gar nicht und ich wollte es in Javascript schreiben. Aber dann hat mich der Ehrgeiz gepackt und nach stundenlanger Arbeit ist es mir gelungen. Yeah! 

So sieht's 'live' aus. Ob's gestalterisch ein Fortschritt ist mögen andere beurteilen, die Technik dahinter ist es auf jeden Fall. Mit dem Code könnt ihr in der Blogger Ansicht 'Flipcard' theoretisch die Hintergrundfarbe, Textfarbe, Rückseite und vieles mehr von jeder einzelnen Kachel kontrollieren.

Wie funktioniert's?

Der Knackpunkt war einen CSS-Selektor zu finden, mit dem ich einzelne Kachel beziehungsweise ein ganzes Kachel Muster ansprechen kann. Die Struktur von der HTML schaut schematisch so aus:
<div id="content" class="items hfeed">
  <div class="item hentry">
     <div class="card"></div>
  </div>
  <div class="item hentry">
     <div class="card"></div>
  </div>
  ...
  <div class="item hentry">
     <div class="card"></div>
  </div>
</div>
Die Kachel <div class="card"> liegt also im <div class="item hentry"> Container innerhalb des äußeren <div id="content" class="items hfeed"> Containers. Um nach einem bestimmten <div> Containern innerhalb eines anderes <div> Container zu selektieren, braucht's eigentlich eine eigene ID. Eine solche ID konnte ich natürlich nicht einführen, weil ich nicht an die HTML rankomme. Im übrigen wäre ich damit auch nicht weiter gekommen, weil ich nicht jedem neuen Post eine eigene ID geben kann.

Und es geht doch :=), sogar sehr simpel, nämlich über die CSS Pseudoklassen nth-child(n). Wer mehr über diese Pseudoklasse wissen will, kann sich auf dem bereits erwähnten tollen Blog von Ellen Bauer umschauen, die kann das mit ziemlich einfachen Worten erklären.

Für die allgemeinen Lösung dieses Problems lautet der Selektor .items .item:nth-child(n). Daraus ergibt sich Beispielsweise für die Frontseite einer Kachel der Selektor .items .item:nth-child(n) .card .front Okay, das schaut vielleicht nicht für jeden einfach aus, aber für mich hat das eine mathematisch klare Schönheit, ist also eine 'gute' Lösung. 

Mathematik

Jetzt wird's mathematisch, die Pseudoklasse nth-child(n) erwartet nämlich eine Zahl, einen Begriff [Keyword] oder einen arithmetischen Ausdruck als Argument. Das erste ist einfach zu verstehen, nth-child(2) meint etwa das zweite Element einer Reihe; 'Begriff' ist auch unproblematisch, als Keyword könnt ihr odd[=ungerade Zahl] oder even[=gerade Zahl] nehmen - nth-child(odd) selektiert etwa das erste, dritte, fünfte usw. Element der Reihe.

Für die Graustufen der Kacheln habe ich natürlich nicht jedem Element einen eigenen Hintergrund gegeben, sondern ich habe ein Muster definiert, was sich dann wiederholt. Für die dynamische Ansicht Flipcard waren das Beispielsweise 13 verschiedene Graustufen - das erste und das vierzehnte Element in der Reihe besitzen den gleichen Hintergrund, das zweite und das fünfzehnte Element wiederholen sich und so weiter. Wie funktioniert das?

Die Pseudoklasse nth-child(n) versteht als Argument einen arithmetischen Ausdruck der Form an+b Dabei steht der Wert b für die Ordnungszahl der Position des ersten Elements in der Reihe und der Wert a für die Position des zweiten Elements danach.

Okay, das versteht niemand auf Anhieb und wem jetzt der Kopf raucht, kann sich das ganze auf dem nth-child-tester praktisch anschauen. Mein Kachel-Beispiel benützt das Argument nth-child(13n+1). Wenn ihr das in den Tester eingebt seht ihr, dass das erste und vierzehnte Element in der Reihe selektiert wird. Mission accomplished :=).

Praktische Anwendung

Nach dem - hoffentlich nicht zu verwirrenden - theoretischen Teil, komme ich zur praktischen Anwendung. Wie erwähnt, ist der Effekt mit 13 verschiedenen Graustufen erzeugt worden, d.h. ich habe 13 verschieden Selektoren geschrieben und dort jeweils background und wenn notwendig auch color definiert. Die Anpassung der Eigenschaft color für einige Kacheln war dann notwendig, wenn der Hintergrund zu dunkel wird, um die Überschrift gut zu lesen.

Das ist nur ein Test zur Demonstration der Technik, ich denke, da könnte man noch viel mehr draus machen, seid kreativ!

Altes Dashboard-Layout

Dashboard > Design > Vorlagendesigner > Erweitert > CSS hinzufügen > Code einsetzen > drückt die Eingabe-Taste hinter dem letzten Zeichen } der letzten Zeile > Auf Blog anwenden

Neues Dashboard-Layout

Dashboard > Vorlage > 'Live im Blog' anpassen > Erweitert > CSS hinzufügen > Code einsetzen > drückt die Eingabe-Taste hinter dem letzten Zeichen } der letzten Zeile > Auf Blog anwenden

--> Code:
.item:nth-child(13n+1) .card .front .title {
background-color: #E4E4E4;
color: #000000;
}
.item:nth-child(13n+2) .card .front .title {
background-color: #6B6B6B;
color:#ffffff 
}
.item:nth-child(13n+3) .card .front .title {
background-color: #E7E7E7;
color: #3E3E3E
}
.item:nth-child(13n+4) .card .front .title{
background-color: #585858;
color: #ffffff;
}
.item:nth-child(13n+5) .card .front .title {
background-color: #C9C9C9;
}
.item:nth-child(13n+6) .card .front .title {
background-color: #858585;
color:#F8F8F8;
}
.item:nth-child(13n+7) .card .front .title {
background-color: #555555;
color:#D3D3D3;
}
.item:nth-child(13n+8) .card .front .title {
background-color: #AFAFAF;
}
.item:nth-child(13n+9) .card .front .title {
background-color: #373737
color: #DFDFDF;
}
.item:nth-child(13n+10) .card .front .title {
background-color: #8C8C8C;
}
.item:nth-child(13n+11) .card .front .title {
background-color: #4E4E4E;
color: #DADADA;
}
.item:nth-child(13n+12) .card .front .title {
background-color: #F5F5F5 ;
}
.item:nth-child(13n+13) .card .front .title {
background-color: #888888;
}

Und sonst?

Die Graustufen werden in allen Browsern richtig interpretiert - sogar im Internet Explorer, obwohl der eigentlich erst ab IE9beta mit nth-child(n) umgehen kann. Das liegt an einem JS-Fix, das zusammen mit dem Script für die Darstellung der dynamischen Ansichten ausgeliefert wird. Leider fixed das nur CSS für die Vorlage selber, nicht eigenes HTML; nun gut, man kann nicht alles haben.