seeseekey.net - Invictus Deus Ex Machina

Wenn man ein Word­Press Theme ent­wi­ckeln möchte, kann man natür­lich von Null anfan­gen. Aller­dings möchte man meist gleich mit der Idee begin­nen und nicht erst stun­den­lang das ent­spre­chende Grund­ge­rüst erstel­len. An die­ser Stelle setzt das WordPress-Theme Bones an.

Die Fea­ture Matrix von Bones

Dabei han­delt es sich um ein sehr mini­ma­lis­ti­sches Theme, wel­ches die Vor­be­rei­tun­gen für responsive und mobile Sei­ten beinhal­tet. Auch die not­wen­dige Abs­trak­tion für die unter­schied­lichs­ten Brow­ser ist bereits erle­digt wor­den. Her­un­ter­ge­la­den wer­den kann Bones dabei unter http://themble.com/bones/.

Nach­dem ich in einer Multisite-Wordpress Instal­la­tion das Theme gewech­selt hatte, zeigte die ent­spre­chende Seite sowohl im Front– als auch im Backend nur noch eine weiße Seite an. In den PHP Log­mel­dun­gen waren auch keine Pro­bleme zu erken­nen. Andere Sei­ten der Instal­la­tion funk­tio­nier­ten wei­ter­hin ohne Probleme.

Das alte Theme wurde entfernt

Bei einer Multisite-Installation deu­tet dies meist auf ein Pro­blem mit dem ver­wen­de­ten Theme hin. Zur Lösung sollte das akti­vierte Theme über die Netz­werk­ver­wal­tung dein­stal­liert wer­den. Anschlie­ßend kann man sich wie­der in das Backend der Seite ein­log­gen und dort auf ein ande­res Theme wechseln.

Das alte Design der Web­seite war doch schon etwas ange­staubt, was jemand mal so umschrieb:

Es hat mehr etwas von einem Out­door Handy, als von einem iPhone, zweck­mä­ßig halt.

Da mich sowieso einige Klei­nig­kei­ten an dem Design stör­ten, dachte ich mir das eine Reno­vie­rung ganz inter­es­sant wäre. Es stellte sich bloß die Frage ob man ein Theme kom­plett neu schreibt oder eine bereits vor­han­dene Basis nutzt.

Das alte Design „Ocean“

In mei­nem Fall über­legte ich auf Boot­strap oder der HTML Boi­ler­plate auf­zu­set­zen. Auch gibt es einige schöne Word­Press „Star­ter The­mes“, aller­dings traf nichts wirk­lich mei­nen Nerv. Also ging die Suche wei­ter. Fün­dig wurde ich dann beim GPL Theme „Pico­chic“ (http://picomol.de/picochic/), wel­ches mir doch recht gut gefiel. Die­ses wurde als Grund­lage genom­men und dar­aus das neue Design gebaut wel­ches man hier nun sehen kann.

Unter ande­rem mag ich feste Sei­ten­brei­ten nicht wirk­lich, was dann natür­lich als ers­tes geän­dert wer­den musste. An der Typo­gra­fie (Schrift­ar­ten etc.) wurde anschlie­ßend geschraubt, Style­s­heets für den Druck wur­den hin­zu­ge­fügt und am Social Media Wid­get wurde gewer­kelt, so das die­ses nun auch Youtube unter­stützt. Ansons­ten wur­den noch andere Dinge wie das Menü mini­mal ange­passt. Jetzt müs­sen nur noch Feh­ler gefun­den und besei­tigt wer­den ;)

Wenn man mit der Ent­wick­lung eines Word­Press The­mes anfängt, so sind es am Anfang immer die glei­chen Sachen die man dort macht. Viel schö­ner wäre es wenn man gleich ein Grund­ge­rüst hätte und die­ses nur noch aus­bauen muss. Genau für die­sen Fall gibt es WP-Kickstart wel­ches unter https://github.com/gerritvanaaken/WP-Kickstart zu fin­den ist. Lizenz­tech­nisch steht das ganze unter Public Domain.

Wei­tere Infor­ma­tio­nen gibt es unter:
http://praegnanz.de/weblog/htmlcssjs-kickstart

Responsives Design ist schon eine tolle Sache. Je nach den Fähig­kei­ten des Aus­ga­be­ge­rä­tes wird die Web­seite ange­passt. Vor eini­gen Wochen habe ich mich auch daran gemacht und mein Design um eine reponsive Kom­po­nente erwei­tert. Das ganze sieht auf klei­ne­ren Gerä­ten nun so aus:

Dabei wird per CSS geschaut ob eine bestimmte Min­dest­breite unter­schrit­ten wird:

@media screen and (max-width: 850px)
{
 ...
}

Wenn das der Fall ist wer­den bestimmte Ele­mente (wie die Sider­bar) aus­ge­blen­det, die Größe der Schrift­art ver­än­dert, et cetera. Nur gibt es anschei­nend ein Pro­blem mit unge­klär­ter Ursa­che. Wenn ich auf einem Mobil­ge­rät die Seite „Blog“ auf­rufe so ergibt sich fol­gen­des Bild:

Er igno­riert anschei­nend das ange­passte CSS für Bild­schirme klei­ner 850 Pixel und zeigt statt­des­sen die „nor­male“ Seite an. Dies pas­siert auf allen getes­te­ten Gerä­ten und auch nur auf der Blog Seite. Nun zum Rät­sel: Woher kommt das? Über Ideen zur Lösung des Pro­blems würde ich mich freuen :)

Wei­tere Infor­ma­tio­nen gibt es unter:
http://www.elmastudio.de/webdesign/webseiten-optimierung-fur-mobile-gerate-verschiedene-losungen-im-vergleich/
http://www.elmastudio.de/webdesign/diskussionsanregung-wie-wichtig-ist-die-webseiten-optimierung-fur-mobile-gerate-heute-schon/

Das neue Stan­dard­theme von Word­Press ist ja Twenty Ele­ven. In der Blog­seite hat man bei die­sem Theme stan­dard­mä­ßig eine Side­bar. Nur bei den sta­ti­schen Sei­ten war dies nicht der Fall. Damit auf die­sen Sei­ten die Side­bar ange­zeigt wird, muss das Side­bar Tem­plate (Attri­bute -> Tem­plate) auf der Seite akti­viert wer­den. Damit ist die Side­bar dann auf der ent­spre­chen­den sta­ti­schen Seite aktiviert.

Wei­tere Infor­ma­tio­nen gibt es unter:
http://www.transformationpowertools.com/wordpress/twenty-eleven-sidebar-on-single-posts-and-pages

Als ich an einem Word­Press Theme baute, hatte ich das Pro­blem das es die Absätze nicht rich­tig dar­stellte. Nach eini­ger Weile und dem stö­bern in ande­ren The­mes ent­deckte ich das ein einfaches:

.entry p
{
    margin-bottom: 1em;
}

in der style.css die­sen Umstand behebt. Danach wer­den die Absätze kor­rekt angezeigt.

Instal­liert man Fire­fox und Thun­der­bird unter KDE 4 so hat man optisch keine Freude an die­sen Anwen­dun­gen. Damit sich das ändert sollte man ein pas­sen­des Theme instal­lie­ren. Für den Fire­fox ist dies KFi­re­fox wel­ches unter http://ramonantonio.net/kde-firefox/ zu fin­den ist. Für den Thun­der­bird hört das Theme der Wahl auf den Namen Oxy­Bird und ist unter https://addons.mozilla.org/de/thunderbird/addon/8344 zu finden.

Der Media­player auf dem Neo hat am Anfang lei­der ein klei­nes Pro­blem, ihm fehlt das Theme. Das ganze sieht dann so aus:

Das ist natür­lich sehr unschön des­halb hier der Weg das Theme nachzuinstallieren:

opkg install openmoko-mediaplayer2
wget http://www.seeseekey.net/blog/uploads/files/openmoko/openmoko-mediaplayer-theme.tar.bz2
tar xjf openmoko-mediaplayer-theme.tar.bz2 –C /usr/share/themes/Moko/gtk-2.0
rm openmoko-mediaplayer-theme.tar.bz2

Was mir dabei noch auf­ge­fal­len ist das der Laut­stär­ke­reg­ler im Media­player nicht funk­tio­niert. Viel­leicht weiß da ja jemand Rat:)