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. ^^

Wie ihr vielleicht seht, erscheint der Blog erneut in einem neuen Look. Das ist die verbesserte Version von “Winegum”.
Diesen Theme könnt ihr auch nutzen und ihn auch selbst anpassen.

Den Download-Link findet ihr auf http://lgkonline.com/winegum/.

Über das Dashboard von WordPress könnt ihr Winegum weiter anpassen. So könnt ihr z.B. das Header-Hintergrundbild, ein eigenes Logo setzen und noch einiges mehr.
Auch könnt ihr entscheiden, ob ihr eine Sidebar wollt und wenn, wo sie überall angezeigt werden soll.

Außerdem könnt ihr Links zu sozialen Netzwerken setzen, z.B. zu eurem Facebook- oder Twitter-Profil.
Derzeit werden diese Dienste angeboten:

• Facebook
• Twitter
• YouTube
• Instagram
• GitHub
• Vine
• Google+

Ich nutze für meine Projekte gerne das Framework Bootstrap.
Allerdings gefallen mir die abgerundeten Elemente nicht besonders.

Fügt man diesen CSS-Code nach dem Einbinden von Bootstrap, werden alle Abrundungen abgeschalten:

.alert,.breadcrumb,.btn,.btn-group-lg>.btn,.btn-group-sm>.btn,.btn-group-vertical>.btn-group:not(:first-child):not(:last-child)>.btn,.btn-group-vertical>.btn:not(:first-child):not(:last-child),.btn-group-xs>.btn,.btn-group>.btn-group:not(:first-child):not(:last-child)>.btn,.btn-group>.btn:not(:first-child):not(:last-child):not(.dropdown-toggle),.btn-lg,.btn-link,.btn-sm,.btn-xs,.container .jumbotron,.dropdown-menu,.form-control,.form-horizontal .form-group-lg .form-control,.form-horizontal .form-group-sm .form-control,.img-rounded,.img-thumbnail,.input-group .form-control:not(:first-child):not(:last-child),.input-group-addon,.input-group-addon.input-lg,.input-group-addon.input-sm,.input-group-addon:not(:first-child):not(:last-child),.input-group-btn:not(:first-child):not(:last-child),.input-group-lg>.form-control,.input-group-lg>.input-group-addon,.input-group-lg>.input-group-btn>.btn,.input-group-sm>.form-control,.input-group-sm>.input-group-addon,.input-group-sm>.input-group-btn>.btn,.input-lg,.input-sm,.label,.modal-content,.nav-pills>li>a,.nav-tabs-justified>li>a,.nav-tabs.nav-justified>li>a,.nav-tabs>li>a,.navbar-toggle,.pager li>a,.pager li>span,.pagination,.panel,.panel-group .panel,.panel>.list-group .list-group-item,.popover,.progress,.thumbnail,.tooltip-inner,.well,.well-lg,.well-sm,code,kbd,pre,pre code{border-radius:0}@media (min-width:768px){.nav-tabs.nav-justified>li>a,.navbar,.navbar-fixed-bottom,.navbar-fixed-top,.navbar-static-top,.list-group-item:first-child,.list-group-item:last-child{border-radius:0}}

Oder ausführlich:

.img-thumbnail,
code,
kbd,
pre,
pre code,
.form-control,
.input-sm,
.form-horizontal .form-group-sm .form-control,
.input-lg,
.form-horizontal .form-group-lg .form-control,
.btn,
.btn-link,
.btn-lg,
.btn-group-lg > .btn,
.btn-sm,
.btn-group-sm > .btn,
.btn-xs,
.btn-group-xs > .btn,
.dropdown-menu,
.btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle),
.btn-group > .btn-group:not(:first-child):not(:last-child) > .btn,
.btn-group-vertical > .btn:not(:first-child):not(:last-child),
.btn-group-vertical > .btn-group:not(:first-child):not(:last-child) > .btn,
.input-group-lg > .form-control,
.input-group-lg > .input-group-addon,
.input-group-lg > .input-group-btn > .btn,
.input-group-sm > .form-control,
.input-group-sm > .input-group-addon,
.input-group-sm > .input-group-btn > .btn,
.input-group-addon:not(:first-child):not(:last-child),
.input-group-btn:not(:first-child):not(:last-child),
.input-group .form-control:not(:first-child):not(:last-child),
.input-group-addon,
.input-group-addon.input-sm,
.input-group-addon.input-lg,
.nav-tabs > li > a,
.nav-tabs.nav-justified > li > a,
.nav-pills > li > a,
.nav-tabs-justified > li > a,
.navbar-toggle,
.breadcrumb,
.pagination,
.pager li > a,
.pager li > span,
.container .jumbotron,
.thumbnail,
.alert,
.progress,
.panel,
.panel > .list-group .list-group-item,
.panel-group .panel,
.well,
.well-lg,
.well-sm,
.modal-content,
.tooltip-inner,
.popover,
.nav-pills > li > a,
.label,
.img-rounded,
.list-group-item:first-child,
.list-group-item:last-child {
  border-radius: 0;
}

@media (min-width: 768px) {
    .nav-tabs.nav-justified > li > a {
        border-radius: 0 0 0 0;
    }
    
    .navbar-static-top,
    .navbar-fixed-top,
    .navbar-fixed-bottom,
    .navbar {
        border-radius: 0 0 0 0;
    }
}

Update am 09.04.2015: Die Elemente .list-group-item:first-child und .list-group-item:last-child wurden hinzugefügt.

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.