Dieser Beitrag wurde vor mehr als 12 Jahren veröffentlicht. Daher kann es sein, dass sein Inhalt oder ein Teil davon nicht mehr aktuell ist.
Nach meinem Redesign gestern, wurde ich drauf angesprochen zu Änderungen kleine HowTos zu schreiben. Dann möchte ich einfach mal mit einem kleinen Shorty anfangen, der für mich persönlich sehr wichtig war. Beim WordPress 3.2 Standardtheme Twenty Eleven kann man recht einfach das Header-Bild anpassen, auch eine Bildrotation ist möglich, doch die Abmessungen sind festgesetzt.
Twenty Eleven ist allgemein recht gut anpassbar, doch einige Dinge wurden meiner Meinung nach sehr schlecht bedacht. So sind zum Beispiel in der Standardkonfiguration die Artikelseiten und die Einzelseiten ohne Sidebar. Für mich ein No-Go und musste erst umständlich angepasst werden. Ebenso verhält es sich mit dem Header-Bild, nur ist es hier nicht ganz so umständlich.
Du kannst hier ein eigenes Bild für die Kopfzeile (auch Header genannt) hochladen. Im nächsten Schritt kannst du es außerdem passend zuschneiden. Bilder von genau 1000 x 288 Pixeln werden benutzt, wie sie sind.
Dieser Satz begrüßt einen, wenn man das Header-Bild ändern möchte. Und da ist das Problem, es gibt an keiner Stelle im Backend die Möglichkeit die Abmessungen anzupassen. Ohne geringe Kenntnisse in PHP ist es also wieder ein mal nicht möglich diesen Punkt einfach zu ändern. Je nach Server-Konfiguration, lässt es sich allerdings doch über einen kleinen Umweg im Backend bewerkstelligen.
In der Navigation gibt es unter dem Punkt »Design« den Unterpunkt »Editor«, welcher nun angewählt werden muss. Standardmäßig sollte sich hier nun die CSS-Datei (Stylesheet) von Twenty Eleven öffnen – vorausgesetzt, es ist euer ausgewähltes Theme. Auf der rechten Seite findet man dann den Punkt »Theme-Funktionen«; Diesen müssen wir nun auswählen.
Mit STRG+F öffnen wir nun die Browser-Suche und geben hier folgendes ein:
The height and width of your custom header.
Dann seid ihr auch schon an der Stelle, an der ihr die Abmessungen anpassen könnt. HEADER_IMAGE_WIDTH ist hier für die Breite zuständig und steht standardmäßig auf 1000 (Angabe in Pixeln), HEADER_IMAGE_HEIGHT steht hier für die Höhe und steht standardmäßig auf 288. Zu ändern sind hierbei nur die Zahlen, alles Andere in dem Abschnitt muss unangetastet bleiben, sonst kann es dazu kommen, dass euer Blog nicht mehr richtig funktioniert.
Und wenn ich es nicht ändere?
Dann kann das Bild direkt in WordPress zurecht geschnitten werden. Allerdings nur auf die Maße, die eben vorgegeben sind. Wenn der Header ausschließlich aus einem Foto besteht (Standardkonfiguration), dann ist das sicherlich nicht schlimm, wenn allerdings ein Header, wie er üblich ist, verwendet wird, hat man ein Problem.
Wenn man es nicht zurecht schneidet, wird der Header übrigens hässlich verzerrt dargestellt.
Ich hoffe, ich konnte mit diesem kleinen Shorty etwas Abhilfe schaffen. Ich werde mich bemühen größere und auch kleinere Dinge öfters mal anzusprechen, damit auch ihr euer Theme leicht anpassen könnt.
Klasse, das war genau das, wonach ich gesucht habe. Eigentlich finde ich das Theme schön, so dass ich nur ungerne ein anderes benutzen wollen würde, zumal es Twenty Eleven eben auch in deutscher Übersetzung gibt. Hast Du vielleicht auch einen Tipp, wie ich den (optionalen) Header über der Grafik verkleinere bzw. das Suchfeld darin nach der Verkleinerung wieder horizontal zentriere?
Das geht nur über Fummelei in der style.css. Ich hab einen Kommentar an die geänderten Zeilen geschrieben:
/* =Header
———————————————– */
#site-title {
margin-right: 270px;
padding: 1.65625em 0 0; /* nach oben schieben 3.65… */
}
#site-description {
color: #C00;
font-size: 14px;
margin: 0 270px 1.65625em 0; /* Abstand nach unten 3.65… */
}
/* Search Form */
#branding #searchform {
position: absolute;
top: 2.5em; /* Eingabefeld: Abstand von oben 3.8 … 1.8 */
right: 7.6%;
text-align: right;
}
hi, danke für den tipp. wie kann ich denn den abstand zwischen header bzw. menü und seitenübeschrift ändern? bei mir ist da eine große lücke und das schaut nicht wirklich gut aus.
Hi kann mich meinem Vorredner sal nur anschließen!
Die Frage wurde doch von Carsten bereits beantwortet.
Hi Wishu,
erstmal respekt, ein Super Tutorial und ich konnte bisher alle deine Tipps zur Anpassung des Twenty-Eleven Wp-Themes 1-zu-1 umsetzen :-) Hat mir ne Menge (laienhafte) Fummelei erspart. Hast du zufällig noch nen Tipp parat, wie ich den Abstand zwischen (Top)-Navi und dem Content-Bereich veringern kann? Sieht momentan noch ein wenig "gestreckt" aus :-)
Grüße!
Das ist dieser Bereich:
#main {
clear: both;
padding: 1.625em 0 0;
}
Hierbei die Zahl bei padding verringern.
Hallo,
Superhilfe! Das hat mir eine Menge Sucherei in dem styleshit erspart.
Danke
Wolfgang
…will auch gerne das twenty-eleven ändern, schaff es aber auf keine Weise, die Schreibrechte so zu ändern, dass sich das css oder die page ändern lässt. Ich geh via ftp rein und ändere die Schreibrechte, aber es passiert nichts. Bin bei all-incl.com gehostet.
Mus ich bei denen mal anrufen?
klasse infos … ich bastel auch gerade am 2011 herum … ich möchte die headergrafik am oberen Rand plazieren. Was muss ich da anpassen?
Danke schon mal vorab
welche Plugins nutzt du für einen Kommentarbereich. Und wie hast du den hingekriegt, dass alles auf deutsch ist?
Grüsse
Olli
Hallo Olli,
das ist Social Login. Ich hatte vor geraumer Zeit mal darüber gebloggt: http://kaiserkiwi.de/2012/03/wishu-blog-wird-sozialer-mit-social-login-kommentieren/
Deutsch ist Twenty Eleven automatisch, wenn man die deutsche Version von WordPress hat. Ansonsten muss man die Sprache im Code anpassen.
Hey Wishu,
danke dir. Und für die Avatar-Zuordnung und die Benachrichtigung bzgl Folgekommentaren? Das ist nicht Standard oder?
Grüsse
Avatare werden Standardmäßig von WordPress über Gravatar bezogen. Das ist also fest eingebaut. Für die Avatare von Twitter und Co gilt wieder Social Login.
Die Benachrichtigung bei Folgekommentaren ist ein Teil von Jetpack. Ein Plugin direkt von WordPress.com, welches WordPress in meinen Augen erst komplettiert.
oh, danke dir. Werde ich gleich mal checken.
Hi,
cooler Blog…
Ne Frage:
Wie bekomme ich diese Auswirkung nicht nur für die Startseite, sondern für alle Seiten hin?!
„Das ist dieser Bereich:
#main {
clear: both;
padding: 1.625em 0 0;
}
Hierbei die Zahl bei padding verringern.“
MFG und Danke!