Nur ein kleiner Post für zwischendurch - außerhalb der Reihe 'Ein eigenes Template entsteht'.
Ihr kennt die dynamischen Ansichten? Die sind nett, aber schwierig anzupassen. Sogar so etwas grundlegendes wie ein eigenes Headerbild zu benützen, ist in den dynamischen Ansichten eine riesen Aktion.
Das größte Problem ist, dass im Header alle Abstände exakt eingehalten werden müssen, damit nachher die Navbar nicht verdeckt ist, flackert oder sonst wie komisch tut.
Das wird doch relativ oft gefragt und weil das für unterschiedliche Headergrößen jeweils berechnet werden muss und das alles andere als intuitiv ist, habe ich ein kleines Tool geschrieben, dass für beliebige Headergrößen die Abstände berechnet.
Anwendung
Die Anwendung ist denkbar einfach. Ihr geht zum Header CSS Generator:
Oben tragt ihr die Höhe ein, die euer Header braucht. Wenn ihr euch nicht sicher seit, nehmt irgendeine Höhe und probiert's damit aus.
Der Generator gibt euch unten eine CSS. In dieser CSS liegt ein Header-Bild, das für jede Höhe bereits die richtige Größe hat. Kopiert diese CSS in den Blogger-Vorlagendesigner > Eigene CSS.
Ersetzt nun mein Platzhalter-Bild ...
https://lh6.googleusercontent.com/-kVD92nLzVw0/UFY5Rq8BekI/AAAAAAAACwI/3GJn7Aoo82o/s107/wg_grunge_flag_soviet.jpg
... durch euer eigenes Header-Bild. Euere Bild kann auch kleiner sein als mein Platzhalter - es wird dann in dem bestehenden Raum horizontal und vertikal zentriert!
Wenn ihr zufrieden mit dem Ergebnis seit, dann speichert das ganze mit 'Auf Blog anwenden' und seht euch das Ergebnis an.
Statische Seiten
Falls ihr statische Seiten verwenden wollt, gibt es eine Reihe von Design-Problemen die ihr damit lösen könnt, das ihr euer Header-Bild auf den statischen Seiten ausblendet - eine bessere Lösung habe ich bis jetzt leider nicht gefunden :(.
Dazu kopiert ihr direkt unter die Header-CSS dieses Snippet.
/* Statische Seiten - Header entfernen */
.viewitem-open #header .header-drawer.sticky,.viewitem-open #header .header-drawer {
top: 0;
}
.viewitem-open #header .header-bar{
height: 28px;
}
.viewitem-open #header:hover .header-drawer,.viewitem-open #header .header-drawer.open, body.viewitem-open #header .header-drawer {
top: 28px;
}
.viewitem-open #header-container {
height: 105px;
}
.viewitem-open .viewitem-panel .viewitem-inner {
top: 0;
padding-bottom: 20px !important;
height: auto !important;
}
.viewitem-open #header-container #header.header .header-bar span.title{
display: none !important;
margin: 0 auto !important;
height: 28px;
}
Speichern > Fertig!
Fragen Anmerkungen
Falls irgendetwas nicht klappt, ein Design-Problem auftaucht oder ihr Verbesserungsvorschläge habt, dann immer her damit :D. Ich verwende die dynamischen Ansichten zwar nicht, weiß aber, dass die ihre Fans haben ... Änderungen sind da leider schwieriger als in allen anderen Layouts.
