Logo für den Blog ändern
Für heute hatte ich mir vorgenommen, das kleine Bild rechts oben in diesem Theme zu ändern. Ein kurze Suche ergab, dass dieses Bild unter bl-themes/themename/css/images liegt. Es gibt zwei davon, ein großes (722x512 Pixel) und eines, das halb so groß ist (361x256 Pixel). Beide sind im png Format (portable network graphics), also in einem für so etwas zu empfehlenden Format. Wie soll aber mein Logo aussehen? Da ich es in mehreren Größen brauche, bietet sich als Format svg (Scalable Vector Graphics) an. Diese Bilder kann man mit Inkscape erstellen oder - in einfachen Fällen auch selbst schreiben. Hier der Code:
<svg viewBox="0 0 722 512" xmlns="http://www.w3.org/2000/svg">
<meta charset="utf-8"/>
<rect x="200" y="160" rx="20" ry="20" width="322" height="200"
style="fill:white;stroke:rgb(147,184,118);stroke-width:10;opacity:1." />
<rect x="200" y="400" rx="20" ry="20" width="322" height="50"
style="fill:white;stroke:rgb(147,184,118);stroke-width:10;opacity:1." />
<rect x="220" y="180" rx="20" ry="20" width="282" height="160"
style="fill:white;stroke:rgb(233,235,238);stroke-width:3;opacity:1." />
<line x1="300" y1="365" x2="300" y2="395" stroke="rgb(147,184,118)" stroke-width="10" opacity="1." />
<line x1="412" y1="365" x2="412" y2="395" stroke="rgb(147,184,118)" stroke-width="10" opacity="1." />
<text x="361" y="220"
font-family="Arial" fill="rgb(233,235,238)" font-size="30px" text-anchor="middle">Liebes Tagebuch ...</text>
</svg>
Das Ganze dann mit Gimp in zwei verschiedenen Größen als png exportiert und damit die ursprünglichen Bilder ersetzt.
Anmerkung: Das zweite Bild ist natürlich nur ein Viertel so groß wie das erste, Ähnlichkeitssatz für Flächen und so. Ich wollte nur testen, ob ihr aufpasst;-)
Das Resultat seht ihr ja rechts oben.
Sieht ganz nett aus, aber ... auf schmalen Bildschirmen (Mobiltelefonen, auch Handy genannt, vermutlich weil sie so 'handy' sind, wie der Amerikanerianer sagen würde ;-)) rutscht das Bild hinter den Titeltext und macht diesen schwerer lesbar. Leider wechselt das Theme erst bei einem noch schmaleren Display auf das kleinere Bild, sonst hätte man dieses ja anders gestalten können (z.B. nur in dem dezenten Grau). Das Ergebnis ist also leider suboptimal. Wer das nachvollziehen möchte muss nur seinen Browser schmaler ziehen. Ein weiteres Problem: Schaut man sich die Seite auf einem Tablet im Hochformat an, dann sieht alles super aus. Aber im Querformat verschwindet seltsamerweise das Hintergrundbild...
Leider muss ich als Fazit festhalten: Bludit und das keep-it-simple Theme haben zwar einige tolle und sehr intuitive Features, aber für einen professionellen (oder gar kommerziellen) Einsatz muss man sein Theme wohl doch tiefgreifender anpassen.