2k11 banner ganz oben plazieren

[suntsu]

Ich möchte gerne den Banner direkt oben an der Seite plazieren, und nicht unterhalb des Suchen Feld.

Aktuell


Ziel


Das heisst das banner Bild sollte am oberen Rand der Seite sein, und das Suchfeld darüber.

Ist das möglich, und wenn ja wie?

[yellowled]

Ist das möglich, und wenn ja wie?

Wie meistens gibt es natürlich verschiedene Wege, das zu erreichen. Ich erkläre mal nur den, der mir sinnvoll erscheint, weil er rein über die user.css zu lösen, somit updatesicher und zudem einigermaßen performant ist.

Du brauchst folgendes in Deiner user.css (Anmerkung unter dem Codeblock beachten!):

Code: Select all

#banner {
    position: relative;
    padding-bottom: 25px;
}

#banner > img {
    position: absolute;
    top: 0;
}

#identity,
#searchform {
    z-index: 1;
}

Anmerkung: Den Wert padding-bottom für #banner im obigen Code musst Du individuell anpassen, er hängt von der Höhe Deines Bannerbildes ab. Technisch gesehen gleichst Du damit den Unterschied in der Höhe zwischen dem Bannerbild und den Containerelementen für Blogtitel und Suchformular aus.

YL

[suntsu]

You made my day.
Genau was ich gesucht habe. Danke dir.

[carpe]

Ich hole den Post mal hoch.

Bin so vorgegangen wie oben beschrieben und habe dann den Blogtitel in der Konfiguration leer gelassen damit dieser nicht über dem Banner liegt.
Webansicht somit einwandfrei.

Auf dem Smartphone wird das Banner aber nicht angezeigt und wegen des fehlenden Blogtitels wird somit nur die Suchbox obenstehend angezeigt. Gibt es hier eine Möglichkeit in der Usercss, einen Blogtitel eingeben zu können der dann in der Webansicht aber vom Banner verdeckt wird?

[yellowled]

Gibt es hier eine Möglichkeit in der Usercss, einen Blogtitel eingeben zu können der dann in der Webansicht aber vom Banner verdeckt wird?

Klar, aber es ist halt ein bisschen komplizierter.

Zunächst mal darfst Du den Blogtitel in der Blogkonfiguration nicht leer lassen. Alles, was das erzeugt, ist eine leere h1 im Kopfbereich, und das ist ggf. sogar kontraproduktiv in Sachen SEO.

Wenn der Blogtitel wieder einen Inhalt hat, wird man ihn sehen, was zumindest auf Smartphones dann auch erwünscht ist. Statt dessen möchtest Du – nehme ich mal an – auf Smartphones das Logo nicht anzeigen, weil es dort wertvollen (und knappen) Platz frisst.

Zunächst einmal musst Du also dafür sorgen, dass die Styles aus dem obigen Code-Beispiel nur auf Geräten > Smartphone angewandt werden. Dafür setzt Du sie in Deiner user.css in das @media-Query, also zwischen diese Zeiten:

Code: Select all

@media only screen and (min-width: 768px) {
…
}

Dort am besten direkt an den Anfang. Das bedeutet übersetzt „wende die Styles innerhalb dieser geschweiften Klammern nur an, wenn die Breite des Bildschirms mindestens 768 Pixel beträgt“. Das ist eine gängige Breite für Tablets (genauer gesagt: iPads; es mag Tablets geben, die kleinere Bildschirme haben, die bekommen dann eben die Smartphone-Styles).

Gleichzeitig willst Du, sobald das Logo „hochgezogen“ wird, Deinen Blogtitel verbergen, aber nur für visuelle Browser. Screenreader und Googlebots, die mit Logografiken ohnehin wenig anfangen können, sollen sie weiter lesen können. Das geht (ebenfalls innerhalb des @media-Queries) so:

Code: Select all

#identity h1,
#identity p {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

Diese Zeilen kannst Du vor oder nach dem oben erwähnten Code einfügen.

Noch ein Tipp zum Logo: Wenn Du die Breite des Containers auf 80em erhöhst, sollte auch das Logo breiter sein als in der 2k11-Konfiguration angegeben. Also nicht 1120px, sondern 80 × 16px (1em = 16px, jedenfalls normalerweise), also 1280px bei gleicher Höhe. Da Dein Logo aber „nur“ Schrift auf weißem Hintergrund ist, kannst Du genauso gut

Code: Select all

#page {
    background-color: #fff;
}

an den Anfang Deiner user.css schreiben (nicht in @media-Query), dann fällt das nicht auf. (Im Moment sieht man, wo das Logo aufhört, weil es auf #fff gesetzt ist, die Hintergrundfarbe von #page ist aber #fcfcfc.) Eine andere Lösung wäre, im Logo den Text auf transparenten Hintergrund zu setzen.

Generell ist natürlich so ein Logo für eine solche Lösung etwas undankbar, weil es immer irgendwie vom Suchformular überlappt werden wird. Dafür ist diese Option im Theme aber auch einfach nicht vorgesehen.

Bonuslevel wäre übrigens, überhaupt keine Grafik als Logo zu verwenden und stattdessen einfach den Blogtitel in einem passenden Webfont zu setzen. Wenn Du das möchtest, sag Bescheid und sag, welche Schriftart das ist. So schwer ist das nicht.

YL

[carpe]

Herzlichen Dank Mathias für den ewig langen Beitrag. Aber in diesem Falle gings es nicht um mein Blog sondern um www.frank-knauber.de

Übrigens.....nachdem ich mich jetzt 1-2 Tage in 2k11 eingearbeitet habe entdecke ich neuen Spass am Bloggen. Top Arbeit.

[yellowled]

Aber in diesem Falle gings es nicht um mein Blog sondern um http://www.frank-knauber.de

Da funktioniert das haargenau wie oben beschrieben, nur dass Du dort den Abschnitt über die Hintergrundfarbe und das Logo als Webfont vergessen kannst. Kannst also ab „Noch ein Tipp zum Logo“ aufhören.

YL

[carpe]

Ich werds testen. Aber heute nicht mehr Danke Dir.

[carpe]

Läuft. 1000 Dank Matthias.