Anpassen des Header Image vom Twenty Eleven.

Gesucht per Suchmaschinen hatte ich quasi schon mehrere Stunden und gar Tage nach einer passenden Lösung, um das Header Image des Twenty Eleven Theme entsprechend meinen Bedürfnissen etwas mehr anzupassen. Als ich fast schon die Suche nach einer Lösung dazu aufgeben wollte, weil die schiere Anzahl an Suchergebnissen mir den letzten Nerv raubte, fand ich eine Lösung. 🙂

Customizing the Twenty Eleven Theme Banner hieß der Artikel in der Google Suche und enthielt genau die Lösung welche ich so lange schon fast vergeblich gesucht hatte. Zudem gab es neben einer korrekten sowie einfachen Beschreibung auch noch ein paar Bilder als Beispiele dabei zu sehen. Somit konnte ich mir also schon vor dem Anwenden der Änderungen ein gutes Bild davon machen, wie es später aussehen würde. 

Bastelarbeiten am Child Theme des Twenty Eleven.

Zwar ist der gesamte Artikel nur in Englischer Sprache verfügbar, aber für das bisschen Text und die Bilder als Beispiele anbei, reichten meine Englischkenntnisse alle male. Somit machte ich mich als frisch ans Werk, die Angaben aus diesem Tutorial entsprechend für mein Child-Theme umzusetzen.

Im Endeffekt waren es nur ein paar Zeilen Code die ich lediglich einfach kopieren und einfügen musste, an der für mich passenden Stelle in der Style.css des Child-Theme meines Twenty Eleven Theme.

#site-title {
position: absolute;
left: 7.2%;
top: 0.125em;
}
#site-description {
position: absolute;
left: 7.6%;
top: 6.625em;
}

Nachdem ich also diese paar Zeilen an Code entsprechend eingefügt hatte, ergab sich die Ansicht welche Du aktuell sehen kann. Das „Header Image“ also das Bild im Kopfbereich des Blog enthält nun den Namen des Blog sowie dessen Überschrift und der „weiße Bereich“ darüber der vorher dort war ist nun verschwunden. 😀

Vorteile und Nachteile…

Allerdings hat diese manuelle Änderung im Code des Child-Theme meines Twenty Eleven auch einen gravierenden Nachteil. Wenn man nämlich nun die Bildfunktion im Admin ausschaltet, dann erscheint der Blogname sowie die Überschrift des Blog quasi überlappend auf dem Inhaltsbereich. Das sieht nicht nur sehr unschön aus, auch macht es das lesen der Überschrift des jeweils ersten Beitrages sehr schwer.

Da ich allerdings nicht vorhabe das Header Image zu löschen oder gar ganz aus zuschalten, wird sich dieses Problem für mich ergeben. Für den Fall das ich wieder erwarten diese Funktion doch irgendwann mal ausschalten will, habe ich die paar eingefügten Zeilen Code in der Style.css meines Twenty Eleven Theme entsprechend mit einem Kommentar zu Beginn und Ende versehen. Somit weiß ich dann auch noch in Zukunft wofür jener Code zu gebrauchen ist. 😉