..oder: Halleluja, Saupreiss damischer! Feintuning am Blog – auf dass die Besucher erfreut einkehren..
Puhh! Das war ein harter Tag gestern – Mir brennen jetzt noch die Augen, weil ich von Morgens bis Abends am Rechner saß um den schönsten Blog der Welt – ja NATÜRLICH ist DIESER BLOG gemeint, Du Dödel! – für die Besucher noch schöner machen wollte. Oh, da gab es einiges zu tun, denn auch wenn dieser Blog schon der schönste ist, so haben wir (also die komplette Belegschaft der Dr. Love Labs und natürlich auch die für die Öffentlichkeitsarbeit zuständigen Mitarbeiter – von den blöden Physikern verächtlich Handlanger genannt – des NERD-O-MANIA Blog) doch immer noch das bestreben ihn zum allerallerallerschönsten zu machen.
Deshalb hatte ich einiges auf der Liste:
- Die Dr. Love Labs (und natürlich auch NERD-O-MANIA) sollten einen neuen Standard-Avatar für alle Besucher, die keinen Eigenen haben, bekommen. Natürlich thematisch passend zum Nerd-o-Mania Grundgedanken..
- Die Kategorien sollten nun nicht nur mehr nur durch die Überschrift, sondern auch farblich symbolisieren, wozu Sie thematisch gehören.
- das Menü sollte aufgehübscht werden und mit FA-Icons übersichtlicher gestaltet.
- Die Slideshow auf der Begrüßungsseite sollte etwas mehr Pep erhalten und etwas auf Retro gestylt sein – am besten mit einem Video und Sound
- und außerdem machte mein Server nicht das gewohnte Kontroll-piepsen beim booten.
Zuerst wollte ich dem Hardware-Problem zu Leibe rücken – es nervt mich einfach, wenn Dinge nicht richtig funktionieren – selbst wenn das Kontrollpiepsen nur beim einschalten des Servers benötigt wird, ich habe das im Hinterkopf und es geht mir dauernd “auf den Senkel”, weil ich dran denke, aber es noch nicht behoben habe. Also ab auf Tauchstation, die Seitenklappe des Servers geöffnet und mal einen Blick in die Innereien geworfen. Die Ursache des fehlenden Einschalt “Piep” war schnell gefunden: ein Stift auf dem der Lautsprecherstecker gesteckt war, war lose und hatte keinen Kontakt (auf dem Bild rot eingekreist). Mit einer Spitzzange wurde der Stift, der unten eine Klemmbefestigung hatte leicht gedreht und gedrückt, dass er wieder einrastete. Lautsprecherstecker aufgesteckt – testweise den Power-On Schalter auf dem Mainboard (zu Wartungszwecken hat das ASUS Z97 einen Ein/Aus-Taster, sowie ein Display welches einen Fehlercode anzeigt) gedrückt – PIEEEP – alles klar. Punkt 1 auf der Liste abgehakt.
Jetzt ging es an die kreative Seite. Der Standardgravatar sollte einer angepassten Version weichen, die auch schon optisch zeigte, dass hier hauptsächlich megacoole aber auch intelligente Wesen Ihr Unwesen treiben.
Mittels Photoshop wurde geschwind ein Gehirn mit einer Sonnenbrille gepaart – (abspeichern in der Größe 80 x 80 Pixel) fertig war der angepasste Avatar. Das erstellen einer Grafik ist das eine – das einbinden eine ganz andere. Da musste ich auch googeln, fand aber relativ schnell die Lösung. Es musste ein kleiner Textabschnitt in die Funktions.php Datei des aktiven Themes eingefügt werden. Für Nachbauer – der Schnipsel sieht so aus:
add_filter(‚avatar_defaults‘, ‚meinAvatar‘);
function meinAvatar($standard) {
$avatar = get_bloginfo(‚template_directory‘) . ‚/images/noname.png‘;
$standard[fusion_builder_container hundred_percent=“yes“ overflow=“visible“][fusion_builder_row][fusion_builder_column type=“1_1″ background_position=“left top“ background_color=““ border_size=““ border_color=““ border_style=“solid“ spacing=“yes“ background_image=““ background_repeat=“no-repeat“ padding=““ margin_top=“0px“ margin_bottom=“0px“ class=““ id=““ animation_type=““ animation_speed=“0.3″ animation_direction=“left“ hide_on_mobile=“no“ center_content=“no“ min_height=“none“][$avatar] = „NERD-O-MANIA Avatar“;
return $standard;
}
Hat man alles richtig gemacht, dann erscheint in WordPress unter Einstellungen > Diskussion > unten bei Standardavatar der Eintrag angepasste Avatar. Das ging ja gut fix weiter – keine halbe Stunde später war auch der Punkt abgehakt. Der nächste Punkt war nicht so einfach umzusetzen, da er etwas frickeliger war und vom Avada-Theme auch nicht in den Einstellungen unterstützt wird.
Das Powermag Theme bot als nettes Feature die Möglichkeit den Kategorien in der Navigation eine bestimmte Farbe zuzuweisen. Dies wollte ich auch beim Avada Theme einbauen. Es gab da einige Ansätze, die mir aber zu aufwendig erschienen – am Ende reichte eine Zeile Code, die ich in die CSS Definition schrieb, dass die Links in den entsprechenden Farben angezeigt werden:
.category-sonntagsgedanken a {
color: #00A2E7;
}
das war für meine Bedürfnisse ausreichend – sah auch gut aus. Also abgehakt auf der Liste..
Auf zum nächsten Punkt. Das Avada-Theme unterstützt ein “Mega-Menü”. Die Entwickler haben hier dem Benutzer des Themes die Möglichkeit gegeben, im Menü selber Widgets einzubauen, wie Slideshows, oder ähnlichen Dingen. Unter anderem unterstützt das Menü die Einbindung der “Font Awesome Icons”. Nach einer halben Stunde hatte ich alle Icons gefunden und den Code an der entsprechenden Stelle im Menü eingefügt. Damit war schon über die Hälfte auf meiner Liste abgearbeitet.
Die nun folgenden Arbeiten waren aber dafür wesentlich zeitaufwendiger. Das Avada Theme hat bereits 4 verschiedene Slideshows integriert – eine ist eine selbst entwickelte – die anderen 3 kosten richtiges Geld, wenn man Sie bei Themeforest kauft. Ich hatte für die Begrüßungsseite vor Monaten eine Slideshow mit dem „Layer Slider“ erstellt, doch die erschien mir langsam nicht mehr so ganz passend. Ich wollte ein bisschen Retrolook in den Blog bringen. Ein bisschen wie ‘Art Deco’ – vielleicht sogar ein auf Alt getrimmtes Video. Dafür musste eine Video-Datei, die ich mal mit 3ds max erstellt hatte, und die eine Haltestelle in Dortmund darstellt herhalten um Sie auf „alt“ zu trimmen. Außerdem suchte ich im Internet auch noch nach Wallpapern des Endzeit Games Fallout 3 und Musik-Dateien aus dem Spiel – Sie waren aus der Swing-Ära – also ganz pasend zu dem angepeiltem 50er Jahre Stil, der mir vorschwebte.
Alles zusammen gesucht, wurde Nero Video 2015 gestartet und los ging’s..
Zuerst wurde ein zugeschnittenes Wallpaper an den Anfang gelegt, dann das Video mit der Haltestelle importiert – am Ende noch mal das Wallpaper. Dann über das ganze einen Effektfilter gelegt, der einen alten beschädigten Schwarzweiss-Film im Sepia Ton (das ist diese leicht gelbliche Farbe) erzeugt. Am Anfang versuchte ich die Musik direkt mit ins Video zu integrieren – doch der Film wurde beim Export zu groß.
Ich entschied mich das Plugin “Soundy” einzusetzen – es ermöglicht für jeden Blogbeitrag und auch für jede Seite eine angepasste Hintergrundmusik. Um den Blog nicht komplett zu verkaspern ist aber nur auf der Begrüßungsseite ein passender swingender Jazz Titel von Peggy Lee “Why Don’t You Do Right” – außerdem ein kostenloser Soundschnipsel von Audiojungle (ein Bereich, der ebenfalls zu Themeforest.org gehört). Diese Low Tempo Musik wird abgespielt, wenn Ihr auf die Galerie-Seite geht, um euch Fotos anzuschauen.
Jetzt noch alles auf den Server hochladen und die entsprechenden Einstellungen – und das war’s.
Mein Blog erscheint jetzt in einem tollen neuen Outfit.
Was meint Ihr? Gefällt euch der neue Stil? Über euer Feedback würde ich mich freuen..
Dieser Beitrag wurde bereits [views id=“POST_ID“]
[/fusion_builder_column][/fusion_builder_row][/fusion_builder_container]
