Ari WordPress-Theme Update: Jetzt mit dunkler Theme-Version

Gestern haben wir uns an die Arbeit gemacht und eine dunkle Theme-Variante für unser Ari Free-Theme gestaltet. Der dunkle Hintergrund mit heller Schrift eignet sich besonders gut, wenn du viele Fotos auf deinem Blog zeigen möchtest. Um die dunkle Version von Ari zu nutzen, kannst du diese ganz einfach über die Theme Optionsseite auswählen. Und damit auch die Ansicht von Fotos in größerem Format möglich wird, habe ich das Theme auch gleich noch für das jQuery Thickbox-Plugin vorbereitet. Hier die Updates im Überblick.

1. Ari in dunkler Theme-Variante

Ganz besonders, wenn du auf deinem Blog viele Fotos zeigen möchtest, kann ein Theme mit dunklem Hintergrund besser geeignet sein. So kommt der Kontrast zwischen Fotos und Hintergrund besser heraus. Daher haben wir heute eine dunkle Version des Ari-Themes in die Theme-Optionen (diese kannst du nach der Aktivierung des Themes im WordPress-Admin unter Design aufrufen) integriert.

Live-Demo von Ari Dark-Version

Eine Live-Demo der dunklen Theme-Option kannst du dir ansehen, indem du auf Theme Testseite ari.elmastudio.de in der rechten Sidebar ganz oben unter „Theme testen“ die Ari Dark-Version auswählst.

Die einzelnen Layout-Ansichten

Ari WordPress Theme Updates

Ari WordPress Theme Updates
Das dunkle Theme in der Ansicht Hochformat-iPad.

Ari WordPress Theme Updates
Ari mit dunklem Hintergrund in der iPhone-Version.

Die dunkle Theme-Version nutzen

Um die dunkle Version von Ari zu verwenden, musst du lediglich das Häkchen unter „Zur dunklen Version des Themes wechseln“ anwählen und diese Einstellung speichern.

Ari WordPress Theme Updates

Die Farben von Standard-Text und Links kannst du natürlich weiterhin individuell anpassen (siehe die Farben des Themes ändern in den Theme-Optionen). Umgesetzt ist die Option übrigens so, dass ein zusätzliches Stylesheet (dark.css im Ordner css des Ari Theme-Ordners) über den head-tag des Themes aufgerufen wird, sobald die Theme-Option gespeichert wurde. In diesem Extra-Stylesheet findest du die Styles der neuen, dunklen Farben.

2. Update des Social Links Widgets

Neben der Integration des dunklen Stylesheets haben wir auch das Social Links Widget von Ari noch einmal überarbeitet. Der benötigte Code für das Widgets wurde an die WordPress Widget API angepasst.
Vielen Dank an dieser Stelle für den Hinweis von Michael und seine hilfreiche Beschreibung „Build a WordPress 2.8 Widget with the New Widget API“ auf wpengineer.com.

Zusätzlich zum überarbeiteten Code haben wir auch gleich die Option eingefügt, den Text für die Links individuell ins Widget einzutragen. Bisher wurden die Texte (Twitter, Facebook etc.) automatisch eingefügt.

Ari WordPress Theme Updates
Jetzt kannst du deine Link-Texte im Widget selbst bestimmen.

3. Bildervorschau mit Hilfe der jQuery Thickbox

Um Fotos auch in einer größeren Ansicht zu präsentieren kannst du jetzt die jQuery Thickbox in Ari nutzen.

Ari WordPress Theme Updates
Die Ansicht großer Bilder in Ari mit Hilfe des Thickbox-Plugin.

Praktisch bei der Verwendung der Thickbox ist, dass der Code bereits standardmäßig bei WordPress mitgeliefert wird (da die Thickbox auch schon im Admin-Bereich von WordPress zum Einsatz kommt).

Um die Thickbox jetzt auch im Theme selbst nutzen zu können, kannst du einfach noch das Auto Thickbox-Plugin installieren. Dieses Plugin aktiviert die Thickbox dann auch für das Theme.

Zusätzlich haben wir noch ein paar individuelle CSS-Styles in das Stylesheet von Ari integriert. Diese findest du in der style.css Datei im Ari Theme-Ordner ab Zeile 677. Wenn du möchtest, kannst du dir so die Optik des Thickbox-Rahmens auch noch individuell anpassen.

Änderungen ab jetzt im Changelog mitverfolgen

Um alle vergangenen und zukünftigen Updates von Ari mitverfolgen zu können, haben wir übrigens auch noch ein Changelog Änderungsprotokoll in die Theme-Dokumentation, sowie in den Ari-Theme Ordner selbst eingefügt.

Und was ist noch geplant?

Als nächstes werden wir uns an die Gestaltung und Umsetzung einer Fotogalerie für Ari machen. Diese wird sich dann natürlich auch an die Ansicht auf kleinen Browsern, Tablet PCs und Smartphones anpassen.

Die aktuelle Ari Theme-Version herunterladen

Den Download fürs Ari-Theme in der aktuellen Version, sowie eine detailierte Theme-Dokumentation findest du im Artikel „Ari: Ein kleines, minimalistisches WordPress Free-Theme vorbereitet für mobile Geräte“.

Wenn du weitere Verbesserungsvorschläge oder Wünsche für das Ari Theme hast, schreibe uns diese doch am besten im Kommentar oder über unser Kontaktformular. Wir freuen uns auf deine Nachricht!

9 Kommentare

    • Hallo Caspar,

      danke für dein Feedback zur Dark-Edition von Ari, freut uns, dass dir die Version auch gefällt :-)

      Ja, ich denke auch, dass die dunkle Version besonders gut für Fotos geeignet ist. Als nächstes möchten wir uns dann auch noch an die Umsetzung einer schönen Bilder-Galerie Lösung für Ari machen.

      Viele Grüße,
      Ellen

  1. Hallo Ellen,

    ich teste gerade Euer Theme – finde es sehr schön, da sehr schlicht. Hätte noch 2 Fragen: Ich habe es auf einem nicht sehr aktiven Blog gerade aktiviert, habe aber das Problem, dass die linke Sidebar nicht gescrollt wird. Mein Blog hat einige Artikel mit more-tag auf der Starteite – der Mittelteil wird ganz normal nach unten gescrollt, aber die linke Leiste bleibt unverändert auf Bildschirmhöhe, so dass der Text, der da noch drin ist, nicht gelesen werden kann…

    Außerdem wäre mein Blog-Titel lieber länger als die möglichen Zeichen – dann wird er aber leider zweizeilig und rutscht dadurch nach unten und das erste Widget der Sidebar links „klebt“ an der Subhead.

    Frage 1 ist mir irgendwie unerklärlich – hast Du eine Idee? ;-) Frage 2: Könnte man die Überschrift auch länger machen und dennoch einzeilig? Wäre super, wenn Du helfen könntest, wenn es nicht viel Mühe macht (ich kann das schwer einschätzen leider). Schon mal danke!

    Schöne Grüße, Dorothee

    • Hallo Dorothee,

      vielen Dank für dein Feedback zu Ari. Ja, wie Dennis auch schon geschrieben hat, ist das „Stehenbleiben“ der linken Sidebar im Theme so vorgesehen.

      Da Ari quasi als „Mini Blog-Theme“ gedacht ist, haben wir auf eine Navigation im Header verzichtet. So kannst du (wie in der Theme-Demo) z.B. eine kurze Info oder die Seiten-Navigation über Widgets in die linke Sidebar einstellen. Damit man immer schnell zurück auf die Startseite, bzw. auf eine andere Unterseite gelangt, lassen wir die linke Sidebar immer stehen. Auf Grund von Bildschirm-Höhen solltest du also nicht mehr als ein oder zwei Sidebar-Elemente in der linke Sidebar einfügen.

      Wie Dennis ja schon empfohlen hat, kannst du die CSS-Eigenschaft position: fixed der sidebar-primary löschen. Allerdings habe ich die Variante bisher nicht selbst getestet.

      Zum Webseiten-Titel:
      Auf Grund der fixen Sidebar stehen standardmäßig leider nur die 240 Pixel Breite für das Logo zur Verfügung. Um den Blog-Titel in einer Zeile zu belassen, kannst du die Schriftgröße anpassen (bei #sidebar-primary .logo h1 in style.css).

      Ich hoffe diese Tipps helfen dir weiter :-)

      Viele Grüße,
      Ellen

      • Hallo Ellen, danke für die Infos. Das hilft mir nochmals gut weiter. Die Idee der fixen Sidebar ist letztlich charmant, weil der Blog übersichtlich bleibt.

        Ich hatte – noch aus dem alten Theme – einen recht langen Willkommenstext in der Sidebar, der dann auf einmal abgeschnitten war, und ich konnte mir nicht erklären, warum das sinnvoll sein sollte ;-). Jetzt werde ich erstmal überlegen, was in welcher Sidebar gut aufgehoben ist – und erst danach, ob ich das mit dem Sidebar-Scrollen austeste. Schade mit der Logo-Breite – da würde ich persönlich dem Blogtitel etwas mehr Breite/Aufmerksamkeit für Erstleser z.B. gewidmet haben. Optisch natürlich schön. Mal sehen, ich teste noch etwas hin und her.

        Schönen Abend!

  2. Hallo Ellen,

    sehr schick euer Theme :)
    Gefällt mir in dunkel sogar noch besser als in hell. Kann man super so wie es ist verwenden oder als Grundlage für ein eigenes benutzen – wirklich schön :)

    @Dorothee: Ich erlaube mir einfach mal auf Frage1 zu antworten :p So wie ich das sehe ist das „stehenbleiben“ der linken Sidebar Absicht – denn das div in dem die Sidebar eingeschlossen ist hat die Eigenschaft „fixed“. Wenn dir das nicht gefällt öffne mal die style.css und suche den Block „#sidebar-primary“. In dem Block gibt es die Zeile „position: fixed;“. Die einfach löschen und deine Sidebar sollte mitscrollen.

    • Hallo Dennis,

      es freut mich sehr, dass dir das Ari-Theme so gut gefällt. Ja, wir haben bei der Entwicklung extra Wert darauf gelegt, dass die Grundlage sauber gestaltet ist, aber dennoch genug Platz für eine individuelle Anpassung bleibt :-)

      Viele Grüße,
      Ellen

    • Hallo Dennis,

      schon mal herzlichsten Dank! Ich glaube, ich muss doch mal einen Kurs „CSS für Quereinsteiger“ belegen – es würde einiges vereinfachen ;-)!

      Werde es direkt testen bzw. mit diesem Wissen die Sidebar-Belegung erstmal überdenken…

      Schöne Grüße!

Hinterlasse eine Antwort

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