Die aufmerksamen Besucher von wpBUZZ.de und RSS-Abonnenten haben es schon gesehen. Seit heute ziert ein Headerlogo, manche nennen es auch ein Banner, den Kopf von wpBUZZ. Wenn ich ehrlich bin, ist das Design zwar nicht der Weisheit letzter Schluß, aber aller Anfang ist schwer und es ist noch kein Designer vom Himmel gefallen. Schluß mit der Phrasendrescherei!
So kommt das Logo in den Header
Ich setze mal voraus das ihr euch mit einem Grafikprogramm, ich nutze am liebsten Fireworks, ein schickes Logo/Banner erstellt habt. Notiert euch die Maße (Breite x Höhe) von dem guten Stück und ladet es in denWebspace eurer Seite hoch. Bei mir liegt das Logo im Ordner wp-content/themes/thesis_17/custom/ images/.
Jetzt öffnet ihr die Datei custom.css. Diese liegt eine Ebene höher als der Ordner Images.
Sucht euch eine Stelle in der CSS Datei an der ihr den folgenden Code hinkopieren möchtet. Es wäre sinnvoll die CSS Datei in einer gewissen Reihenfolge (Header, Body, Sidebar, Footer) zu ordnen. Soll euch nur später etwas mehr Ordnung bringen.
Hier ist der Code für das Headerlogo
.custom #logo {background-image: url('images/logo.jpg'); background-repeat: no-repeat; width: 331px; height: 71px; text-indent: -9999px; }
Selbstverständlich müßt ihr den Namen des Logos noch anpassen und die Größe einstellen.
Speichert die Datei mit dem grünen Big Buzz und schaut euch das Ergebniss schon einmal an.
Cool oder? Nur ist es noch nicht klickbar und dient als Homebutton der eure Besucher immer wieder zur Startseite führt.
Das geht so
Sucht den gerade in die CSS Datei hinein kopierten Schnipsel erneut und fügt das folgende darunter
.custom #logo a {width: 331px; height: 71px; display: block; outline: none;}
Das wars. Vergesst aber auch in dem zweiten Schnipsel nicht die Größe anzupassen.
