Skip to content

Bulletproof Theme in Serendipity 1.2

Nachdem Robert so begeistert über das neue Bulletproof Theme war, das mit der neuen Serendipity Version 1.2 ausgeliefert wurde, und alle Welt im Moment offenbar nun seine Templates umstellt, habe ich mir das Theme nun auch einmal angesehen.

Wow, das ist echt schick geworden! Bulletproof könnte man als Meta-Theme bezeichnen. Es wird mit 4 unterschiedlichen Farbauswahlen (CSS Dateien) ausgeliefert, was erst einmal nicht besonderes ist, das gab es vorher in anderen Themes auch schon. Allerdings ist es zusätzlich noch weitreichend über die Konfiguration des Themes anpassbar, was jedem die Möglichkeit gibt, die 4 Farbauswahlen jeweils nach seinem Geschmack zu layouten.

Die Konfiguration umfasst solche Sachen wie ein eigenes Header Bild, eine Angabe, wo die Blog Navigation sein soll (über/unter dem Header, zusätzlich in der Fußleiste usw), wie die Spalten angeordnet werden sollen, welche Teile im Artikel Footer erscheinen sollen und natürlich Standards wie die Konfiguration, welche Einträge die Blognavigation eigentlich haben soll. Zusätzlich kann man noch Counter Codes einfügen (z.B. von MyBlogLog und ähnlichen Services) und freien Inhalt in den Footer packen. Wohlgemerkt: All das funktioniert ohne jeglichen Eingriff in die Template Dateien, die Layout Änderungen sind über eine übersichtliche Konfiguration einfach einstellbar! Das ist ziemlich komfortabel, denn so können auch Anwender, die von Templates und CSS keine Ahnung haben, schon sehr gute Resultate nach eigenem Geschmack zusammen klicken. 

Ich bin natürlich gleich einen Schritt weiter gegangen und habe mein eigenes Set an CSS Dateien und Bildern erstellt. Bei den mitgelieferten Template Versionen kann man nur Farben global auswählen und es war keine dabei, die zu meinem Blog passte. Wenn man Farben anpassen will, muss man sich also sein eigenes Set erzeugen. Ich habe das violette Thema nun als Grundlage genommen und daraus ein graues Thema erzeugt, das ich noch ein wenig erweitert habe z.B. mit Linkicons usw. Das graue Thema habe ich ungefähr so gestyled, wie mein Blog vorher aussah. Allerdings komme ich nun z.B. in den Genuss von 2 Spalten neben den Artikeln, was ich immer schon einmal haben wollte.

Was mir auch noch fehlte, war die Möglichkeit, sein neues Set von CSS Dateien und Bildern auf einfache Weise in das Bulletproof Theme einzupflegen. Die CSS Dateien, die ausgewählt werden können, sind in der Theme Konfiguration hart kodiert. Wenn man also eine neue Farbauswahl zusammen stellt, muss man den Code der Theme Konfiguration anpassen. Ich wünsche mir hier eher einen Mechanismus, der bewirkt, dass man sein Set einfach in das BP Verzeichnis ablegen kann und das Theme diese Dateien erkennt und mit den bereits vorhandenen Farbversionen zur Auswahl anbietet. Ich habe das im S9Y Forum angemerkt. Garvin fand die Idee so schick, dass er das gleich implementiert hat.

Da man nun einiges "nebenbei" umkonfigurieren kann, werde ich wahrscheinlich noch ein wenig mit dem Layout herum experimentieren. :-D Wie gefällt es euch?

 

Trackbacks

Keine Trackbacks

Kommentare

Ansicht der Kommentare: Linear | Verschachtelt

YellowLed

YellowLed am :

Hübsch, ich hoffe, die Umsetzung war so simpel und zügig gemacht, wie es mit Bulletproof sein sollte?

Die mitgelieferten Farbsets sind natürlich z.T. »proof of concept«. Da wird vieles gezeigt, was möglich ist, aber es ging nicht unbedingt darum, einen Designblumentopf zu gewinnen. Die laufen mehr so nach dem Motto »Wenn es jemandem gefällt, schön. Wenn nicht: Anpassen.« :-)

Grischa

Grischa am :

Ja, es war doch relativ einfach. Vor allem das Konvertieren eines alten Templates in das Bulletproof ging locker von der Hand, habe mir aber ein wenig Zeit dafür genommen, um nicht einfach alle meine alten Klassen zu nehmen, sondern nur die wirklich noch benötigten Änderungen.

Jetzt muss ich nur noch schauen, dass das Theme auch noch ein wenig kompatibler mit IE wird. Die Tagcloud sieht im IE z.B. echt bescheiden aus, da fehlen die meisten RSS Icons. Auch das Icon für externe Links sieht man im IE nur manchmal, das war mit meinem alten Theme aber schon ähnlich. Ich habe noch keine Ahnung, warum das nicht richtig klappt. Da ist es natürlich schön, dass ihr besondere CSS Dateien für die einzelnen Browser habt, die kann man dann wahrscheinlich gut dafür benutzen.

Die mitgelieferten Farbauswahlen sind aber doch schon recht nett? Ein Starter wird da schon etwas nettes dabei finden. Euer Theme ist wirklich klasse geworden, vielen Dank!

Ach - was ich in meinem Artikel noch vergessen habe: Die Admin Oberfläche wird mit dem Theme auch noch richtig schön und übersichtlich. Das gefiel mir auch sehr gut!

Daumen hoch! :-)

YellowLed

YellowLed am :

Hmmm. Nun sitze ich hier mal wieder an einem Linux-Desktop und habe folglich keinen IE zur Hand, insofern kann ich nix prüfen. Reden wir möglicherweise von einem IE6? Dann liegt es vermutlich an dessen grottiger bzw. praktisch nicht vorhandener PNG-Unterstützung (so ziemlich alle Grafiken in BP sind PNGs).

Es wäre ggf. einen Versuch wert, das Browser Compatibility-Plugin zu testen (macht aber meiner Erfahrung nach mehr Ärger, als dass es nützt) oder aber ggf. die betreffenden Grafiken durch GIFs zu ersetzen und das im Stylesheet anzupassen. Eventuell wäre es auch möglich (das müsste man mal für kuhzünftige BP-Versionen prüfen), gewisse PNG-Icons für IE6 durch GIFs zu ersetzen ... zumindest beim XML-Icon müsste das gehen. Hmhmhm. Mal sehen :-)

Grischa

Grischa am :

Nein, es ist ein IE7. Wenn ich allerdings weiß, dass PNG nicht so gut unterstützt wird, dann ändere ich meine Icons wohl mal auf GIF.

Ich habe es jetzt aber wohl heraus gefunden, warum IE die XML Icons in der Tagwolke nicht anzeigt: Ich hatte das Padding aus der serendipity_xml_icon Klasse entfernt, weil die beim purple colorset falsch war (padding oben und unten, was ziemlich schlimm aussah, weil die Icons so die Schriften überschrieben). Nun habe ich wieder ein Padding drin, allerdings rechts und links, nun stellt der IE7 wieder alle XML Icons bis auf eines (?!) dar.

Matthias

Matthias am :

Die alte Plage IE, ich habe da auch immer mal wieder Probleme mit irgendwelchen Icons. Glaube aber nicht, dass es im IE7 noch an PNGs liegt.

Ich habe seit einiger Zeit ein fast fertiges Layout auf Halde liegen, vielleicht gehe ich da auch nochmal ran und ziehe es auf Bulletproof rüber ... ich glaube, ich werde es nicht bereuen.

Grischa

Grischa am :

Ich glaube auch nicht, dass Du es bereuen wirst. Die Portierung ist wie geschrieben relativ einfach. Und die Möglichkeiten nachher mal eben Spalten per Konfiguration zu verschieben usw. empfand ich wirklich als sehr komfortabel. Bin immer noch nicht sicher, ob ich meine dünne Spalte links lasse oder rechts neben die andere Spalte stelle. Ist mit BP eben kein Problem, einfach die Option in der Theme Konfiguration ändern.

YellowLed

YellowLed am :

Meines Wissens hat IE7 *keine* Probleme mit PNGs mehr. Falls Du das bereits erwähnte Kompatibilitäts-Plugin benutzt, würde ich das mal testweise abklemmen.

Ich bin eigentlich kein Fan von GIFs, aber wir können ja mal überlegen, in einer kuhzünftigen BP-Version dem IE da eine Extrawurst zu braten. Allerdings gibt's ja mittlerweile andere Baustellen ...

Grischa

Grischa am :

Warum bist Du eigentlich kein Freund von GIF? Wegen dem alten Lizenzproblem? Das ist doch inzwischen nicht mehr vorhanden, oder?

YellowLed

YellowLed am :

Ursprünglich schon, wobei ich zugeben muss, dass mein letzter Stand in Sachen Lizenz schon etwas veraltet ist. Scheinbar ist das in der Tat kein Problem mehr, aber: IANAL.

PNG hat weitere Vorteile (z.B. verlustfreie Kompression) - ich persönlich schätze daran vor allem, dass ich in Gimp (Sponsort mir jemand Photoshop? Nein? :-)) leichter mit PNGs arbeiten kann. Und ehrlich gesagt kratzen mich IE6-Nutzer nicht sonderlich ;-)

Grundsätzlich ist für den ganzen Grafikkram in BP ohnehin eher David zuständig, und obwohl ich mich gerade nicht an die Gründe erinnere, war auch David eher für PNG. Aber ich stelle die GIF-Geschichte mal zur internen Diskussion.

Grischa

Grischa am :

IANAL? Was ist das denn schon wieder für eine Schweinerei? ;-)

Dass PNG verlustfrei komprimiert, wusste ich noch gar nicht! Das spricht dann natürlich deutlich für PNG und gegen IE6! ;-) Danke für die Info!

Und wieso kann Gimp mit PNG besser arbeiten als z.B. mit GIF? Ich erkenne da nicht wirklich einen Unterschied, wenn ich die beiden Formate benutze? Ich verwende nämlich auch Gimp..

YellowLed

YellowLed am :

http://catb.org/jargon/html/I/IANAL.html :-)

Zur verlustfreien Kompression lese ich gerade, GIF biete das auch. Vermutlich wie bei mp3-Dateien letztlich eine Frage der Einstellungen, keine Ahnung.

Und zu Gimp: Wenn ich eine bereits als GIF gespeicherte Datei z.B. einfärben will, muss ich sie zunächst in dem RGB-Modus versetzen. Dieser Schritt entfällt bei PNG.

Grischa

Grischa am :

IANAL: Uiuiui.. Das ist bestimmt eine total verbreitete Abkürzung, oder? ;-)

GIF verlustfrei: Kann man das auch beim Speichern aus GIMP einstellen? Muss ich mal schauen, wie die Dateigrößen im Vergleich sind. Danke schon mal für die Hinweise!

YellowLed

YellowLed am :

Das weiß ich nicht - ich benutze ja nie GIF ;-) Gerade gestestet: Direkt beim Speichern einer Datei kann man bei GIF gar nix angeben ... möglicherweise versteckt sich das irgendwo in den Gimp-Einstellungen, ich war gerade zu faul zum Suchen :-)

Grischa

Grischa am :

Ist auch nicht so wichtig. :-)

Danke!

Kommentar schreiben

Die angegebene E-Mail-Adresse wird nicht dargestellt, sondern nur für eventuelle Benachrichtigungen verwendet.
Dieses Blog erlaubt Dir, Audio Kommentare über audioboo.fm hinzuzufügen. Erstelle einen neuen Boo und gib hier den Link auf die Seite Deines Boos ein.
record
Wenn Du Deinen Twitter Namen eingibst wird Deine Timeline in Deinem Kommentar verlinkt.
Bewirb einen Deiner letzten Artikel
Dieses Blog erlaubt Dir mit Deinem Kommentar einen Deiner letzten Artikel zu bewerben. Bitte gib Deine Blog URL als Homepage ein, dann wird eine Auswahl erscheinen, in der Du einen Artikel auswählen kannst. (Javascript erforderlich)
(Bedingung: 1 Kommentare geschrieben)
Standard-Text Smilies wie :-) und ;-) werden zu Bildern konvertiert.
tweetbackcheck