5202

ein Blog über technische Fragen zu Blogger

Spezifische dynamische Vorlage ändern

von
Bisher war es so, dass in den Dynamischen Vorlagen eine Änderung durch CSS immer globale Auswirkungen hatte, d.h. es war nicht möglich, etwa nur die Ansicht 'Flipcard' zu ändern und die anderen Ansichten so zu lassen, wie sie sind.
Das hat sich nun geändert. Blogger hat seit einigen Tagen jeder Ansicht eine eigene, spezifische class spendiert. In dem Post werde ich ein Beispiel geben, was ihr damit anstellen könnt.

Dynamische Klassen

Die neuen dynamischen Klassen sind äußerst simpel aufgebaut - jede class lautet genau so wie die dazugehörige dynamische Ansicht.
Klassen
.clasic
.flipcard
.magazine
.mosaic
.sidebar
.snapshot
.timeslide
Ihr wollt Beispielsweise nur für die Ansicht 'Timeslide' die Titelfarbe auf 'Rot' ändern - global ginge das so:
#header .header-bar .title h1 {
   color: red;
}
Jetzt habt ihr eine dynamische Klasse, mit der die CSS nur in der Ansicht 'Timeslide' gültig ist:
.timeslide #header .header-bar .title h1 {
   color: red;
}
Das ist alles. Ziemlich einfach, oder?

Wozu?

Es gibt eine gute Nachricht: Die neuen Klassen sind ein deutliches Zeichen, dass es wohl bald Gadgets in den dynamischen Ansichten geben wird. Jede Ansicht hat eine andere Struktur und ein HTML-Element wie eine Sidebar braucht deswegen für jede Ansicht eine eigene CSS. Ohne spezifischen Selektor würde das nicht funktionieren.
Saubererer Code
Ich geb's zu, ich bin a bisserl a Fan der neuen dynamischen Ansichten. Deren größtes Problem ist, dass sie sich schlecht personalisieren lassen. Eine größere Änderung in einer einzelnen Ansicht führt oft zu massiven Layout-Probleme in den anderen Ansichten. Ich habe in der Ansicht 'Classic' etwa den gesamten Header umgebaut und das funktioniert so nur in 'Classic', in den anderen Ansichten dagegen nicht.

Durch die neuen dynamischen Klassen kann ich nun CSS sauber nur für eine spezifische Ansichten schreiben. Mein Umbau vom Header etwa:
/* Header-classic
----------------------------------------------- */
.classic #header .header-drawer, .classic #header input#search {
  display: none;
}
.classic #header-container {
    height: 65px;
}
.classic #header .header-bar {
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
    height: 65px;
    width: 894px;
    position: relative; 
    margin: 2em auto;
}
.classic #header .header-bar .title {
   margin: 0 auto;
   height: 65px;
}
.classic #header .header-bar .title h1 {
   font-size: 4.25em;
   font-family: 'Hoefler Text', Constantia, Palatino, 'Palatino Linotype', 
'Book Antiqua', Georgia, serif;
}
Layout-Ideen
Für jede Ansicht könnte ich ab jetzt [theoretisch] eine eigene CSS formulieren. Theoretisch deswegen, weil's natürlich ein riesen Aufwand ist. Ein oder zwei Ansichten würde ich aber gerne zusätzlich zu meiner Hauptansicht anbieten, ohne das es mein Hauptlayout zerreißt. Und das geht jetzt.

Die dynamischen Ansichten haben in der kurzen Zeit, in der es sie gibt, bei vielen Bloggern einen richtig schlechten Ruf erworben - sie sind inflexibel, sie lassen sich nicht personalisieren, sie sind 'kalt' und so weiter. Vieles davon ist sicher richtig. Aber die Ansichten haben auch ein großes Potential - das zu entdecken und die Grenzen davon zu erkunden, finde ich spannend.

Mehr davon hier auf diesem Blog :=).

Fragen, Anregungen?

Ihr habt Fragen, Anmerkungen, Kommentare? Immer her damit!