Voilà, voilà... Fin de l'aventure...

 

Fermeture de kolossaldrupal.org dans...


Bonjour tout le monde,

Drupal évolue, les versions changent et Kolossaldrupal.org était essentiellement consacré à la version 6 de Drupal.

Autant dire que les infos présentées ici commencent à dater...

Faute de temps, je ne peux plus garder le site Kolossaldrupal à jour...

Je vous aurais bien proposé de reprendre le flambeau mais... c'est tellement simple de nos jours de se faire son propre site à soi...Pourquoi s'embêter alors ? :-)

Ce site restera donc en l'état, tel qu'il était en 2011...

Ah la la ! Cela ne nous rajeunit pas !

Manuel Vila - Avril 2016

Intégration du module Color

Traduction de la page http://drupal.org/node/108459
publiée / actualisée le 13 Février 2011 sur drupal.org


Le module Color permet à l'administrateur de modifier totalement les couleurs d'un thème. En choisissant une palette de 5 couleurs (soit manuellement soit à partir d'un ensemble), vous pouvez modifier l'ensemble des couleurs d'un thème.

Le module peut modifier les feuilles de style et les images. Mais pour cela, le thème doit fournir des hooks et il doit être conçu de façon à permettre ces modifications.

Ce qui suit explique les bases de la création d'un thème « colorisable ».

Conception

Il est important de comprendre, qu'étant donné la façon dont procède le module Color, tout thème ne peut être « colorisé ».

Prenons d'abord une image transparente du design (la base), qui contient tout sauf le fond. Posons ensuite cette image sur un fond de couleur, pour obtenir les différentes versions colorées. Pour finir, découpons cette image composite en plusieurs petites images qui seront sauvegardées séparément.

Modifions également la feuille de style en basant ses couleurs sur celles définies précédemment. Le module change les couleurs en utilisant la palette comme référence. Les couleurs qui ne figurent pas en tant que telles dans la palette sont ajustées vers la couleur la plus proche de la palette (pour les liens, les textes ou les couleurs de fond).

Ainsi, la maquette PhotoShop sera composée d'un fichier comportant plusieurs couches empilées les unes sur les autres, les colorées en bas de la pile, les autres mélangées au-dessus. Lorsque vous sauvegarderez l'image de base, vous fusionnerez toutes les couches ensemble, tout en conservant les couches colorées invisibles.

Jetez un œil au fichier Garland base.png pour voir un exemple (ouvrez-le dans un éditeur d'images pour voir les transparences). Il existe une vidéo qui montre comment créer votre propre base.png avec Photoshop.

Tous les fichiers créés de la sorte sont enregistrés dans le dossier /file/css et sont utilisés à la place des images par défaut. Ce qui signifie qu'un thème colorisable, dans sa configuration de couleur par défaut, doit fonctionner dès l'installation, sans besoin du module Color.

En pratique

Prenons Garland en exemple. Les fichiers les plus importants se trouvent dans le sous-dossier themes/garland/color :

base.png
Contient le design de base du thème, composé et découpé en images.
color.inc
Ce fichier contient tous les paramètres requis pour colorer le thème. Voir ci-dessous.
preview.css
La feuille de style utilisée pour générer l'aperçu dans le modificateur de couleur
preview.png
L'image utilisée utilisée pour générer l'aperçu dans le modificateur de couleur

La présence de color/color.inc fait apparaître le sélecteur de couleur dans la page « Paramètres » du thème. C'est un fichier PHP qui contient un tableau $info avec les valeurs suivantes :

Schemes

<?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'),
  ));
?>

Ce code déclare un tableau de couleurs prédéfinies. Chaque entrée doit avoir 5 couleurs (qui sont, dans l'ordre, la couleur de base, la couleur des liens, le top header, le bottom header et la couleur du texte), formatées comme ci-dessus, et un titre.

La première entrée du tableau est utilisée comme référence et doit correspondre aux couleurs utilisées dans les images par défaut du thème et dans la feuille de style. Sinon, les couleurs finales pourraient différer de celles voulues par l'utilisateur. Reportez-vous à la section « feuilles de style » pour plus d'informations sur la façon dont les couleurs sont calculées.

Images à copier


<?php
  
array('copy' => array(
    
'images/menu-collapsed.gif',
    
'images/menu-expanded.gif',
    
'images/menu-leaf.gif',
  ));
?>

Ce tableau contient la liste des images qui ne doivent pas être modifiées. Elles sont copiées vers l'emplacement des images et feuilles de style générées.

Remplissage des zones et des dégradés

Pour colorier l'image, nous créons une image cible aux dimensions égales à celles de l'image de base, et dessinons des zones colorées et un dégradé. Pour une souplesse totale, l'emplacement de ces zones est défini en déclarant leurs coordonées avec (x,y,largeur,hauteur) :

<?php
  
array('gradient' => array(037760121));
?>

Vous pouvez indiquer un dégradé vertical à deux couleurs.


<?php
  
array('fill' => array(
    
'base' => array(00760568),
    
'link' => array(1075334123),
  ));
?>

Vous pouvez indiquer des regions pour chaque palette de couleurs. La région sera remplie avec la couleur sélectionnée; Les couleurs disponibles sont « base », « link », « top », « bottom » et « text ».

Images découpées

Ensuite vous devez définir les zones de l'image de base qui « contiendront » les images découpées. Spécifiez des coordonnées (x, y, width, height) en regard du nom du fichier image, tel qu'indiqué dans la feuille de style. Le logo et la copie d'écran sont spécifiques et portent toujours le même nom. La copie d'écran sera redimensionnée à 150x90 pixels.


<?php
  
array('slices' => array(
    
'images/body.png'                      => array(0371280),
    
'images/bg-bar.png'                    => array(2025307614),
    
'images/bg-bar-white.png'              => array(2025067614),
    
'images/bg-tab.png'                    => array(1075334123),
    
'images/bg-navigation.png'             => array(00737),
    
'images/bg-content-left.png'           => array(4011750352),
    
'images/bg-content-right.png'          => array(51011750352),
    
'images/bg-content.png'                => array(2991177200),
    
'images/bg-navigation-item.png'        => array(32371712),
    
'images/bg-navigation-item-hover.png'  => array(54371712),
    
'images/gradient-inner.png'            => array(64630711242),
    
'logo.png'                             => array(622516473),
    
'screenshot.png'                       => array(037400240),
  ));
?>


Fichiers
Enfin, vous devez spécifier l'emplacement des fichiers de votre thème. Vous avez besoin d'une image et d'une feuille de style pour l'aperçu, ainsi que d'une image de base* :


<?php
array(
  
'preview_image' => 'color/preview.png',
  
'preview_css' => 'color/preview.css',
  
'base_image' => 'color/base.png',
);
?>

* Avec Drupal 6, le module Color n'a plus besoin de l'image de base, ce qui signifie qu'il est possible d'utiliser le module sans images.

Feuilles de style

Le module Color lira la feuille style.css, ainsi que tout autre style importé avec l'instruction @import, et créera un nouveau fichier style.css. Il changera les couleurs dans la feuille CSS en utilisant l'une des palettes de couleurs comme référence, selon le contexte : 

  • Links : la couleur « link » est utilisée, pour les éléments a
  • Text : la couleur « text » est utilisée, pour les éléments color:
  • Base : la couleur « base » est utilisée pour tout le reste.

Cependant, si une couleur de la feuille de style correspond exactement à une couleur de référence, le contexte sera ignoré, et la couleur de remplacement sera utilisée à la place.

However, if a color in the stylesheet matches one of the reference colors exactly, the context will be ignored, and the matching replacement color will be used instead.

Par exemple, supposons que votre couleur de référence par défaut soit bleu foncé, mais vous la changez pour le rouge.

Votre feuille de style par défaut contient bleu clair et gris pourpre, relativement à cette couleur de référence.

Les couleurs résultantes (mauve et marron) seront aussi différentes du rouge que les couleurs d'origine l'étaient du bleu. En termes techniques : les différences relatives de teinte, saturation et luminance seront préservées.

Si vous pensez que le module Color utilise une mauvaise référence de couleur, essayez de séparer les différentes parties dans différentes règles CSS, chacune dans leur propre selector{ … } , ainsi il n'y aura pas de confusion due au contexte.

Notez que si vous éditez votre feuille de style après avoir défini le schéma de couleurs, vous devrez le resoumettre pour générer la version « couleurs décalées ».

Note that if you edit your stylesheet after changing the color scheme, you must resubmit the color scheme to regenerate the color-shifted version.

Si vous ne voulez pas que certaines couleurs soient modifiées, vous devez placer leurs CSS après ce marqueur :

/*******************************************************************
* Color Module: Don't touch *
*******************************************************************/

Vous ne pouvez utiliser ce marqueur qu'une seule fois dans votre fichier style.css. Il s'applique globalement, aussi, si vous l'utilisez à l'intérieur d'une feuille de style importée, toutes les couleurs après l'instruction @import seront ignorées.

You can only use this marker once in your style.css file. It applies globally, so if you use it inside an imported stylesheet, all colors below the @import statement will be left alone too.

Faire correspondre les couleurs

Il est important que les images générées correspondent avec les couleurs décalées de la feuille de style générée. Autrement, de vilains effets de bords apparaîtront.

Pour cela, les pixels de l'image de base doivent tous être d'une seule couleur dans les zones où ils doivent correspondre aux couleurs définies dans le CSS. Comme nous ignorons où les couleurs définies du CSS apparaitront dans l'image de base, nous utilisons une couleur de « mixage » globale à tout le thème. Garland utilise le blanc. Notez que Garland inclut des pixels gris et noirs, mais seulement dans des zones utilisant des images en fond (par exemple : l'en-tête). En plus du blanc, le noir ou le gris peuvent faire l'affaire.

<?php
  
array('blend_target' => '#ffffff');
?>

Les masochistes peuvent aller jeter un œil dans les tripes du module Color, notamment dans la fonction _color_shift(), s'ils sont intéressés sur le pourquoi du comment de son fonctionnement.

Modification de PHPTemplate

Enfin, vous avez besoin de « raccrocher » (hook) le module Color à votre thème. Nous utiliserons un thème PHPTemplate à titre d'exemple, mais cela marche également pour les autres moteurs.

Dans le fichier template.php de votre thème, ajoutez le bout de code suivant (Drupal 6.x uniquement) :

<?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);
  }
}
?>

Avec Drupal 5.x vous devrez ajouter ce code-ci :

<?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();
}
?>

Cela permet au module de surcharger le logo de votre thème, sa feuille de style et sa copie d'écran. Si vous effectuez d'autres modifications dans les variables _phptemplate_, vous devrez les inclure dans ce code.