Inspirationen für das Theme

Hinweis: Dieser Beitrag bezieht sich auf die erste Version von Delta Orionis (2007-2011). Mehr Infos zu dieser Version der Seite auf dieser Seite.

Das Theme dieses Blogs habe ich selbst geschrieben (ähm, ok, aus bestehenden Fragmenten angepasst), wobei ich das aktuelle Design in weniger als 48 Stunden aus dem Boden gestampft habe. Aber das kommt natürlich nicht aus dem luftleeren Raum, sondern beruht auf vielfältigen Inspirationen. Auf diese möchte ich hier kurz eingehen.

Theme KubrickDer Aufbau des Themes beruht auf dem deutschen Standard-Theme, letzten Endes also auf dem klassischen Kubrick-Theme, welches für deutsche Blogs angepasst wurde von Olaf A. Schmitz und Olaf Baumann. Ich habe eine zweite Sidebar ergänzt und das ganze fluid gemacht, d.h. die Seite passt sich sowohl der Schriftgröße des Browsers als auch der Fenstergröße an. Das ganze ist dann noch mit einer Mindestweite gekoppelt, damit es beim Kleiner-Ziehen des Fensters nicht alles zerhaut, und nach oben gibt’s auch eine Beschränkung. Die generelle Anordnung der Elemente hat ein wenig gedauert, war aber gar nicht so schwierig. Kurz ausgedrückt sind Header und Content-Spalte ganz normal definiert, wobei die Content-Spalte größere Ränder links und rechts hat. Die beiden Sidebars sind dann in diese Ränder hinein absolut positioniert. Alles unter fleißiger Verwendung von em, damit es sich zumindest teilweise auch an die Schriftgröße anpasst.

Erster VersuchMit dem Design habe ich mich anfangs sehr schwer getan, und die erste Version des Themes war dann auch eher nicht so hübsch, auf eine unbeholfene Art und Weise. An dieser Stelle kommen ein halbes Dutzend guter Themes ins Spiel, die man alle in der tollen Übersicht bei Dr. Web verlinkt findet. Besonders erwähnen möchte ich Bloxpress2. Obwohl ich es bei mir nicht zum Laufen gebracht habe, hat mich die Online-Demo doch dazu gebracht, wieder mehr auf ein weißes Aussehen umzuschwenken und die ganzen Hintergrundfarben bleiben zu lassen bzw. dezent zu halten. Den Header meiner Seite habe ich dagegen sehr stark an das spanische Blog aNieto2k angelehnt. Eigentlich wollte ich nichts so offensichtlich kopieren, aber der Effekt der Buttons neben dem Titelschriftzug sieht einfach zu gut aus. Und immerhin habe ich mir die Mühe gemacht, die Bilder nicht einfach zu kopieren, sondern in PSP nachzumalen. 0:-)

Die graphischen Elemente waren in Paint Shop Pro schnell erledigt, auch wenn ich mit dem Programm ganz schön eingerostet bin. Fehlt noch das Titelbild: Es ist ein Ausschnitt des sehr viel größeren Photos Venus by the Lake von Tunç Tezel (verwendet mit Genehmigung des Photographen), aufgenommen in Bolu, Türkei im April 2007. Weil ich irgendwie zwischendurch auf dem Orion-Trip war, habe ich eine Menge Fotos vom Nachthimmel angeschaut, aber dieses hat mich speziell fasziniert. Es ist auch fast das einzige graphische Element, das ich aus meinem ersten Design-Versuch übernommen habe, wenn auch verändert.

Das Theme gefällt mir insgesamt ziemlich gut, auch wenn es an den Details noch viel zu tun gibt. Erstaunlicherweise hatte ich in dieser Version auch kaum Probleme mit dem IE7. Das Theme ist valides XHTML 1.0 Strict, und ich habe mir ehrlich gesagt um den IE6 keinerlei Gedanken gemacht. Mache ich vielleicht auch nicht mehr, obwohl ich für IE6-Nutzer noch einen „Get IE7″-Button eingebaut habe (mit Conditional Comments). Immerhin wurde mir aber berichtet, dass sich die Seite sogar mit dem IE5/Mac ohne größere Auffälligkeiten anschauen lässt.

Update: Mittlerweile ist das Theme in verschiedenen Browsern getestet, auch im IE 5.5 und 6. Einige Bugs sind speziell für diese beiden Kandidaten behoben worden, mittels eines Extra-Stylesheets speziell für ältere IEs (was sich ebenfalls sehr schön macht mit Conditional Comments).

Schreibe einen Kommentar

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

Bitte beachte die Kommentarregeln: 1) Kein Spam, und bitte höflich bleiben. 2) Ins Namensfeld gehört ein Name. Gerne ein Pseudonym, aber bitte keine Keywords. 3) Keine kommerziellen Links, außer es hat Bezug zum Beitrag. mehr Details...

So, noch mal kurz drüber schauen und dann nichts wie ab damit. Vielen Dank fürs Kommentieren! :-)