5202

ein Blog über technische Fragen zu Blogger

Dynamische Ansichten: Label farbig markieren

von
Heute noch mal eine Idee im Zusammenhang mit der dynamische Ansicht 'Flipcard'. In dieser Ansicht lassen sich die Posts ja unter anderem nach Labels sortieren und ich fände es interessant, allen Posts eines Label die gleiche Farbe zu geben. Durch das 'Highlighting' kann damit ein Label auf der Startseite optisch besonders hervorgehoben, oder alle Labels farblich sortiert werden oder was-auch-immer-ihr-sonst damit anfangen wollt.

Ihr könnt euch das 'Live' anschauen - das ganze schematisch:

Ansicht Label

Ansicht Startseite

Grundlage

Den einzelnen Kacheln eine eigene Farbe zuzuordnen ist im Grund simpel, weil die Kacheln in der dynamischen Ansicht 'Flipcard' für jedes Label eine eigene Unterklasse haben. Der Klassenname ist dabei gleich wie das zugehörige Label, nur Kleingeschrieben. Für das Label 'Bilder' ist die Klasse also class="bilder". Sehr eingängig und einfach zu merken.

Weiterhin besitzen die Kacheln folgende Unterklassen:

.front                    Vorderseite
.back                      Rückseite
.title                    Posttitel
.date                      Postdatum
.comments-count  Kommentare

Pseudoklassen werden mit der Klasse .card kombiniert. Am wichtigsten wird in der Praxis wohl :hover sein. 

Einige Beispiele, um es es deutlicher zu machen:

Alle Kacheln - Vorderseite Rot
.items .item .card .front{
  background: red;
}
Alle Kacheln - Rückseite Rot
.items .item .card .back{
  background: red;
}
Kacheln vom Label 'Bilder' - Vorderseite Rot
.items .bilder .card .front{
  background: red;
}
Kacheln für Label 'Bilder' - Vorderseite Titel Rot
.items .bilder .card .front .title{
  color: red;
}
Hover Rot für das Datum der Rückseite über die Kacheln vom Label 'Bilder'
.items .bilder .card:hover .back .date{
  color: red;
}

Probiert's selber aus, was alles möglich ist.

Einfärben: Einfache Version

In der einfachen Version - die ich für den Anfang empfehle - bekommen die Kacheln für die Vorderseite eine eigene Farbe und der Posttitel die Farbe der jeweiligen Komplementärfarbe. Der Name des Labels ist 'Bilder'.

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: Einfache Version

.items .bilder .card .front {
  background-color: rgb(238, 148, 37)
}
.items .bilder .card .front .title {
 color: #116bda;
}

Einfärben: Halbtransparente Version

Bei mir im Blog habe ich den Kacheln einen halbtransparenten Hintergrund gegeben. Das war eine Übung zum tieferem Verständnis der dynamischen  Ansichten und ich werde die CSS dafür noch mal extra geben.

Fragen? Kommentare? Anregungen?

Findet ihr Fehler im Post? Ist irgendetwas unklar? Ich freue mich über Fragen, Kommentare oder Anregungen!