Ralfs Simple Theme

This page is also available in english!

Beschreibung

Bei meinem ersten öffentlichen Theme geht es mir weniger darum eine gestalterische Meisterleistung abzuliefern, als vielmehr ein Beispieltheme bereitzustellen, in dem meine Theme-Erweiterungen aus den Tutorials bereits integriert sind. Ich hoffe das mein Theme trotzdem auch optisch einigermaßen ansprechend geworden ist.
Ausgangsbasis für das Theme war das Tiger Theme, welches zum Standardumfang von RapidWeaver gehört.

Das Theme kann sowohl für private als auch kommerzielle Zwecke kostenlos genutzt werden. Es wäre allerdings nett, wenn ihr bei Verwendung einen Link auf diese Seite unterbringen würded. Spenden werden natürlich gerne (über nebenstehenden Button) entgegengenommen.

PopUp Theme Version
Im Theme Paket sind jetzt zwei Versionen des Themes enthalten. Die bisherige Version mit dem normalen Menü in der Sidebar und eine neue Version mit einem PopUp Menü in der Obersten Zeile.
RapidWeaver 3.6 Update
Das Theme ist mittlerweile für RapidWeaver 3.6 angepasst worden. Es unterstützt nun Theme Styles zur individuellen Farbwahl und die neuen Features für Listen und das Blog.
Da Blog der Version 3.6 jetzt auch Inline-Kommentare unterstützt, wurde die Kommentaranzeige über AJAX für die Permalinkseiten abgeschaltet.
Durch eine kleines neues Feature in RapidWeaver 3.6 ist es jetzt sehr einfach geworden, den im Theme eingebauten Lightbox-Effekt auch für einzelne Bilder auf beliebigen Seiten zu verwenden. Wie es geht erklärt ein mini Tutorial weiter unten!

Funktionen

Wie bereits erwähnt liegt die Besonderheit des Themes darin, dass die Ergebnisse meiner Tutorials (Lighbox JS und HaloScan Kommentare) bereits im Theme eingebaut sind. Konkret bedeutet das:

  • RapidWeaver Photoalben verwenden automatisch Lightbox JS zur Anzeige der Bilder.
  • Durch die bereits eingebunden lightbox.js kann der Effekt leicht für andere Bilder verwendet werden.
  • Es werden nur zwei Zeilen JavaScript Code benötigt, um auf einer Blogseite die Kommentare direkt anzuzeigen.
Darüber hinaus besitzt das Theme selbst folgende Variationen:
  • 2 Versionen: Standardmenü im Sidebar, PopUp Menü in obersten Zeile
  • Icons: Grün, Blau und Orange
  • Seitenleiste: Links, Rechts und ausgeblendet
  • Breite: 600, 680, 1000 und flexibel
  • Farben: frei wählbar durch Theme Styles
  • Es werden alle neuen RapidWeaver 3.6 Funktionen unterstützt

Installation

Zur Installation des Themes genügt es, einen Doppelklick auf die Theme Datei zu machen. Das Theme wird dann automatisch in das Verzeichnis "~/Library/Application Support/RapidWeaver" kopiert. Wahlweise kann mann das Kopieren auch selbst machen.
Alle benötigten Komponenten sind bereits in der Theme Datei enthalten. Hierzu gehören:

  • Prototype 1.5.0
  • Sriptaculous 1.7.0
  • Lightbox JS 2.02
Ich hoffe, dass ich nicht gegen die Lizenzbestimmungen dieser Komponenten verstoße, weil ich sie dem Theme direkt beifüge (ich konnte auf den jeweiligen Seiten zumindest nichts dergleichen finden). Sollte dem doch so sein, bitte ich um Hinweise. Die obigen Pakete sind jeweils komplett enthalten (inklusive Dokumentation usw.).

Verwendung

Die Verwendung des eigentlichen Themes dürfte wohl hinlänglich bekannt sein. Ich beschränke mich deshalb hier auf Hinweise zu den "besonderen" Funktionen.

Lightbox JS
Der Lightbox Effekt ist für das RapidWeaver Fotoalbum automatisch aktiviert, in RapidWeaver 3.6 ist die Möglichkeit hinzugekommen ein "rel" Tag für einen Link zu definieren, wodurch es nun sehr einfach geworden ist, den Lighbox-Effekt auch für einzelne Bilder zu verwenden, die in einem Styled-Textfeld eingefügt wurden.

  1. Das gewünschte Bild wie gehabt in die Seite einfügen und formatieren.

  2. Das vergößerte Bild, das in der Lightbox angezeigt werden soll, in der richtigen Größe als Seitenanlage zur Seite hinzufügen.



  3. Das Bild auf der Seite anklicken und die Schaltfläche "Neuer Link" anklicken. Aus der Dropdown Liste kann mann nun direkt die vergrößerte Version des Bildes als Asset auswählen. Wichtig ist nun nur noch, in das "rel" Feld "lightbox" einzutragen.

Und schon wird das vergrößerte Bild in der Lightbox geöffnet.

HaloScan Kommentare

HINWEIS! Zur verwendung dieser Funktion wird PHP auf dem Server benötigt! Der Einsatz auf einem .mac Account ist somit nicht möglich.

Aus diesem Grund habe ich die Funktion auch nicht standardmäßig aktiviert. Es ist jedoch sehr einfach das Ganze zu aktivieren:
In den Seiteneigenschaften (Page-Inspector - Shift + Apfel + i) müssen im Feld "Individuelles JavaScript" im Bereich "Seitenkopf" nur folgende beiden Zeilen eingefügt werden:
var pageId = 'PAGE_ID';
onloads.push(getHaloComments);
In der ersten Zeile muss PAGE_ID durch die entsprechende ID der Seite ersetzt werden. die Page-ID findet man z.B. in der Codeansicht der Seite. Die zweite Zeile sort dafür, dass die Funktion zum einfügen der Kommentare automatisch nach dem Laden der Seite aufgerufen wird.
Für die automatische Erkennung des HaloScan Benutzernamens verwendet das JavaScript den Link auf den Kommentar Feed. Dieser muss also für die Seitenleiste aktiviert sein!

Bekannte Probleme

  • Die Grafiken für "Laden" und "Schließen" beim Lightbox Effekt werden in der RapidWeaver-Vorschau nicht angezeigt, es erscheint statt dessen ein Fragezeichen Icon.
    In der RapidWeaver-Vorschau funktioniert die automatische Erkennung des Pfades zum Rootverzeichnis nicht. Dadurch werden die entsprechenden Bilder nicht gefunden. Nach dem die Seite exportiert worden ist sollte das ganze einwandfrei funtionieren.
  • Die Kommentare einer Blogseite werden in der RapidWeaver-Vorschau nicht angezeigt!
    Der Machanismus zum Laden der Kommentare verwendet ein PHP-Script. Die RapidWeaver-Vorschau kann zwar PHP Code innerhalb einer Seite interpretieren, nicht jedoch eine externe Datei. Wenn die Seite exportiert wird, sollte das ganze funktioniere. Vorausgesetzt der Server auf den exportiert wurde unterstützt PHP.
  • Die Bilder im Fotoalbum werden nicht mit dem Lightbox Effekt angezeigt, es erscheint die normale RapidWeaver HTML-Seite.
    In bestimmten Konstellationen auf der Seite kann es sein, dass der automatische Aufruf des Lighbox Init-Skriptes nicht funktioniert. Hier hilft meistens der Tip von der Lightbox Troubleshooting-Seit, die Init-Funktion noch einmal explizit aufzurufen. Hierzu muss man einfach folgenden Code in das Feld "Eigenes JavaScript" im Bereich "Code" der Seiten-Informationen einfügen:
    onloads.push(initLightbox);
  • Die Bilder im Fotoalbum werden nicht mit dem Lightbox Effekt angezeigt, es erscheint nur das Bild ohne eine HTML-Seite.
    Der Lightbox Effekt Funktioniert erst, nachdem alle Vorschaubilder geladen wurden. Diese Fehler passiert immer dann, wenn man schon auf ein Bild klick während noch Vorschaubilder geladen werden (meiste im nicht sichtbaren Bereich einer längeren Seite). Wartet man ab bis die Seite vollständig geladen ist, funktioniert der Effekt problemlos. Je mehr Bilder auf einer Vorschauseite sind, desto höher ist natürlich die Gefahr, dass ein Benutzer bereits vor dem Ende des Ladevorganges auf ein Bild klickt.
  • Es werden nicht alle Kommentare auf der Blogseite angezeigt.
    Der Kommentar Feed von HaloScan enthält leider nur die 10 aktuellsten Kommentare. Dementsprechend können auch nur diese auf der Blogseite angezeigt werden.

Screenshots