vBulletin vs. #xhtml

So, um hier einmal ein bisschen Inhalt reinzubringen werde ich jetzt ein wenig über meine Erfahrungen mit dem Stylesystem von vBulletin schreiben.
Wie viele wohl wissen werden, arbeiten Greg und ich seit einiger Zeit daran, das ganz alte Design des gulli:boards auf das vB3 System zu portieren. Da wir beide allerdings Validitäts- und Accessibliltyfetischisten sind stehen wir ein bisschen auf Kriegsfuß mit den Möglichkeiten, einen Style zu erstellen/editeren, die ein vB ab Werk bietet.

Die Basics

vBulletin hatte seine Styles schon immer auf in eine Datei zusammengequetscht – mit dem Wechsel zu vB3 ist allerdings der Sprung zu XML gelungen – nein – sagen wir „versucht worden“.
Eine vB Styledatei ist ungefähr so aufgebaut:

<style>
	<templategroup>
		<template name="foo" type="<!-- hier kommt der templatetype -->">
			<!-- Inhalt des Templates -->
		</template>
	</templategroup>
</style>

In jedem template-Tag versteckt sich ein Schnipsel Template, aus dem vB dann die entgültige Datei zusammensetzt. Das für sich allein wäre ja nicht besonders schlimm. Nun hat jeder template-Tag aber auch ein type-Attribut, das dem System sagt, wie dieses Template zu behandeln ist. Das kann entweder „template“ sein – also ganz normales (X)HTML oder – und dafür haben wir vBulletin ganz besonders lieb – „CSS“.
Beim Typ „CSS“ wird ein mit serialize() encodiertes Array erwartet, das ungefähr so auszusehen hat:

Array
(
    [background] => #000000
    [color] => #cccccc
    [font] => Array ([style], [size], [family])
    [EXTRA] => 
    [LINK_N] => Array ([background], [color], [text-decoration])
    [LINK_V] => Array (<!– genauso wie LINK_N –>)
    [LINK_M] => Array <!– genauso wie LINK_N –>)

)

Hier stehen beispielsweise LINK_N für normale (unbesuchte, nicht aktivierte), LINK_V für besuchte (visted) und LINK_M für aktive Links. Bei EXTRA darf man eigenes CSS hinzufügen.

Die „Ab-Werk“-Methode

der vB Style Manager im Admin-CPWas hat sich vBulletin bei diesem System also gedacht? Das ganze wird etwas klarer, wenn man das Administrationsinterface des vB3 sieht.
Hier kann man das gesamte CSS mehr oder weniger „komfortabel“ editieren. Das Ganze ist offensichtlich für Einsteiger gedacht, die sich nicht mit CSS beschäftigen wollen, sondern eben „nur mal schnell ’ne Schriftfarbe ändern wollen“. Vernünftiges und effektives Bearbeiten ist fast nicht möglich. Das Editeren der „template“-Blöcke sieht übrigens ähnlich aus, nur dass man hier eben die rohen HTML-Schnipsel bearbeitet.

Völlig ungeeignet ist diese Lösung vor allem wenn man die folgenden Punkte betrachtet:

  • Wenn ich mir einen Überblick über das gesamte Stylesheet verschaffen möchte, muss ich die Änderungen speichern. Ich brauche also ein Testboard mit dem ich experimentieren kann, wenn ich meine Besucher nicht mit Designänderungen im Minutentakt überraschen will. Außerdem ist es ziemlich umständlich immer zu speichern und anschließend die Testseite neu zu laden um zu sehen, was vB jetzt mit meinen Angaben gemacht hat.
  • Ich darf mein Stylesheet nicht so struktuieren und kommentieren wie es mir gefällt, weil vB das Stylesheet ja automatisch generiert.
  • Wenn ich das Herumgeklicke im Admin-CP nicht mag und deshalb meinen Code immer in das „EXTRA“-Feld schreibe kommt es leicht zu Überschneidungen, weil der nächste, der den Style bearbeitet vielleicht doch lieber mit den angeboteten Eingabefeldern arbeiten möchte.
  • Dieser letzte Punkt ist jetzt mein persönliches Gefühl bei der Sache: Ich finde das Arbeiten mit dem Onlineeditor einfach unbequem. Mein CSS schreibe ich in dem Editor meiner Wahl, wo ich Syntaxhighlighting habe, wo ich struktieren und kommentieren kann wie ich lustig bin.

Die „hausgemachte“ Lösung

der vBulletin Style EditorLeider gibt es zum vB-eigenen Editor keine wirklichen Alternativen. Nach einigem Herumprobieren habe ich mich dann hingesetzt und den vBulletin Skin Editor geschrieben. Dieses Tool liest eine vB-XML aus und bietet einfacheren (offline) Zugriff auf die einzelnen Templateschnipsel und ihre Attribute. Besonders nützlich finde ich die Möglichkeit, ein Templateschnipsel per Klick in die Zwischenablage zu kopieren, in einem Editor meiner Wahl zu bearbeiten, wieder zu kopieren und per Mausklick das Templateschnipsel durch den Inhalt der Zwischenablage zu ersetzen.
Bleibt natürlich noch die Frage, CSS zu bearbeiten wäre. In der aktuellen Version gibt es keine Möglichkeit, vB-CSS bequem zu bearbeiten (mangels einer unserialize-Funktion in Delphi [was aber durchaus machbar wäre]). Deshalb helfen wir uns derzeit mit einem minimalistischen PHP-Script aus.
Einziges Manko an dieser Lösung ist, dass man nach jedem Edit die XML Datei neu einlesen lassen muss, da vB das gesamte Template in die Datenbank übernimmt. Ob man ihm das abgewöhnen kann weiß ich nicht. Ich vermute aber nicht, da das System beim importieren anscheinend allerlei Syntaxtests durchführt.

Fazit

Das vB Templatesystem ist wirklich nett gemeint. Wenn man damit jedoch mehr tun will, als hin und wieder eine Farbe zu ändern erweist es sich als extrem impraktikabel. Dass es besser geht, zeigen Konkurrenzprodukte wie beispielsweise phpBB, dessen Templateengine auf Smarty basiert. Hier kann man sogar Stylesheets bearbeiten ohne vorher Arrays auseinander zu klauben.

Über den Fortschritt von „Project alt-alt“

Damit böse Zungen, die meinen, dass unser Projekt tot ist, wieder leiser werden, poste ich mit diesem Artikel noch einige Screenshots.

derzeitiger Status der Forenhomepage, derzeitiger Status der Forenübersicht, derzeitiger Status des Editors

6 Kommentare to “vBulletin vs. #xhtml”

  1.  crash[kid] schrieb am 19. Apr 2006 um 10:13 zitieren

    Ich sehe schon, das wird noch was 😉

    Besonders viel halte ich von diesen Onlineeditoren auch nicht, jedoch habe ich noch nie mit vBulletin gearbeitet, weswegen ich deren System nicht kenne. Aber wie du das beschreibst scheint das zwar gut gemeint aber nicht besonders gut umgesetzt worden sein.

    Ein Stylesheet das automatisch generiert wird und dann auch noch so umstaendlich zu bearbeiten ist, waere nichts fuer mich. Ich muss sehen an was ich bin und muss nach belieben schrauben koennen, so wie es mir eben gerade in den Kram passt.
    Vom vBulletin-Team haette ich dann wenigstens eine Option erwartet, die erlaubt das automatische Erstellen der Stylesheets abzuschalten und das System auf manuell umzuschalten. Offensichtlich haben sie soweit nicht gedacht …

    Soweit ich das beurteilen kann sieht das aber schon ganz gut aus, was ihr beiden da bisher fabriziert habt. Koennt ihr schon sagen wielange es noch dauern wird bis der Style im gulli:board online geht oder ist der Zeitpunkt noch zu frueh um das einschaetzen zu koennen?

  2.  stephantom schrieb am 19. Apr 2006 um 14:36 zitieren

    „Koennt ihr schon sagen wielange es noch dauern wird bis der Style im gulli:board online geht oder ist der Zeitpunkt noch zu frueh um das einschaetzen zu koennen?“

    Wir wissen es selbst nicht, es sind noch einige Dinge, die ganz sicher noch verändert werden müssen (z.B. die Threadansicht ist noch völlig zerstört – eine Baustelle halt). Es ist fertig wenn wir es für fertig erklären und das kann heute, morgen aber wahrscheinlich doch etwas später sein 😉

  3.  1100 0101 schrieb am 23. Apr 2006 um 15:25 zitieren

    Puh, wenn ich das so lese, bin ich gerade froh, mich damals für phpBB entschieden zu haben. (Forum für meine Stufe, süße 20.000 Beiträge). Im HTML-Template selbst habe ich so ziemlich alles abgeändert, was ging, und es funktioniert sogar..

    Trotzdem noch viel Erfolg bei eurem Blog (auch wenn URLs immer was mit dem Inhalt zu tun haben sollten ;))!

  4.  pajero schrieb am 25. Apr 2006 um 15:43 zitieren

    Hehey, der erste Inhalt, und dann gerade das Rechte zur rechten Zeit, da ich gerade am auswählen einen Boardsystems bin 🙂

    Macht weiter so,
    Pajero.

  5.  YeLm schrieb am 29. Apr 2006 um 16:19 zitieren

    viel glück, würd mcih auch freuen!

  6.  Blacker47 schrieb am 04. Jan 2008 um 22:35 zitieren

    Ist das Projekt nun tot?

Trackback-Adresse | RSS-Feed für die Kommentare abonnieren

Hinterlasse einen Kommentar:


(Wir behalten uns vor Kommentare von dummen Menschen entweder zu löschen oder exemplarisch für die Nachwelt zu konservieren. Dumme Kommentare mit Werbelinks müssen leider auf zweiteres Privileg verzichten.)

XHTML: Du kannst diese Tags verwenden:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>