Ari ist ein leichtes, mini­ma­lis­ti­sches Blog-Theme, das für die Ansicht auf unter­schied­li­chen Bildschirmgrößen sowie mobilen Geräten wie Tablet-PCs und Smartphones opti­miert ist. Die Hintergrund-, Text- und Link-Farben kannst du in den Theme-Optionen selbst anpassen, und auch das Einfügen eines eigenen Logos ist über die Theme-Optionen mög­lich. So musst du nicht mehr viele Einstellungen vor­nehmen, um schnell los bloggen zu können und deine Leser können deinen Blog auch bequem von unter­wegs auf ihrem Tablet-PC oder Smartphones lesen.

Das Ari Theme im Überblick

Dreispaltige Ansicht im Desktop-Browser, zwei­spaltig im iPad Hochformat und ein­spaltig auf dem iPhone oder anderen Smartphones.

Die Theme-Features

• mini­ma­lis­ti­sches Blog-Layout
• CSS3 Media Queries, vor­be­reitet für die Ansicht auf iPads, iPhones und anderen mobilen Geräten (das Layout wech­selt von einer Dreispaltigkeit, auf eine zwei- und ein­spal­tige Ansicht)
• Theme-Optionen im Adminbereich (indi­vi­du­elle Hintergrund-Farbe, Linkfarben und Textfarbe angeben und Bild als Logo einfügen)
• dunkle Version des Themes über die Theme-Optionen wählbar (beson­ders für Fotos geeignet)
• Social Links Sidebar-Widget mit Mini-Icons (RSS, Twitter, Facebook, Flickr, Xing, LinkedIn, Delicious)
• für Über­set­zung vor­be­reitet (der­zeit in Deutsch und Englisch übersetzt)
• ver­schach­telte Kommentare aktiviert
• vor­be­rei­tete CSS-Styles für das Contact Form 7 Kontaktformular-Plugin
• Verwendung der Droid Sans und Droid Serif Fonts der Google Font API

Lizenz-Hinweis: Das Theme ist unter der GPLv2-Lizenz (oder später) ver­öf­fent­licht. Weitere Infos fin­dest du auf der Webseite www.gnu.org.

1. Die Theme-Optionen

Bei Ari hast du die Möglichkeit deine eigenen Farben für den Blog-Hintergrund, die Link-Farben und die Textfarbe zu ver­wenden. Außerdem kannst du auch ein Bild für dein Blog-Logo ver­wenden. Diese Theme-Optionen kannst du bequem auf einer extra ein­ge­rich­teten Theme-Optionen Seiten (unter Design / Theme-Optionen im WordPress-Admin) eintragen.

Dunkle Theme-Version

Über die Theme-Optionen kannst du auch eine dunkle Theme-Variante von Ari aus­wählen. Dazu wählst du ein­fach das Häkchen bei »Zur dunklen Version des Themes wech­seln« an und bestä­tigst deine Eingabe. Die Link- und Text-Farben kannst du natür­lich wei­terhin anpassen.

Das Ari Theme hier in der dunklen 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.

Individuelle Farben

Für die Farben kannst du einen HEX-Wert ein­tragen. Dabei soll­test du darauf achten, immer Symbol # zusammen mit deinem Farbwert anzu­geben (z.B. #88C34B). Alternativ kannst du auch Farbnamen wie blue, red oder black eintragen.

Ein Bild als Logo verwenden

Falls du lieber ein Bild (im .jpg oder .png Format) als Logo ver­wenden möch­test, kannst du dieses eben­falls über die Theme-Optionsseite ein­fügen. Dein Logo sollte maximal eine Größe von 240 x 75 Pixel haben. Nachdem du dein Logo vor­be­reitet hast, kannst du es über die Mediathek (siehe Link in den Theme-Optionen) hoch­laden. Dabei kopierst du dir die ange­ge­bene URL des Logo-Bildes und fügst diese anschlie­ßend ein­fach in der Theme-Optionsseite ein.

Nachdem du die neuen Einstellungen gespei­chert hast, wird dein Logo angezeigt.

2. Sidebar-Widgets

Ari hat im drei­spal­tigen Webseiten-Layout eine fixe, linke Sidebar von 240 Pixel Breite (Primary Sidebar), sowie eine zweite rechte Sidebar (Secondary Sidebar). Beide Sidebars sind für Widgets vor­be­reitet (unter Design / Widgets im WordPress Admin-Bereich). So kannst du dir deinen Blog ganz leicht indi­vi­duell einrichten.

In der schma­leren Screen-Ansicht (z.B. auf einem iPad im Hochformat) rutscht die rechte Sidebar unter­halb des Hauptinhalts. Das Layout wech­selt also in eine Zweispaltigkeit.

In der ein­spal­tigen Ansicht für Smartphones ordnet sich die fixe, linke Sidebar ganz oben im Layout an, dar­unter folgt der Hauptinhalt und dann wieder die Inhalte der zweiten (ursprüng­lich rechten) Sidebar. Die linke Sidebar eignet sich daher beson­ders, um einen kleinen About-Text oder deine Seiten-Navigation anzuzeigen.

Über mich Text-Widget

Um einen About-Text in deiner Sidebar anzu­zeigen, kannst du ein ein­fa­ches Text-Widget nutzen. Falls du ein Profilbild von dir ein­fügen möch­test, kannst du diesem z.B. eine Größe von 75×85 Pixel geben, und es in den Image-Ordner von Ari ein­fügen. Unter Widgets im WordPress Adminbereich fügst du dann deinen About-Text, sowie einen img-tag mit Link zu deinem Profilbild ein. Du kannst außerdem noch einen Link im Text setzen.

Der Code für dein About Text-Widget siehst dann z.B. so aus:

<img src="http://deinedomain.de/wp-content/themes/ari/images/deinbild.jpg" alt="Ellen" title="Ellen" width="75" class="alignleft" /> Hier im Über mich-Text-Widget kannst du einen kleinen Intro-Text von dir eintragen und auch einen Link, z.B. auf deine <a href="http://mein-portfolio.de/">Portfolio-Webseite</a> einfügen.

Social-Links Widget

Um auf deinem Blog auch auf deine wei­teren Profile im Netz, sowie auf den RSS-Feed deines Blogs hin­zu­weisen, haben wir ein indi­vi­du­elles Social-Links Widget für Ari vorbereitet.

Um das prak­ti­sche Sidebar-Widget zu nutzen, fügst du im Widget-Bereich ein­fach das Widget Ari Social Links in eine der Sidebars ein. Hier kannst du einen Titel für dein Widget, sowie indi­vi­du­elle Texte und deine URLs für RSS, Twitter, Facebook, Flick, Xing, LinkedIn und Delicious eintragen.

Das Widget zeigt dann auto­ma­tisch deine Links mit den kleinen Mini-Social Icons an.

Individuellen Menü-Widget für die Seiten-Navigation

Um die Seiten deines Blogs anzu­zeigen, ist das Ari-Theme für die Verwendung von indi­vi­du­ellen Menüs vor­be­reitet. Dein Seiten-Menü erstellt du im Adminbereich unter Design / Menüs. Unterseiten kannst du fest­legen, indem du das Element ein­fach per Drag’n’Drop leicht nach rechts verschiebst.

Anschließend nutzt du das indi­vi­du­elle Menü-Widget in den Widget-Optionen, um deine Seiten-Navigation anzu­zeigen. Du kannst im indi­vi­du­ellen Menü-Widget den Namen deines Menüs aus­wählen und einen Titel für das Widget bestimmen.

Neben diesen Widgets kannst du natür­lich auch noch jede Menge wei­tere Standard-Widgets, z.B. Suchen, Blogroll, letzte Artikel oder letzte Kommentare für deinen Blog ver­wenden. Alle Widgets funk­tio­nieren sowohl in der linken, als auch in der rechten Sidebar.

3. Text, Bilder und Videos

In deinem Blog kannst du jede Menge Layout-Styes für deine Texte ver­wenden. Du kannst z.B. Über­schriften in h1 bis h6 nutzen, Zitate mit Hilfe des blockquote-tags ein­fügen, Code mit dem pre-tag ein­tragen sowie Tabellen und Listen (unor­dered mit dem ul-tag und ordered mit dem ol-tag) ein­fügen.

Eine Über­sicht über die wich­tigsten Elemente zum Styling deiner Blog-Texte kannst du dir in der Live-Ansicht von Ari anschauen.

Neben Text-Elementen kannst du natür­lich auch Bilder mit und ohne Bildunterschriften ver­wenden oder Videos z.B. von YouTube oder Vimeo einbetten.

Damit deine Bilder in den ver­schie­denen Layout-Ansichten des Themes fle­xibel ska­liert werden können, sollte die Größe der Bilder min­des­tens eine Breite von 650 Pixel haben.

Eingebettete Videos werden eben­falls auto­ma­tisch im Layout ska­liert. Eine Beispiel-Ansicht von Bildern und Videos in Ari fin­dest du eben­falls in der Live-Demo.

4. Ein Autorenfeld verwenden

Um ein Autorenfeld unter jedem Blog-Artikel ein­zu­fügen, musst du ledig­lich einen Autoren Info-Text unter Benutzer / Über dich / Biografische Angaben eintragen.

5. Verschachtelte Kommentare

Das Ari-Theme ist für ver­schach­telte Kommentare vor­be­reitet. Eventuell musst du diese in deinem Adminbereich noch unter Einstellungen / Diskussion aktivieren.

6. Formulare mit dem Contact 7-Plugin

Um ein Kontaktformular in deinem Blog zu ver­wenden, kannst du dir das WordPress-Pugin Contact 7 instal­lieren. Für dieses Plugin haben wir die CSS-Stlyes bereits an das Theme-Layout angepasst.

Ein Beispiel-Formular kannst du dir auch auf der Ari Live-Demo Webseite anschauen.

7. Die jQuery Thickbox für Fotos nutzen

Um deine Fotos auf Seiten und in Artikeln in einer grö­ßeren Ansicht anzeigen zu können, kannst du das jQuery-Thickbox Plugin nutzen. Der benö­tigte Code für das Plugin ist prak­ti­scher­weise schon stan­dard­mäßig bei WordPress mit­ge­lie­fert. Um diesen Code auch für das Ari Theme zu nutzen, kannst du dir das Plugin »Auto Thickbox« installieren.

Mit dem Thickbox-Plugin kannst du deine Bilder auch in einer großen Ansicht zeigen.

8. Ein eigenes Favicon einfügen

Du kannst dein eigenes Favicon nutzen, indem du ein 16x16px großes Favicon-Bild im JPG-Format vor­be­reitet, und dieses dann mit Hilfe eines Favicon-Generators (z.B. favicon-generator.org) in das benö­tigte .ico Format umwandelst.

Anschließend spei­cherst du dein .ico Favicon unter dem Namen favicon.ico in den Image-Ordner des Ari-Themes ab.

9. Theme-Übersetzung

Ari ist für die Theme-Übersetzung vor­be­reitet. Derzeit ist das Theme in Englisch und Deutsch über­setzt. Die Sprache deiner WordPress-Installation wird auto­ma­tisch auch im Theme übernommen.

Falls du Ari in einer wei­teren Sprache ver­wenden möch­test, kannst du das Theme am ein­fachsten mit Hilfe des Codestyling Localization-Plugins über­setzten (hier fin­dest du eine Anleitung zur Theme-Übersetzung).

Wir hoffen dir gefällt unser kleines Ari Blog-Theme. Wenn du Fragen zum Theme hast, einen Fehler ent­deckst oder dir Optimierungsvorschläge ein­fallen, schreibe uns doch ein­fach eine einen Kommentar oder eine Mail an kontakt(at)elmstudio(punkt)de.

Über dein Feedback, deine Tipps und Vorschläge zum Theme freuen wir uns sehr!

Ari is a free WordPress theme with a clean, mini­ma­listic design. The theme has a responsive layout that is opti­mized for dif­fe­rent browser sizes and mobile devices (tablet pcs or modern smart­phones). Ari is a simple to use, fle­xible blog theme best suited for small blogs or per­sonal blog­ging. You can easily change the back­ground, text and link colors in the theme option page. In the theme options you can also change the logo by using your own logo image. With Ari you can start blog­ging wit­hout having to set up a lot of things and your rea­ders can enjoy rea­ding your blog posts from their tablets pc or smartphone.

Ari Theme Overview

Three-column layout in desktop brow­sers, two-columns in the iPads por­trait mode and a one-column layout for iPhones and other smartphones.

The Theme Features

• Clean and mini­ma­listic blog layout.
• Responsive layout with CSS3 Media Queries, opti­mized for dif­fe­rent browser sizes and mobile devices such as iPads, iPhones, Android phones etc.
• Custom theme option page to easily change the back­ground, text and link colours and choose your own logo image.
• Dark theme ver­sion (you can switch from the default light design to a dark ver­sion in the themes option page).
• Custom social links sidebar widget with mini icons (so you can link to your rss feed, Twitter, Facebook, Flickr, Delicious, Xing or LinkedIn page).
• Ready for theme trans­la­tion (right now there is and English and German trans­la­tion available).
• Threaded com­ments are supported.
• CSS-Styles for the Contact form 7 word­press plugin.
• Use of Google Free Fonts Droid Serif and Droid Sans from the Google Font API.

Theme License:

Ari is released released under the license GPLv2 (or later) (jsut like WordPress). You can finde more infor­ma­tion about the license at the www.gnu.org website.

1. The Theme Option Page

Ari’s custom theme option page gives you the oppor­tu­nity to choose your own colors for the theme back­ground, the text and the links. You can also use your own logo image instead of the default Logo text.

You can find the theme option page in your WordPress admin area under Apperance / Theme Options.

Dark theme version

In the theme options page you can also choose the dark design ver­sion of Ari. To do so just check the box »Ari dark theme ver­sion« at the top of the page. With the dark theme ver­sion you can still change the link and text colors.

Ari in the dark theme version.

To see a live demo of Ari’s dark theme ver­sion just go to www.ari.elmastudio.de and choose Ari Dark in the right sidebar under »Theme Test«.

Custom colors

To set your indi­vi­duell text, back­ground and link colors can pick a hex-value like #4C4C4C. Its important that you include the # with the number. Alternatively you can just type a color name like red or blue.

Choose an image as your blog logo

If you rather want to use a logo image instead of the default text logo you can upload your own logo image to the WordPress media library. The image size should be max. 240×75 Pixel. After you uploaded your image to the library just copy the URL of the image and include it in the theme options page under »Logo image URL«. Don’t forget to save your theme option settings.

2. Sidebar Widgets

Ari has a 3-column layout with a fixed left sidebar and a scrollable right sidebar. The left sidebar (its called Primary Sidebar) has a fixed width of 240px. The right sidebar (Secondary Sidebar) has a fle­xible width with a default width of 150px in the stan­dard browser size. Both side­bars are widget ready (you can choose your wid­gets under Appearance / Widgets). With the WordPress widget option you can change your blog con­tent very easily.

Because the left sidebar does not scroll with the con­tent you have to be careful not to include too many wid­gets, other­wise the con­tent can not be seen on smaller, not so high screens. Therefore the left sidebar is best suited for a short about or intro text and maybe the page navigation.

Because the Ari theme has a fle­xible layout the right sidebar swit­ches to the bottom of the page when the screen is not wide enough to show all the con­tent (like on tablet pcs or small travel laptop screens).

Is the screen even smaller, like on a smart­phone, the layout changes to a one-column layout with the main con­tent under the pri­mary sidebar and the con­tent of the right (secon­dary) sidebar at the bottom of the web page.

About Text-Widget

To show an »about me« text in your sidebar you can just use a stan­dard WordPress text widget. If you want to include an image in your widget you can pre­pare an image for instance with the size 75x85px and upload it to the Ari theme folder »images«. In your text widget you can then include your image using and HTML image-tag. Additionally you can include a link in your text using an anchor-tag.

So the code you can include in your text widget could look like this:

<img src="http://yourdomain.com/wp-content/themes/ari/images/yourimage.jpg" alt="your name"  width="75" class="alignleft" />  <a href="http://mein-portfolio.de/">Read more...</a>.

Social Links Widget

To link from one of the side­bars to your social net­work sites you can use the Ari Social Links widget. With the widget you can easily include links to your face­book, twitter, flickr, Xing, Linkedin or deli­cious page and to your rss feed.

To use the widget just drag’n’drop the »Ari Social Links« widget in one of your side­bars and include your links and link texts. If you don’t want to use all the links just leave them blank.

After you saved your set­tings you will see the wid­gets with links and mini icons in your sidebar.

Custom menu widget for the page navigation

To show a navi­ga­tion to your WordPress pages you can use the custom menu option (Appearance / Menu) to set up an indi­vi­duell menu. You can easily drag’n’drop your pages around and change their order. To mark sub pages just drag them a little bit to the right side.

After set­ting up your custom menu you can add the menu to one of your two side­bars via the Custom menu widget. Just choose the name of your menu and save your widget.

3. Text, Images and Videos

In your theme you can use many dif­fe­rent text styles such as h1 to h6 tags for hea­dings. For quotes you can add the blockquote-tag (b-quote), you can wrap code snip­pets in a pre-tag or use lists (ul and ol) and tables.

Have a look at all the dif­fe­rent text style options in the Ari theme demo.

To add full­size images to the arti­cles and pages crop them to at least 650 Pixel width. Otherwise they will not be 100% sharp in the responsive layouts.

Embedded videos will be auto­ma­ti­cally scaled to fix the arti­cles width. You can see a demo of YouTube and Vimeo videos at the Ari demo web­site.

4. Show an author info at the end of each post

To show a short author infor­ma­tion text and the aut­hors gra­vatar image at the end of each single post page just fill out the Biographical info text in the users profile.

5. Threaded comments

Ari sup­ports WordPress thre­aded com­ments. If the reply but­tons after each com­ment don’t show up auto­ma­ti­cally you may have to activate the thre­aded com­ments option in your Settings under Discussion / Enable thre­aded (nested) com­ments.

6. Use forms with the Contact Form 7 WordPress plugin

We pre­pared sty­ings for the »Contact Form 7″ WordPress plugin. So if you want to add a form to your blog just install the plugin and the styles will fit to the Ari blog layout. To see a demo of a con­tact form have a look at the Ari live theme.

7. Use a jQuery Thickbox for images

To show pic­tures or a pic­ture gal­lery in posts and pages you can add a jQuery thickbox to your blog. The jQuery code is already included in WordPress so you just need to install the WordPress plugin »Auto thickbox« to enable the thickbox fae­ture for your pictures.

You can use the Auto thickbox plugin to show your images in a simple and clean jQuery thickbox.

8. Use your own favicon

To use your own favicon just choose an 16x16px jpg or png image and gene­rate an .ico image with any online favicon gene­rator (e.g. www.favicon-generator.org).

Then you name your .ico image favicon.ico and add the favicon to the Ari image folder.

9. Theme translation

Ari is set up for theme trans­la­tions. Right now there is the default English and a German theme trans­la­tion avail­able. The lan­guage of your WordPress instal­la­tion will be auto­ma­ti­cally your theme language.

If you want to trans­late Ari into your lan­guage you can install the WordPress plugin »Codestyling Localisation«. At the plugins home­page you can find a detailed instuc­tion on how to use the plugin.

Of couse we would be thrilled if you would make your theme trans­la­tion also avail­able to use for other Ari users as well. Please con­tact me if you want to share your Ari lan­guage file (kontakt(at)elmastudio(dot)de).

If you have any ques­tions, sug­ges­tions or feed­back about the Ari theme please leave a com­ment below. We are happy to hear from you!