5202

ein Blog über technische Fragen zu Blogger

Dynamische Ansichten: Headerbild in beliebiger Größe bauen

von

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!

Heads up! Falls die Header-Höhe nicht passt, dann geht zurück zum Header CSS Generator und fangt von vorne an. Irgendwelche Werte in der CSS zu ändern, führt nur zu Fehlern!

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!

Weitere Posts zum Thema

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.

Heads up! Für Fragen stehen die Kommentare und mein Forum zur Verfügung - dort könnt ihr HTML problemlos posten. Für HTML in den Kommentaren schaut euch bitte diesen Post an.