Responsive Design – Teil 2: Design der Blogposts von Kategorie abhängig machen

0

Im zweiten Teil dieser Reihe möchte ich euch zeigen, wie ich das Design der Blogposts von Kategorien abhängig machen konnte! Ich habe mich nun doch dafür entschieden das Designen im Grafikprogramm und das Coden nicht hintereinander, sondern direkt parallel zu machen.

Wo fange ich an?

Als Grundlage für mein neues Design/Theme habe ich das WordPress Theme Twentyfifteen genommen, dessen Code-Bestandteile ich einfach anpassen, komplett verändern oder gar löschen werde. Löschen ist ein gutes Stichwort, das machte ich nämlich zu erst mit dem Inhalt der CSS.

Keine CSS

Schön sieht es aus! Es war nun an der Zeit, Schrift, Hintergrundfarbe und die Elemente anzupassen. Das ging relativ schnell, da dies noch meinem Schwierigkeitsgrad entspricht.

erste Schritte CSS

Das neue Design soll optisch nicht komplett neu aussehen, daher werde ich einige Dinge (wie z.B. die Hintergrundfarbe) aus der aktuellen Version einfach übernehmen.

Anschließend baute ich mir ein Grundgerüst aus diversen Div-Tags, platzierte somit meine Elemente an die richtige Stelle und beschloss dann, mich direkt auf das Schlimmste zu stürzen.

Designs der Blogposts von Kategorien abhängig machen

Das wohl komplizierteste, was ich mir in den Kopf gesetzt habe. Um ehrlich zu sein hatte ich keine Ahnung, wo ich überhaupt anfangen sollte. In meinen Lesezeichen habe ich mir vor längerer Zeit eine Seite abgespeichert mit einer Anleitung dafür, die leider aber nicht funktionierte. Ich fragte Google also, was ich falsch gemacht habe und fand diesen Post hier!

Dank Herrn Chip Benett gehe ich nun also post_class() auf den Grund. Die Theorie verstand ich, aber was genau sollte ich nun in meine CSS schreiben? Wie ihr seht, ich bin wirklich nicht vom Fach.

Wegen einer Empfehlung meines Genie-Kumpels (Grüße an Heiko :D) nutze ich Chrome regelmäßig, um meinen Code zu verstehen. Wo im PHP Code also post_class() steht, entsteht ein class=“[…] category-name-der-kategorie“. Mein Kopf ratterte zwar eine kurze Weile, aber ich verstand allmählich und fügte in meine CSS folgendes ein, was den Hintergrund schwärzen sollte (man muss ja die Dinge erst einmal austesten):

.category-oh-man-de {
 background: #000;
 }

Und siehe da: Der Test-Post der Kategorie Oh-Man.de erstrahlte im schwarzen Hintergrund! Hurra!!!

Fertige Designs der Bloposts

So schwer war das also gar nicht. Nach dieser Erkenntnis erstellte ich die einzelnen Hintergründe im Grafikprogramm, was doch einiges an Zeit in Anspruch nahm. Als diese fertig waren, spielte ich eine gefühlte Ewigkeit mit den Farben und Formen der einzelnen Überschriften, Schriften, hovers etc. herum. Nach zwei Tagen waren meine einzelnen Designs für die Blogposts der jeweiligen Kategorie aber endlich fertig!

Blogpost abhängig von Kategorie

Blogpost abhängig von Kategorie

Blogpost abhängig von Kategorie

Blogpost abhängig von Kategorie

Blogpost abhängig von Kategorie

Ich kann gar nicht in Worte fassen, wie happy mich dieser kleine Meilenstein gemacht hat! Leute, die davon Ahnung haben, schmunzeln sicher darüber (Grüße an Heiko, die Zweite :D), aber für mich ist das eine richtig große Sache. Eine weitere kleine Spielerei ist der Schnipsel an der Seite der Beiträge, auf dem das Datum und die Kommentar-Sprechblase sitzen. Wenn man sich schon mit CSS austoben kann, dann richtig.

Weitere Teile der Reihe:

Kategorie: Oh-Man
Tags:

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Time limit is exhausted. Please reload CAPTCHA.

Scroll to Top

Hier werden (wie auf den meisten Websites) Cookies verwendet. Wenn Du dies zu Kenntnis genommen hast und Oh-Man.de weiterhin nutzen möchtest, stimme bitte zu. Mehr erfahren

Die Cookie-Einstellungen auf dieser Website sind auf "Cookies zulassen" eingestellt, um das beste Surferlebnis zu ermöglichen. Wenn Du diese Website ohne Änderung der Cookie-Einstellungen verwendest oder auf "Akzeptieren" klickst, erklärst du sich damit einverstanden.

Schließen