So langsam hab ich den Dreh raus, wie man bei RapidWeaver diese neue Art von Themes machen kann. Ich meine die, bei denen man selbst einige Farben festlegen kann, die dann in den CSS Dateien verwendet werden können. Im Page Inspector sieht das ja dann ungefähr so aus:

Das Geheimnis liegt in der XML Datei Theme.plist, welche sich im Hauptverzeichnis eines Themes befindet, also i.d.R. hier: ~/Library/Application Support/RapidWeaver/MeinTheme.rwtheme.
Diese .plist Datei kann man natürlich schön im Property List Editor, der mit der Installation von Apples Developer Tools kommt, öffnen. Die 20 Farben, die man in obigem Screenshot sieht, finden ihre Entsprechung dann in 20 Dictionary Knoten, nummeriert von 0 bis 19:

Die vier RMStyleGroups (0 bis 3) korrespondieren dabei mit den vier Vorlagenstilen, die man im Page View Inspector sieht, wovon eben der vierte Knoten "Farben" heißt:

Ihre Knotennamen "Breite", "Icons", "Sidebar" und "Farben" finden sich im XML File dann wieder und zwar gleich in mehreren Sprachen, da Themes durchaus localized sind:

Aber zurück zur Definition und zum Umgang mit den Farben.
Nehmen wir an, ich möchte eine neue Farbe in mein Layout einbringen, welche der Benutzer des Themes ändern können soll. Zum Beispiel die Textfarbe einer h5 Überschrift.

Wir gehen folgendermaßen vor: zuerst fügen wir einen entsprechenden neuen Directory Knoten ins Theme.plist File hinzu. Dafür eignet sich m.E. besser ein Texteditor als der Property List Editor, denn da können wir schön mit copy&paste arbeiten.
Flugs also den Texteditor der Wahl gestartet (ich nehme immer gerne TextMate) und zur Stelle des letzten solchen Eintrags navigiert:

Den markierten Block copy&pasten wir direkt darunter und passen die Strings entsprechend an. Beim "Tag" denken wir uns einen geeigneten Namen aus; dies ist der Variablenname, der im nächsten Schritt ins Stylesheet File eingebaut wird. Das Ergebnis könnte also so aussehen:

Als nächstes muss man wissen, dass alle Farben, die auf diese Weise festgelegt werden, nicht im "normalen" CSS File, also styles.css zu definieren sind, sondern in einem anderen namens colourtag.css. Wir ergänzen also in diesem File:

h5 {
    color: %colour_h5_text%;
}

Das war's! Leider habe ich noch keinen Weg gefunden, RapidWeaver beizubringen, das neue Theme auch direkt zu benutzen. Daher muss man einmal RW beenden und neu starten, erst dann taucht das neue Farb-Kästchen auch im Page Inspector auf:

Kleiner Test in h5.

Klappt.
Dass diese h5 Überschrift auch noch eine hellgraue, gepunktete Linie unter dem Text hat, liegt daran, dass die dafür notwendigen CSS Formatierungen dann wiederum im File styles.css stehen:

h5 {
    letter-spacing: 0px;
    margin: 0 0 -8px;
    font-size: 1.1em;
    font-weight: bold;
    border-bottom: 1px dotted #ccc;
}

Aber eben nicht die Farbe, die steht ja in colourtag.css.

Viel Spaß!

Tags: RapidWeaver, Themes

RapidWeaver (RW), mit dem diese Seiten hier gemacht sind, ist ja ein nettes Tool. Aber um ein richtig geiles Tool zu werden, brauchts, glaube ich, noch ein paar Iterationen bzw. Major Releases...
Aber man kann das ein oder andere Manko meist ganz gut umschiffen. Klar: Workarounds sind immer blöd und sollten so schnell wie möglich durch korrigierte oder neue Features abgelöst werden. Aber da haben wir auf Realmac Software wohl keinen sooo großen Einfluss.

Also helfen wir uns mit Workarounds – diesmal in Form von Snippets. Gut, dass sie dieses Türchen offengelassen haben!

Ich fand im entsprechenden Forum bei Realmac Software die Tage zwei schöne Snippets: das eine ermöglicht es, Bilder innerhalb von Text links- oder rechtsbündig zu setzen und das andere bietet eine Möglichkeit, Tabellen dort einzufügen, wo man sie gern hätte -- und per CSS zu stylen.

Der Scrennshot, den ihr hier links seht, ist bereits mit ersterem Snippet gemacht und hier seht ihr eine Tabelle:



Das Design einer Tabelle kann man dabei leicht ändern, indem man die CSS-Snippets in das CSS-Feld des Page Inspectors (Bereich Page Header) zieht. Das im Artikel verlinkte ZIP File enthält dabei 24 Designs, aber man kann leicht nachrüsten, indem man diese Website hier besucht, sich ein hübsches Design in der dortigen Tabelle aussucht (durch Klick auf den Namen in der ersten Spalte wird es auf die Tabelle angewendet, so kann man es previewen) und dann auf den Download-Link klickt. Im Browser erscheint nun der CSS Quelltext, den man per Copy & Paste in besagtes CSS-Feld in RW kopiert (siehe rechts, unten im Bild).
Natürlich kann man hier auch noch flugs ein paar manuelle Anpasungen vornehmen, wenn einem der Style nicht gleich 100%ig zusagt.

Wie das mit dem Links- oder Rechts-Ausrichten der Bilder funktioniert, erklärt der Artikel im Forum. Mich hat es völlig irritiert, wieso man den Snippet-Quellcode in die Alt-Text-Eingabezeile des Image Inspektors ziehen muss. Was hat ein Alt-Tag eines Bildes bitteschön mit der Ausrichtung des Bildes zu tun? Die Auflösung gibt ein Blick in den entstandenen Quellcode der Seite preis: jedes HTML tag kann ja auch ein "style" Attribut enthalten. Und das Snippet, was man auf das Alt-Tag-Eingabefeld zieht, beginnt mit einem Anführungszeichen (genauer: Schlusszeichen) voller Absicht: dadurch wird das Alt-Attribut im Image-Tag beendet und man befindet sich noch im Image-Tag. Jetzt beginnt ein Style-Attribut des Image-Tags und das enthält die Ausrichtungsinformation! Tricky!

Fazit: ja, etwas Grundkenntnisse in HTML und CSS schaden nie, wenn man seine Webseiten möglichst hübsch machen will.

Tags: Snippets, RapidWeaver