Color-Modul hinzufügen
Color.module erlaubt es dem Admin, das Farbschema des Themes komplett zu ändern. Durch Auswählen einer Palette von 5 Farben (Entweder aus einer Zusammenstellung oder von Hand), kann man die Farben eines ganzen Themes ändern.
Das Modul kann das Stylesheet verändern und Bilder nachrendern. Bedingung ist, dass das Theme bestimmte Hooks (frei übersetzt: Haken, Aufhänger) bereitstellet, um dies zu erlauben und das Design muss eigens dafür ausgelegt werden.
Dieses Dokument erläutert die Basics zur Erstellung von colorierbaren Themes.
Design
Man sollte sich klarmachen, das durch die Art und Weise, wie color.module funktioniert, nicht jedes Design coloriert werden kann.
Wir benutzen ein transparentes Bild (die Basis) des Designs, welches alles außer den Hintergrund enthält. Dann legen wir dieses Bild auf einen colorierten Hintergrund, um die colorierte Version zu erhalten. Am Ende zerschneiden wir dieses zusammengesetzte Bild in kleinere Bilder und speichern sie in getrennten Bilddateien.
Wir bearbeiten auch das Stylesheet und ändern alle Farben, basierend auf denen, die man vorher definiert hat. Das Modul smoothy ändert die Farben mit Hilfe einer Farbpalette als Referenz. Farben in der Palette, die nicht ganz zu passen scheinen, werden relativ zur am bessten passenden Farbe aus der Palette angepasst (egal ob es sich um einen Link, Text oder einer Hintergrundfarbe handelt).
Das Photoshop-Modell des Designs sollte also aus einer mehrschichtigen Datei bestehen, die am unteren Ende des Ebenenstapels eine oder mehrere colorierte Ebenen besitzt, und alles andere wir darüber aufgeblendet. Wenn man das Basisbild speichert, muss man alle Ebenen zusammenfügen, wobei die colorierten Ebenen unsichtbar bleiben sollen. Schauen Sie sich Datei base.png des Themes Garland an um mal ein Beispiel zu sehen (öffnen Sie es in einem Bildbearbeitungsprogramm, um die transpareten Ebenen sehen zu können). Es gibt auch ein Video, das veranschaulicht, wie Sie mit Photoshop Ihre eigene base.png erstellen können.
Alle Dateien, die in diesem Prozess erstellt werden, werden in den Ordner /files/css geschrieben ud anstelle der Standardbilder verwendet. Das bedeutet, dass das colorierbare Theme auch ohne color.module mit dem Standardfarbschema fuktionieren müsste.
In der Praxis
Schauen wir uns das am Beispiel des Themes Garland an: Die wichtigsten Dateien befinden sich im Unterverzeichnis themes/garland/color:
base.png
Diese Datei enthält das Basisdesign des Themes, welches zusammengestellt und in die einzelnen Bilder zerschnitten ist.
color.inc
Diese Datei enthält alle notwendigen Parameter, um das Theme einzufärben. Schauen Sie auch weiter unten.
preview.css
Dieses Stylesheet wird genutzt, um die Vorschau im Farbwechsler zu generieren.
preview.png
Dieses Bild wird genutzt, um die Vorschau im Farbwechsler zu generieren.
Die Datei color/color.inc lässt den Farbwähler auf der Seite mit de Theme-Einstellungen erscheinen. Es handelt sich hierbei um eine reguläre PHP-Datei, die ein $info-Array mit den fogenden Werten enthält:
Schemata
<?php
array('schemes' => array(
'#0072b9,#027ac6,#2385c2,#5ab5ee,#494949' => t('Blue Lagoon (Default)'),
'#464849,#2f416f,#2a2b2d,#5d6779,#494949' => t('Ash'),
'#55c0e2,#000000,#085360,#007e94,#696969' => t('Aquamarine'),
'#d5b048,#6c420e,#331900,#971702,#494949' => t('Belgian Chocolate'),
'#3f3f3f,#336699,#6598cb,#6598cb,#000000' => t('Bluemarine'),
'#d0cb9a,#917803,#efde01,#e6fb2d,#494949' => t('Citrus Blast'),
'#0f005c,#434f8c,#4d91ff,#1a1575,#000000' => t('Cold Day'),
'#c9c497,#0c7a00,#03961e,#7be000,#494949' => t('Greenbeam'),
'#ffe23d,#a9290a,#fc6d1d,#a30f42,#494949' => t('Mediterrano'),
'#788597,#3f728d,#a9adbc,#d4d4d4,#707070' => t('Mercury'),
'#5b5fa9,#5b5faa,#0a2352,#9fa8d5,#494949' => t('Nocturnal'),
'#7db323,#6a9915,#b5d52a,#7db323,#191a19' => t('Olivia'),
'#12020b,#1b1a13,#f391c6,#f41063,#898080' => t('Pink Plastic'),
'#b7a0ba,#c70000,#a1443a,#f21107,#515d52' => t('Shiny Tomato'),
'#18583d,#1b5f42,#34775a,#52bf90,#2d2d2d' => t('Teal Top'),
));
?>Dieser Eintrag enthält ein fortlaufendes Array aus vordefinierten Farbschemata. Jeder Eintag muss aus 5 Farben bestehen, die, wie oben zu sehen, formatiert sind, und dazu einen Titel.
Das erste Schema wird dabei als Referenz genutzt und muss mit den Farben in den Standardbildern des Themes und dessen Stylesheet möglichst genau übereinstimmen. Andernfalls werden die Farben möglicherweise nicht so dargestellt, wie es der User sich gedacht hat. Besuchen sie die die Sektion 'Stylesheets', um genauere Informationen darüber zu bekommen, wie die Farben berechnet werden.
Zu kopierenden Bilder
<?php
array('copy' => array(
'images/menu-collapsed.gif',
'images/menu-expanded.gif',
'images/menu-leaf.gif',
));
?>Dieses Array enthält eine Liste von Bildern, welche nicht verändert werden sollte. Sie werden ins Verzeichnis der generierten Bildes und Stylesheets kopiert.
Füllen von Bereichen und Verläufe
Um das Bild zu färben erzeugen wir ein Zielbild, dass die selbe Größe wie das Basisbild hat, und zeichnen farbige Bereiche und einen Farbverlauf. Um maximale Flexibilität zu erreichen, werden die Positionen dieser Bereiche durch Angabe ihrer Koordinaten definiert, und zwar nach dem Schema (x, y, Breite, Höhe):
<?php
array('gradient' => array(0, 37, 760, 121));
?>Sie können einen vertikalen zweifarbigen Verlauf festlegen.
<?php
array('fill' => array(
'base' => array(0, 0, 760, 568),
'link' => array(107, 533, 41, 23),
));
?>Sie können Bereiche für jede der Farben einer Palette festlegen. Der Bereich wird dann mit der gewählten Farbe gefüllt. Verfügbare Farben sind 'base', 'link', 'top', 'bottom' und 'text'.
Bildausschnitte
Als nächstes müssen Sie die Bereiche ihres Basisbildes definieren, die für jedes der einzelnen Teilbilder ausgeschnitten werden müssen. Das machen Sie, indem sie wieder Koordinaten definieren mit (x, y, Breite, Höhe) zusammen mit dem Dateinamen des Bildes, wie er im Stylesheet benutzt wurde. Das Logo und Screenshots sind Spezialfälle und bekommen immer den gleichen Dateinamen. Der Screenshot wird auf 150x90 Pixel verkleinert.
<?php
array('slices' => array(
'images/body.png' => array(0, 37, 1, 280),
'images/bg-bar.png' => array(202, 530, 76, 14),
'images/bg-bar-white.png' => array(202, 506, 76, 14),
'images/bg-tab.png' => array(107, 533, 41, 23),
'images/bg-navigation.png' => array(0, 0, 7, 37),
'images/bg-content-left.png' => array(40, 117, 50, 352),
'images/bg-content-right.png' => array(510, 117, 50, 352),
'images/bg-content.png' => array(299, 117, 7, 200),
'images/bg-navigation-item.png' => array(32, 37, 17, 12),
'images/bg-navigation-item-hover.png' => array(54, 37, 17, 12),
'images/gradient-inner.png' => array(646, 307, 112, 42),
'logo.png' => array(622, 51, 64, 73),
'screenshot.png' => array(0, 37, 400, 240),
));
?>Dateien
Zum Schluss müssen Sie noch das Verzeichnis angeben, in dem sich die Dateien für Ihr Theme befinden. Sie benötigen ein Bild und ein Stylesheet für die Vorschau, ebenso wie das Basisbild*:
<?php
array(
'preview_image' => 'color/preview.png',
'preview_css' => 'color/preview.css',
'base_image' => 'color/base.png',
);
?>* Seit Drupal 6 benötigt Color.module base_image nicht länger. Das heißt, es ist möglich, das Modul ohne Bilder zu verwenden.
Stylesheets
Das Color.module liest die Datei style.css eines Themes, genauso wie alle anderen Styles, die mit @import-Ausdrücken importiert werden und erstellt eine neue style.css. Dies wird die Farben im CSS ändern, wobei eine der gewählten Farbpaletten als Referenz genutzt wird. Dies ist abhängig vom Kontext:
* Links: Die Farbe 'link' wird für Regeln beutzt, die auf a-Elemente zutreffen.
* Text: Die Farbe 'text' wird für Regeln beutzt, die in color erscheinen.
* Base: Die Farbe 'base' wird für alles andere benutzt.
Wenn allerdings eine Farbe im Stylesheet genau der Referenzfarbe entspricht, dann wird der Kotext ignoriert, und die entsprechende Ersatzfarbe wird stattdessen benutzt.
Stellen Sie sich beispielsweise vor, Ihre Referenzfarbe ist standardmäßig dunkelblau, aber Sie änderen Sie auf rot. Ihr standardmäßiges Stylesheet enthält sowohl hellblau als auch gräuliches violett, beide relativ zu dieser Referenzfarbe.
Die resultierenden Farben (malve und braun) sind ähnlich unterschiedlich zu rot, wie es die Originalfarben zu blau waren. in technischen Begriffen ausgedrückt: Der relative Unterschied in Farbton, Sättigung und Luminanz wurde beibehalten.
Wenn Sie finden, das Color.module die falschen Referenzfarben beutzt, versuchen Sie, die einzelnen Teile auch in einzelne CSS-Regeln zu trennen, jedes mit seiner eigenen Selektor { ... } Sektion, damit es keine Verwirrung mit dem Kontext gibt.
Beachten Sie, dass, wenn Sie ihr Stylesheet ädern, nachdem sie das Farbschema verändert haben, es nötig ist, das Farbschema erneut zu senden, um die farblich geänderte Version regenerieren.
Wenn Sie wünschen, dass bestimmte Farben im Stylesheet nicht geändert werden, sollten Sie ihr CSS unterhalb dieser Markierung einfügen:
/*******************************************************************
* Color Module: Don't touch *
*******************************************************************/Sie können diese Markierung nur einmal in ihrer Datei style.css benutzen. Das funktioniert auch global. Wenn Sie die Makierung also innerhalb eines importierten Stylesheets benutzen, werden alle Farben unterhalb des @import-Ausdruckt ebenfalls nicht angerührt.
Die Farben passend machen
Es ist wichtig, dass die generierten Bilder mit den gewechselten Farben in dem generierten Stylesheet übereinstimmen. Andernfalls können häßliche Kanten auftreten.
Um dies zu bewerkstelligen, müssen alle Pixel, die in Bereichen liegen, wo sie mit CSS-definierten Farben übereinstimmen sollen, in einfacher Farbe sein.Da wir nicht wissen, wo in unserem Basisbild CSS-definierte Farben erscheinen werden, benutzen wir eine globale Übergangsfarbe, die im ganzen Design die gleiche sein muss.Garlad benutzt hierfür weiß. Beachten Sie, das das Garland Theme z.B. ebenfalls graue und schwarze Pixel enthält, jedoch nur in Bereichen, in denen ausschließlich Bilder als Hintergrund benutzt werden (z.B. im Header). Andere Farben, als weiß, schwarz und grau genauso gut geeignet.
<?php
array('blend_target' => '#ffffff');
?>Masochisten können einen Blick auf Color.module's Inneres werfen, genauer gesagt auf die Funktion _color_shift(), wenn sie am Farbton interessiert sind.
Änderungen an PHPTemplate
Zu guter letzt müssen sie Color.module in ihr System integrieren. Wir werden hierfür ein PHPTemplate Theme als Beispiel beutzten, aber es funktioniert genauso mit anderen Engines.
Fügen Sie folgenden Code in der Datei template.php ihres Themes hinzu (für Drupal 6.x):
<?php
/**
* Override or insert PHPTemplate variables into the templates.
*/
function phptemplate_preprocess_page(&$vars) {
// Hook into color.module
if (module_exists('color')) {
_color_page_alter($vars);
}
}
?>Für Drupal 5.x benötigen Sie den folgenden Code:
<?php
/**
* Override or insert PHPTemplate variables into the templates.
*/
function _phptemplate_variables($hook, $vars) {
if ($hook == 'page') {
// Hook into color.module
if (module_exists('color')) {
_color_page_alter($vars);
}
return $vars;
}
return array();
}
?>Dies wird dem Modul erlauben, das Logo, die Stylesheets und Screenshots ihres Themes zu überschreiben. Wenn Sie weitere Änderungen an _phptemplate_variables machen, müssen Sie diese in dem Code ergänzen.
- Anmelden oder Registrieren um Kommentare zu schreiben
Neue Kommentare
vor 2 Tagen 8 Stunden
vor 4 Tagen 2 Stunden
vor 4 Tagen 3 Stunden
vor 4 Tagen 7 Stunden
vor 4 Tagen 14 Stunden
vor 6 Tagen 3 Stunden
vor 1 Woche 5 Stunden
vor 1 Woche 7 Stunden
vor 1 Woche 3 Tagen
vor 1 Woche 3 Tagen