Deutsche Theme Dokumentation

English Version

Ari ist ein leichtes, minimalistisches Blog-Theme, das für die Ansicht auf unterschiedlichen Bildschirmgrößen sowie mobilen Geräten wie Tablet-PCs und Smartphones optimiert 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öglich. So musst du nicht mehr viele Einstellungen vornehmen, um schnell los bloggen zu können und deine Leser können deinen Blog auch bequem von unterwegs auf ihrem Tablet-PC oder Smartphones lesen.

Das Ari Theme im Überblick

Ari WordPress-Theme

Ari WordPress-Theme

Ari WordPress-Theme

Dreispaltige Ansicht im Desktop-Browser, zweispaltig im iPad Hochformat und einspaltig auf dem iPhone oder anderen Smartphones.

Die Theme-Features
  • minimalistisches Blog-Layout
  • CSS3 Media Queries, vorbereitet für die Ansicht auf iPads, iPhones und anderen mobilen Geräten (das Layout wechselt von einer Dreispaltigkeit, auf eine zwei- und einspaltige Ansicht)
  • Theme-Optionen im Adminbereich (individuelle Hintergrund-Farbe, Linkfarben und Textfarbe angeben und Bild als Logo einfügen)
  • dunkle Version des Themes über die Theme-Optionen wählbar (besonders für Fotos geeignet)
  • Social Links Sidebar-Widget mit Mini-Icons (RSS, Twitter, Facebook, Flickr, Xing, LinkedIn, Delicious)
  • für Übersetzung vorbereitet (derzeit in Deutsch und Englisch übersetzt)
  • verschachtelte Kommentare aktiviert
  • vorbereitete CSS-Styles für das Contact Form 7 Kontaktformular-Plugin
  • Verwendung der Droid Sans und Droid Serif Google Fonts

Lizenz-Hinweis: Das Theme ist unter der GPLv2-Lizenz (oder später) veröffentlicht. Weitere Infos findest 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 verwenden. Außerdem kannst du auch ein Bild für dein Blog-Logo verwenden. Diese Theme-Optionen kannst du bequem auf einer extra eingerichteten Theme-Optionen Seiten (unter Design / Theme-Optionen im WordPress-Admin) eintragen.

Ari WordPress-Theme

Dunkle Theme-Version

Über die Theme-Optionen kannst du auch eine dunkle Theme-Variante von Ari auswählen. Dazu wählst du einfach das Häkchen bei “Zur dunklen Version des Themes wechseln” an und bestätigst deine Eingabe. Die Link- und Text-Farben kannst du natürlich weiterhin anpassen.

Ari WordPress-Theme
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 eintragen. Dabei solltest du darauf achten, immer Symbol # zusammen mit deinem Farbwert anzugeben (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 verwenden möchtest, kannst du dieses ebenfalls über die Theme-Optionsseite einfügen. Dein Logo sollte maximal eine Größe von 240 x 75 Pixel haben. Nachdem du dein Logo vorbereitet hast, kannst du es über die Mediathek (siehe Link in den Theme-Optionen) hochladen. Dabei kopierst du dir die angegebene URL des Logo-Bildes und fügst diese anschließend einfach in der Theme-Optionsseite ein.

Ari WordPress-Theme

Nachdem du die neuen Einstellungen gespeichert hast, wird dein Logo angezeigt.

2. Sidebar-Widgets

Ari hat im dreispaltigen 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 vorbereitet (unter Design / Widgets im WordPress Admin-Bereich). So kannst du dir deinen Blog ganz leicht individuell einrichten.

In der schmaleren Screen-Ansicht (z.B. auf einem iPad im Hochformat) rutscht die rechte Sidebar unterhalb des Hauptinhalts. Das Layout wechselt also in eine Zweispaltigkeit.

In der einspaltigen Ansicht für Smartphones ordnet sich die fixe, linke Sidebar ganz oben im Layout an, darunter folgt der Hauptinhalt und dann wieder die Inhalte der zweiten (ursprünglich rechten) Sidebar. Die linke Sidebar eignet sich daher besonders, um einen kleinen About-Text oder deine Seiten-Navigation anzuzeigen.

Über mich Text-Widget

Um einen About-Text in deiner Sidebar anzuzeigen, kannst du ein einfaches Text-Widget nutzen. Falls du ein Profilbild von dir einfügen möchtest, kannst du diesem z.B. eine Größe von 75×85 Pixel geben, und es in den Image-Ordner von Ari einfü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.

Ari WordPress-Theme

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

[php]
<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.
[/php]
Social-Links Widget

Um auf deinem Blog auch auf deine weiteren Profile im Netz, sowie auf den RSS-Feed deines Blogs hinzuweisen, haben wir ein individuelles Social-Links Widget für Ari vorbereitet.

Ari WordPress-Theme

Um das praktische Sidebar-Widget zu nutzen, fügst du im Widget-Bereich einfach das Widget Ari Social Links in eine der Sidebars ein. Hier kannst du einen Titel für dein Widget, sowie individuelle Texte und deine URLs für RSS, Twitter, Facebook, Flick, Xing, LinkedIn und Delicious eintragen.

Ari WordPress-Theme

Das Widget zeigt dann automatisch deine Links mit den kleinen Mini-Social Icons an.

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

Um die Seiten deines Blogs anzuzeigen, ist das Ari-Theme für die Verwendung von individuellen Menüs vorbereitet. Dein Seiten-Menü erstellt du im Adminbereich unter Design / Menüs. Unterseiten kannst du festlegen, indem du das Element einfach per Drag’n’Drop leicht nach rechts verschiebst.

Ari WordPress-Theme

Anschließend nutzt du das individuelle Menü-Widget in den Widget-Optionen, um deine Seiten-Navigation anzuzeigen. Du kannst im individuellen Menü-Widget den Namen deines Menüs auswählen und einen Titel für das Widget bestimmen.

Ari WordPress-Theme

Neben diesen Widgets kannst du natürlich auch noch jede Menge weitere Standard-Widgets, z.B. Suchen, Blogroll, letzte Artikel oder letzte Kommentare für deinen Blog verwenden. Alle Widgets funktionieren 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 verwenden. Du kannst z.B. Überschriften in h1 bis h6 nutzen, Zitate mit Hilfe des blockquote-tags einfügen, Code mit dem pre-tag eintragen sowie Tabellen und Listen (unordered mit dem ul-tag und ordered mit dem ol-tag) einfügen.

Eine Übersicht über die wichtigsten Elemente zum Styling deiner Blog-Texte kannst du dir in der Live-Ansicht von Ari anschauen.

Neben Text-Elementen kannst du natürlich auch Bilder mit und ohne Bildunterschriften verwenden oder Videos z.B. von YouTube oder Vimeo einbetten.

Damit deine Bilder in den verschiedenen Layout-Ansichten des Themes flexibel skaliert werden können, sollte die Größe der Bilder mindestens eine Breite von 650 Pixel haben.

Eingebettete Videos werden ebenfalls automatisch im Layout skaliert. Eine Beispiel-Ansicht von Bildern und Videos in Ari findest du ebenfalls in der Live-Demo.

4. Ein Autorenfeld verwenden

Um ein Autorenfeld unter jedem Blog-Artikel einzufügen, musst du lediglich einen Autoren Info-Text unter Benutzer / Über dich / Biografische Angaben eintragen.

Ari WordPress-Theme

5. Verschachtelte Kommentare

Das Ari-Theme ist für verschachtelte Kommentare vorbereitet. Eventuell musst du diese in deinem Adminbereich noch unter Einstellungen / Diskussion aktivieren.

Ari WordPress-Theme

6. Formulare mit dem Contact 7-Plugin

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

Ari WordPress-Theme

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 praktischerweise schon standardmäßig bei WordPress mitgeliefert. Um diesen Code auch für das Ari Theme zu nutzen, kannst du dir das Plugin “Auto Thickbox” installieren.

Ari WordPress-Theme
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 vorbereitet, und dieses dann mit Hilfe eines Favicon-Generators (z.B. favicon-generator.org) in das benötigte .ico Format umwandelst.

Anschließend speicherst 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 vorbereitet. Derzeit ist das Theme in Englisch und Deutsch übersetzt. Die Sprache deiner WordPress-Installation wird automatisch auch im Theme übernommen.

Falls du Ari in einer weiteren Sprache verwenden möchtest, kannst du das Theme am einfachsten mit Hilfe des Codestyling Localization-Plugins übersetzten (hier findest du eine Anleitung zur Theme-Übersetzung).

Wir hoffen dir gefällt unser kleines Ari Blog-Theme. Wenn du Fragen zum Theme hast, einen Fehler entdeckst oder dir Optimierungsvorschläge einfallen, schreibe uns doch einfach 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!

English Theme Documentation

Deutsche Version

Ari is a free WordPress theme with a clean, minimalistic design. The theme has a responsive layout that is optimized for different browser sizes and mobile devices (tablet pcs or modern smartphones). Ari is a simple to use, flexible blog theme best suited for small blogs or personal blogging. You can easily change the background, 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 blogging without having to set up a lot of things and your readers can enjoy reading your blog posts from their tablets pc or smartphone.

Ari Theme Overview

Ari WordPress-Theme

Ari WordPress-Theme

Ari WordPress-Theme

Three-column layout in desktop browsers, two-columns in the iPads portrait mode and a one-column layout for iPhones and other smartphones.

The Theme Features
  • Clean and minimalistic blog layout.
  • Responsive layout with CSS3 Media Queries, optimized for different browser sizes and mobile devices such as iPads, iPhones, Android phones etc.
  • Custom theme option page to easily change the background, text and link colours and choose your own logo image.
  • Dark theme version (you can switch from the default light design to a dark version 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 translation (right now there is and English and German translation available).
  • Threaded comments are supported.
  • CSS-Styles for the Contact form 7 wordpress 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 information about the license at the www.gnu.org website.

1. The Theme Option Page

Ari’s custom theme option page gives you the opportunity to choose your own colors for the theme background, the text and the links. You can also use your own logo image instead of the default Logo text.

Ari WordPress-Theme

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 version of Ari. To do so just check the box “Ari dark theme version” at the top of the page. With the dark theme version you can still change the link and text colors.

Ari WordPress-Theme
Ari in the dark theme version.

To see a live demo of Ari’s dark theme version just go to www.ari.elmastudio.de and choose Ari Dark in the right sidebar under “Theme Test”.

Custom colors

To set your individuell text, background 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.

Ari WordPress-Theme

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 flexible width with a default width of 150px in the standard browser size. Both sidebars are widget ready (you can choose your widgets under Appearance / Widgets). With the WordPress widget option you can change your blog content very easily.

Because the left sidebar does not scroll with the content you have to be careful not to include too many widgets, otherwise the content 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 flexible layout the right sidebar switches to the bottom of the page when the screen is not wide enough to show all the content (like on tablet pcs or small travel laptop screens).

Is the screen even smaller, like on a smartphone, the layout changes to a one-column layout with the main content under the primary sidebar and the content of the right (secondary) 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 standard WordPress text widget. If you want to include an image in your widget you can prepare 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.

Ari WordPress-Theme

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

[php]
<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>.
[/php]
Social Links Widget

To link from one of the sidebars to your social network sites you can use the Ari Social Links widget. With the widget you can easily include links to your facebook, twitter, flickr, Xing, Linkedin or delicious page and to your rss feed.

Ari WordPress-Theme

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

Ari WordPress-Theme

After you saved your settings you will see the widgets with links and mini icons in your sidebar.

Custom menu widget for the page navigation

To show a navigation to your WordPress pages you can use the custom menu option (Appearance / Menu) to set up an individuell 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.

Ari WordPress-Theme

After setting up your custom menu you can add the menu to one of your two sidebars via the Custom menu widget. Just choose the name of your menu and save your widget.

Ari WordPress-Theme

3. Text, Images and Videos

In your theme you can use many different text styles such as h1 to h6 tags for headings. For quotes you can add the blockquote-tag (b-quote), you can wrap code snippets in a pre-tag or use lists (ul and ol) and tables.

Have a look at all the different text style options in the Ari theme demo.

To add fullsize images to the articles 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 automatically scaled to fix the articles width. You can see a demo of YouTube and Vimeo videos at the Ari demo website.

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

To show a short author information text and the authors gravatar image at the end of each single post page just fill out the Biographical info text in the users profile.

Ari WordPress-Theme

5. Threaded comments

Ari supports WordPress threaded comments. If the reply buttons after each comment don’t show up automatically you may have to activate the threaded comments option in your Settings under Discussion / Enable threaded (nested) comments.

Ari WordPress-Theme

6. Use forms with the Contact Form 7 WordPress plugin

We prepared styings 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 contact form have a look at the Ari live theme.

7. Use a jQuery Thickbox for images

To show pictures or a picture gallery 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 faeture for your pictures.

Ari WordPress-Theme
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 generate an .ico image with any online favicon generator (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 translations. Right now there is the default English and a German theme translation available. The language of your WordPress installation will be automatically your theme language.

If you want to translate Ari into your language you can install the WordPress plugin “Codestyling Localisation”. At the plugins homepage you can find a detailed instuction on how to use the plugin.

Of couse we would be thrilled if you would make your theme translation also available to use for other Ari users as well. Please contact me if you want to share your Ari language file (kontakt(at)elmastudio(dot)de).

If you have any questions, suggestions or feedback about the Ari theme please leave a comment below. We are happy to hear from you!

Ari Theme Changelog

Update Version 1.0.7 (9th March 2011):
– Bugfix in style.css line 386 to fix auto resizing smaller images to 100% content size.

Update Version 1.0.6 (5th March 2011):
– Included a clearing div after the content in loop.php to properly clear floated images on multiple page posts (recommended by wordpress.org theme review).
– Updated the functions.php and deleted the deregister the WordPress bundled jQuery (as recommended by wordpress.org theme review).
– Changed the footer link and text in footer.php.

Update Version 1.0.5 (8th Feb. 2011):
– Bugfix for Internet Explorer 8 auto image height problem.
– Fixed the code for the image logo option in header.php.

Update Version 1.0.4 (30th Jan. 2011):
– Updated the theme tags in style.css
– Updated styles in style.css for search result page.
– Small bugfixes in the template files header.php, footer.php, single.php, loop.php und functions.php after running the theme check plugin.

Update Version 1.0.3 (27th Jan. 2011):
– Included CSS-Styling for the default WordPress image gallery (see style.css line 591 – 614).
– Included extra style in stlye.css to fix the broken display of large pictures (over 150px width) in the right, secondary sidebar (see style.css line 219).
– Included an filter in functions.php (line 426) to disable the default include of css-styles for the WordPress gallery inside the body-tag.

Update Version 1.0.2 (20th Jan. 2011):
– Fixes on the Ari Social Link Widget code in functions.php (from line 246 – 255), beacuse empty Link icons still visible on firefox and IE browsers.

Update Version 1.0.1 (13th Jan. 2011):
-Fixed the Ari Social Link Widget code in functions.php and included the option to write individuel text for the different social links.
– Included a dark color theme option that can be selected on the theme option page. The CSS file dark.css can be found in the new folder “css”. To make the dark version work I also updated the header.php file and added line 18 to 20.
– Changed the screenshot picture.
– Updated the language files for the German translation de_DE.mo and de_DE.po in the “languages” folder.
– Updated the description text in style.css (from line 4).
– Included individual CSS styles for the jQuery thickbox in style.css.
– Included the changelog.txt file in the ari theme folder.

Version 1.0. (22th Dec. 2010):
– Ari Theme Release