But I think it’s not too late to still write a little post about it.

The goal: make the blog look like the rest of lgk.io

The blog runs with WordPress and now with a new child theme of the preinstalled Twenty Twenty-One, I just called „Twenty Twenty-One LGK“. In the past I used a theme I totally created myself, it was called „Winegum“. It’s still available on GitHub (https://github.com/lgkonline/Winegum1), but I really don’t recommend to use it anymore. It’s very outdated not compatible with modern WordPress features and third-party plugins. It might also be better for security reasons to use a theme, which is activity maintained. That’s why I switched to Twenty Twenty-One.

I used the color customisation options of the theme to make it match better with my portfolio site. That was the first step to the current look of the blog. From there I created my child theme and replaced parts of the theme, most important part is the header.

By the way: my portfolio site and this blog are running on completely different technologies. The blog is a PHP-server-rendered WordPress site and my portfolio is a React Single-Page-Application. So my task was to bring the header of my React app to the WordPress theme and make it look as seamless as possible.

I’m pretty happy with the result. When you switch between „Blog“ and „Start“ for example, you are switching between two totally separated sites, hopefully without mentioning it. The blog uses the same colors and the same font now.

The new search bar

One thing was still missing on the new theme: a search bar. But hey, better late than never, right? It’s now there too!

This was actually a more difficult because I had to use some JavaScript here. I started coding the search bar on my portfolio and then brought it to the blog theme as a small React app only for the search bar. The search bar is just executing a simple WordPress search request (/?s=my+request). Right now, the request only shows results from my blog. It would be awesome, to also show results from my portfolio site. Maybe I will bring that in the future when I have time. ^^

Ein Nachteil des “Über LGK Start”-Menüs war, dass es den Inhalt überdeckt, wenn das Browser-Fenster zu klein war.

Dieses Problem wurde nun gelöst: Ist das Fenster kleiner als 1300 Pixel, verwandelt sich das Menü in eine kompakte Ansicht bestehend aus Symbolen.

Auf nach LGK Start »

Wie ihr seht, habe ich das Aussehen dieses Blogs geändert.

Damit möchte ich erreichen, dass die Bereiche von LGK ein einheitlicheres Design bekommen. Bei der Neugestaltung des Themes habe ich mich an das kommende LGK Start gerichtet.

Mir gefällt dieser frische und etwas andere Stil sehr.
Was haltet ihr davon? Würde mich über Kommentare freuen.

Ich arbeite zur Zeit an LGK Start weiter. Die Seite soll sich noch besser dem Bildschirm anpassen.

Das Hintergrundbild wird nun immer proportional gestreckt, sodass es die ganze Seite füllt.

Trotzdem hat sich die Mindest-Breite geändert. Diese beträgt nun 1000 Pixel, statt 1366 Pixel. Hat man einen kleineren Monitor, muss man später horizontal scrollen.

Es gibt noch weitere optische Änderungen. Die Tabs für die Suchmaschinen wurden etwas breiter, so wirken die Icons nicht mehr so gequetscht.
Was auf dem Bild links nicht zu sehen ist: Die aktuelle Suchmaschine wird nun statt statischer Farbe, durch Animation zwischen zwei Farben hervorgehoben.

Außerdem gibt es einen neuen Menüpunkt in der Links-Liste: Entwickler-Tools. Darin findet man Links zu Seiten, wie loremipsum.de oder Codecadamy.

Wenn die Seite fertig ist, findet ihr sie unter: lgkonline.de/start

Ich habe die Version von LGK Start jetzt auf 9.0 hochgestuft.

Neuerungen gibt es eigentlich nicht, es wurde lediglich das Design an das des neuen LGK-Menüs angepasst.

Fährt man nun mit der Maus über einen Punkt der LGK Start-Menüs, startet eine Animation als Hintergrund.

Auch die Blockboxes wurden optisch aufgepeppt. Das sind die Fenster, die erscheinen, wenn man im Optionen-Menü ein Link klickt.

Optisch hat sich auch etwas an der mobilen Version von LGK Start getan.

Das Design ist jetzt mehr an das der Standard-Version angelegt.

Außerdem passt sich die Größe des Eingabefeldes und der Buttons dem Bildschirm an.

Wenn LGK Start auf einem mobilen Gerät aufgerufen wird, wechselt die Seite sofort zur mobilen Version.

Alternativ kann auch direkt lgkonline.de/start/touch aufgerufen werden.

Dieses Board habe ich nun durch ein Menü ersetzt, welches man stets ganz oben auf jeder Seite findet.

Durch das Menü gelangst du zu LGK Start, LGK Design und LGK Blog. Über das LGK-Logo gelangst du zu Kontakt und Impressum.

Außerdem habe ich Links zu meiner deviantART-Seite und zu meinem Twitter-Account gesetzt.

In diesem Artikel habe ich bereits von dem “nächsten LGK Start” berichtet.

Ich habe nun die Arbeiten daran fortgesetzt. Damit ist die Seite jetzt grundsätzlich voll funktionsfähig. Alle Suchmasken funktionieren jetzt.

Es ist jetzt außerdem so, dass wenn ihr eine Eingabe bei der Startseite macht und dann beispielsweise auf YouTube klickt, die Suche sofort beginnt und ihr direkt nach YouTube weitergeleitet werdet.

Um die Seite auch optisch ein wenig zu verbessern, kam ein neuer Hintergrund hinzu. Diesen seht ihr auch links im Bild.

Auf meiner deviantART-Seite findet ihr diesen Hintergrund als Wallpaper: http://lgkonline.deviantart.com/art/Water-bubble-Wallpaper-and-logon-background-327361105

Klicke hier, um das neue LGK Start zu testen.

Wie ich bereits berichtet habe, arbeite ich an einem Dienst, womit man seine Startseite selbst anpassen kann.

Diesen Dienst könnt ihr auch bereits unter mys testen.

Momentan wird dort aber noch das Design von LGK Start verwendet. Rechts seht ihr, wie mys vielleicht mal aussehen wird.

Ich möchte in Zukunft noch mehr darauf achten, dass die Seite schneller geladen wird.

Um zwischen die einzelnen Bereiche von lgkonline.de zu switchen, gibt es auf jeder Seite eine Navigation.

Diese wurde nun optisch etwas aufgebessert. Sie befindet sich nun nicht mehr unten mittig, sondern unten rechts, so dass sie weniger stört.

Klickst du auf das LGK-Logo gelangst du zur Startseite des aktuellen Bereichs. Würdest du dort jetzt draufklicken, würdest du zur Startseite von LGK Blog gelangen.

Wenn du auf das Symbol daneben klickst, erscheint das Dashboard, indem du z.B. nach LGK mys switchen kannst, oder auch die gesamte Website durchsuchen kannst.

Im Internet gibt es eine Menge guter News-Portale und Weblogs, die einen interessieren. Mit Google Reader könnt ihr all diese Sites zusammenfügen und Artikel direkt im Google-Dienst (z.B. auch auf einer entsprechenden Smartphone-/Tablet-App) lesen.

Auch diesen Blog kannst du dort abonnieren.

Die richtige RSS-Adresse von uns:
http://lgkonline.de/blog/?feed=rss

Link zu Google Reader: http://www.google.com/reader