Twenty Twelve: Mein neues Child

Am Wochenende habe ich mir Twenty Twelve – das zukünftig neue Standard-Theme von WordPress – angeschaut. Mein erster Eindruck war ernüchternd und ich wollte mich nicht weiter mit dem Theme abgeben. Dennoch habe ich es mal auf meinem Test-Server installiert. Denn es wird schließlich das neue Standard-Theme. Und mit Sicherheit werden nächstes Jahr Kunden zu mir kommen, und diverse Umbauten und Erweiterungen für dieses Theme haben wollen.

Screenshot: Twenty Twelve-Demo
image-374

Screenshot: Twenty Twelve-Demo von wordpress.com

Darum habe ich mir gedacht, es kann nichts schaden, Twenty Twelve unter die Lupe zu nehmen. Was damit endete, dass ich doch sehr großes Gefallen an dem Theme gefunden und es seit gestern sogar spontan für dieses Blog übernommen habe.

Twenty Twelve: das neue Standard-Theme

Wenn man WordPress installiert, ist bereits ein fertiges Theme für das Blog bzw. die Internetseite vorinstalliert. Das ist das sogenannte Standard-Theme. Jedes Jahr gibt es für WordPress ein neues Standard-Theme. Es wird praktischerweise immer nach dem Jahr benannt, in dem es herausgegeben wurde. Seit kurzem ist das neueste Standard-Theme öffentlich. Es heißt – na klar – Twenty Twelve (Auf deutsch: zwanzig zwölf).

Twenty Twelve wird mit der am 5. Dezember erscheinenden neuen WordPress-Version 3.5 als vorinstalliertes Standard-Theme ausgeliefert. Man kann es aber jetzt schon vom Theme Directory herunterladen. Ich habe das getan und das Theme und mit der aktuellen WordPress-Version 3.4.2. laufen lassen. Hier mein erster Eindruck:

Das Layout: minimal und schlicht mit Überraschung

Das neue Layout ist minimal und schlicht. (Besonders wenn man die Seite nach einer frischen Installation anschaut. Gibt das Layout nichts her.) Das mag nicht jedem gefallen. Aber diese Schlichtheit hat den Vorteil, dass sich Design-Anpassungen leichter durchführen lassen. Bei diesem Layout muss man nicht viel „zurück bauen“.

Ich habe dazu folgendes ausprobiert: Auf meinem Blog – auf dem vorher ein angepasstes Twenty Eleven war – habe ich das Twenty Twelve aufgesetzt und im Child-Theme nach meinen Vorstellungen das Stylesheet und in die Templates angepasst:

Twenty Twelve-Umbau
image-375

Twenty Twelve-Umbau

  1. Dem Hauptnavigations-Menü habe ich das Button-Layout verpasst, welches schon im Stylesheet dabei war. Auch die Unter-Menüs haben das Button-Layout.
  2. Die Link-Farbe habe ich meinem Corporate Design angepasst.
  3. Im Header habe ich vor dem Blog-Titel und dem Claim mein Logo eingepflanzt.
  4. Und zu guter Letzt habe ich im Header, in der Artikel-Vorschau und in der Sidebar noch hier und da einige Abstände angepasst. Da war nach meinen Geschmack etwas zu viel „Lücke“

Der Umbau war schnell erledigt und ich habe mich dabei weitestgehend an die im Original-Stylesheet vorgegebenen Styles gehalten.

Sidebar: Eine für alle

Im neuen Theme wird die Sidebar auf allen Seiten beibehalten. Beim alten Theme war die Sidebar nur auf der Startseite zu sehen.

Responsive? Na klar!

Auch Twenty Twelve ist responsive. Es funktioniert sogar auf meinem ältesten Test-Gerät – einem Blackberry 8900 – sehr gut.

Twenty Twelve mit responsive Menü
image-376

Twenty Twelve mit responsive Menü

Die (Haupt-)Navigation wird bei kleinen Monitoren in einem platzsparenden Menü-Schaltknopf dargestellt. Wenn man auf diesen klickt, wird das eigentliche Menü angezeigt – als Liste jeder Menü-Punkt auf einer eigenen Zeile. Leider kann man dort nicht erkennen, auf welcher Ebene sich der Menü-Punkt befindet.

Natürlich würde diese Liste bei vielen Menü-Punkten sehr lang werden. Aber das ist nun mal die Krux bei kleinen Bildschirmen…

Browserkompatibilität: Jein

Die Browserkompatibilität habe ich nicht ausgiebig getestet. Es finden sich Hinweise im Netz, dass es Probleme in der Darstellung des Themes beim Internet Explorer in der Version 7 und 8 gibt. (Im IE9 soll es im Kompatibilitätsmodus ebenso sein.) Das Problem ist von WordPress auch schon als Bug klassifiziert. Bleibt abzuwarten, ob es einen Bugfix geben wird.

Man muss diese Besonderheit im Auge behalten und im Einzelfall entscheiden, ob man die Benutzer von alten IE auf der Seite haben möchte oder darauf verzichtet. Für dieses Blog habe ich mich entschieden, dass ich Twenty Twelve trotz der IE-Problemchen behalte.

PS: Mein Child-Theme habe ich übrigens mit Sass gepimpt. Damit kann man sich prima die lästige px-rem-Umrechnerei ersparen. ich werde in einem Folge-Artikel darauf eingehen….

This entry was posted on by .

Heiko Mamerow

Buddhist, Vater, Freund, Internetseitenbauer, Sportler, Musikliebhaber & Verkehrsteilnehmer ;-)

22 Gedanken zu „Twenty Twelve: Mein neues Child

  1. David Decker

    Sieht sehr gut aus, dein Child Theme! Durch die Menüleiste wirkt es sehr gut organisiert!

    Wir sehen uns in Berlin zum WP Camp glaub ich – freu mich drauf, dich kennenzulernen :)

    Antworten
    1. Heiko Mamerow Beitragsautor

      Hallo David,

      ich freue mich aufs Camp. Besonders darauf, „die Leute hinter den Websites“ mal persönlich kennenzulernen. Das wird ein großes Händeschütteln heute Abend. :-)

      Antworten
  2. quamdiu

    Hallo,

    ich bin beim recherchieren nach dem neuen WordPress-Theme Twenty Twelve auf Deine Seite gestoßen. Ich nutze das Theme jetzt auch. Ich bin ein rein privater Nutzer und kein IT’ler, scheue mich aber nicht auch im Code mal etwas zu ändern – wenn auch oft nur mit der „try and error“-Methode ;)
    Nun zu meiner Frage: Wie und wo baue den RSS-Feed mit dem Icon in die Sidebar so wie bei Dir ein? Kannst Du mir da eine kleine Hilfe geben?

    Antworten
  3. Martin

    Hi,
    könntest du einmal beschreiben, wie du das Logo neben den Text in der Kopfzeile hinbekommen hast. Also den CSS Code. Ich bekomm es leider so nicht hin. Danke

    Antworten
  4. Oliver F

    Deine Anpassungen gefallen mir, vielleicht beschreibst du sie etwas genauer und / oder stellst die Anpassung Online. Welches Plugin unterhalb des Textest (xing, twitter) benutzt du?

    Antworten
      1. Oliver Fricke

        Kein Problem, aber ich meinte den Plugin mit den Facebook/Google+/Xing Button, hab das Plugin noch nicht gesehen…

        Antworten
  5. Jürgen Wien

    Hallo Heiko,

    und wo genau hast Du dies gemacht? …1.Dem Hauptnavigations-Menü habe ich das Button-Layout verpasst, welches schon im Stylesheet dabei war.
    Vielen Dank für eine kurze Antwort, Jürgen

    Antworten
    1. Heiko Mamerow Beitragsautor

      Hallo Jürgen,

      alle Änderungen habe ich im Child-Theme erledigt. Das ist im Prinzip ein „Parallel-Ordner“ vom Haupt-Theme (Twenty Twelve), in dem die geänderten Dateien abgelegt werden. Hier gibt es alle Infos zu Child-Themes.

      Ich hoffe, das hilft Dir weiter. ;-)

      Antworten
      1. Jürgen Wien

        Danke Heiko, das mit dem Child-Theme habe ich schon verstanden, nur mir fehlt explizit die Stelle (Style.css??), wo ich das Menü farblich verändern könnte.

        Sorry, Jürgen

        Antworten
  6. Matthias

    Hallo,

    Darf ich auch noch etwas fragen?

    Und zwar gefällt mir dein Menü ;)
    Bishe rhab ich mich da nich nicht ran getraut, jetzt weiß ich wo ich den CSS Schnipsel bei dir finde. Den füge ich bei mir in die CSS Datei ein. Aber dann hört es auf :( Gibt es vielleicht einen kurzen Tipp wie ich dann weiter mache?

    Viele Dank im vorraus.

    Antworten
    1. Heiko Mamerow Beitragsautor

      Hallo Matthias,

      tut mir Leid für die späte Antwort. Ich war ein paar Wochen krank. Für den Menü-Umbau werde ich einen kleinen Beitrag schreiben. Dann kannst Du das übernehmen.

      Bis demnächst
      :-)

      Antworten
  7. Lisa Thiel

    Hallo Heiko!
    Kannst Du mir vielleicht weiterhelfen mit diesem „platzsparendem Menüschaltknopf“ am Smart-schirm. Den will ich da nämlich nicht haben – ich möchte eher, dass das eigentliche Menü sofort angezeigt wird – ohne diesen Menü-button – Ich wäre Dir sehr dankbar wenn Du mir verraten könntest wie man den wegbekommt und das richtige Menü standart – sofort angezeigt wird.
    Liebe Grüße

    Antworten
  8. Marga

    Hallo Heiko,
    hast du einen tipp wo ich die linkfarbe im text und in widgets ändern kann, ist ein bisschen zu grau bei mir.
    ich bin für jede anregung dankbar.

    Antworten
    1. Heiko Mamerow Beitragsautor

      Hallo Marga, sowas wird mit CSS festgelegt und man kann das in der entsprechenden Stylesheet-Datei anpassen. Allerdings sollte man sich da schon etwas mit CSS auskennen…. Klicke in der Administrationsleiste Deiner WordPress-Installation auf Design > Editor. Dort findest Du normalerweise den CSS-Code.

      Antworten
  9. Silke Thole

    Hallo Heiko.
    Ich hab jetzt schon ne Menge probiert, aber die Links zum vorherigen bzw. nächsten Post bleiben bei mir dunkelgrau. Wie hast Du ihre Farbei geändert?

    Viele Grüße, Silke

    Antworten
    1. Heiko Mamerow Beitragsautor

      Hallo Silke, die Schriftfarbe der Blätter-Navigation wird in meinem CSS ganz unspektakulär durch das a-Tag bestimmt: a {color: #b25e80;}. Schicke mir den Link der Seite, wo Du das Problem hast. Dann schau ich mir das mal an.

      Antworten

Schreibe einen Kommentar

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