carpe wrote: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
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