Traduction de la page http://drupal.org/node/221905
publiée / actualisée le 17 Mars 2011 sur drupal.org
Un certain nombre d'éléments affichés par le thème peuvent être activés ou désactivés dans la page de configuration de thème.
Vous trouverez ces paramètres dans Administer > Appearance > Settings > themeName. Par exemple, le slogan du site peut être supprimé en décochant la case Site slogan de cette page.
[inline:features_enabled_7.png]L'affichage de ces cases à cocher dépend des paramètres du fichier .info. Ils sont déclarés avec la clé features suivie de double crochets vides et du paramètre proprement dit, par exemple, features[] = le paramètre. Si aucun paramètre n'est déclaré, les valeurs suivantes sont utilisées par défaut :
Drupal 7 enlève mission et recherche comme paramètres de thèmes (ils peuvent désormais être créés et contrôlés en tant que blocs) et ajoute un bouton radio pour User verification status in comments.
Pour ne désactiver que quelques paramètres, il suffit d'ajouter ceux que vous souhaitez dans le fichier .info. Ne déclarer que les paramètres nécessaires pour votre thème désactivera les autres. Certains paramètres activeront également des champs de formulaires associés. Par exemple, logo activera un champ d'upload pour l'image.
Quelques remarques :
Le contenu du fichier .info est mis en cache dans la base de données, sa modification ne sera pas remarquée par Drupal (ne pas confondre le cache avec le registre des thèmes http://www.kolossaldrupal.org/docs/la-surcharge-themes#theme-registry).
Pour vider le cache, faites l'une des opérations suivantes :
Dans Drupal 6, les paramètres sont situés dans Administrer » Construction du site » Thèmes » Nom du thème
Voici les valeurs par défaut dans Drupal 6 :
Traduction de la page http://drupal.org/node/177868
publiée/actualisée le 11 Mars 2011 sur Drupal.org
Drupal 6
Dans la partie Administration de Drupal, chaque thème dispose de sa propre page de paramétrage dans Administration » Construction du site > Thèmes > Paramètres puis Nom du thème (ou admin/build/themes/settings/themeName). Et cette page affiche un formulaire avec des paramètres standards des thèmes, tels que « Paramètres du logo > et « Paramètres de l'icône >.
Drupal 7
Drupal 7 utilise admin/appearance//settings/themeName.
Dans Drupal 6 et au-delà, les créateurs de thèmes peuvent désormais personnaliser cette page en ajoutant des paramètres supplémentaires. Dans Drupal 5, les créateurs de thèmes doivent avoir installé le module Theme Settings API http://drupal.org/project/themesettingsapi (5.x-2.1 ou postérieurs) avant de pouvoir utiliser la méthode qui suit.
Tout d'abord, créez un fichier theme-settings.php dans le dossier de votre thème et déclarez-y les fonctions themeName_settings() ou themeEngineName_settings(). Un nom de fonction sur le modèle themeEngineName_settings() est déconseillé car il peut provoquer des erreurs fatales si deux fonctions avec le même nom sont déclarées dans votre installation Drupal. La fonction doit utiliser les API Forms pour créer des widgets supplémentaires.
Par exemple : pour ajouter des paramètres au thème Garland, une fonction garland_settings() ou phptemplate_settings() sera placée dans le fichier theme-settings.php du thème.
Modifier Garland ou Minnelli directement est fortement déconseillé car ces deux thèmes sont utilisés pendant l'installation de Drupal et pendant ses mises à jours.
Si un utilisateur a précédemment sauvegardé les paramètres du thème, les valeurs sauvegardées seront passées à cette fonction via le paramètre $saved_settings. Le widget à ajouter au formulaire sera retourné en tant que tableau de l'API Forms.
Les commentaires de l'exemple suivant explique les détails :
<?php
// Exemple de fichier themes/garland/theme-settings.php
/**
* Implémentation de la fonction THEMEHOOK_settings()
*
* @param $saved_settings
* array An array of saved settings for this theme.
* @return
* array A form array.
*/
function phptemplate_settings($saved_settings) {
/*
* Les valeurs par défaut pour les variables de thème. Assurez-vous que $defaults correspondent
* exactement au $defaults du fichier template.php.
*/
$defaults = array(
'garland_happy' => 1,
'garland_shoes' => 0,
);
// Fusionner les variables sauvegardées et les valeurs par défaut
$settings = array_merge($defaults, $saved_settings);
// Créer le widget en utilisant Forms API
$form['garland_happy'] = array(
'#type' => 'checkbox',
'#title' => t('Get happy'),
'#default_value' => $settings['garland_happy'],
);
$form['garland_shoes'] = array(
'#type' => 'checkbox',
'#title' => t('Use ruby red slippers'),
'#default_value' => $settings['garland_shoes'],
);
// Renvoyer le widget ajouté
return $form;
}
?>
Notez que les auteurs de thèmes peuvent créer des formulaires complexes et dynamiques en utilisant l'API Forms (auto-complétion, zones de champs extensibles) et la librairie jQuery.
Pour récupérer les paramètres dans les fichiers template.php ou .tpl.php de votre thème, il suffit d'utiliser la fonction theme_get_setting('varname'). Reportez-vous à l'API Drupal pour plus d'informations : http://api.drupal.org/api/6/function/theme_get_setting
Par exemple :
<?php
$happy = theme_get_setting('garland_happy');
?>
ou dans Drupal 7 :
<?php
$vars['happy'] = theme_get_setting('garland_happy');
?>Puisque nous ne pouvons garantir que chaque utilisateur se rendra dans la page de paramétrage du thème (Administration > Construction du site > Thèmes > Paramètres puis Nom du thème ou URL : admin/build/themes/settings/themeName), nous devons nous assurer que les valeurs par défaut de notre thème seront initialisées.
Ces variables ne sont pas initialisées tant que la page Administration > Construction du site > Thèmes > Paramètres > Nom du thème (ou admin/build/themes/settings/themeName) n'a pas été validée une première fois, nous devons donc vérifier dans notre fichier template.php si les variables sont définies ou pas.
Si elles ne le sont pas, nous devons leur affecter une valeur par défaut. Pour cela, nous prenons une des variables et vérifions si sa valeur est null. Si oui, nous sauvegardons les valeurs par défaut en utilisant variable_set() et nous forçons le rafraichissement des paramètres internes de Drupal en utilisant theme_get_setting('', TRUE).
Ajoutez le code suivant au début de votre fichier template.php :
<?php
/*
* Initialize theme settings
*/
if (is_null(theme_get_setting('garland_happy'))) { // <-- change this line
global $theme_key;
/*
* The default values for the theme variables. Make sure $defaults exactly
* matches the $defaults in the theme-settings.php file.
*/
$defaults = array( // <-- change this array
'garland_happy' => 1,
'garland_shoes' => 0,
);
// Get default theme settings.
$settings = theme_get_settings($theme_key);
// Don't save the toggle_node_info_ variables.
if (module_exists('node')) {
foreach (node_get_types() as $type => $name) {
unset($settings['toggle_node_info_' . $type]);
}
}
// Save default theme settings.
variable_set(
str_replace('/', '_', 'theme_'. $theme_key .'_settings'),
array_merge($defaults, $settings)
);
// Force refresh of Drupal internals.
theme_get_setting('', TRUE);
}
?>
Notez que le nom de la variable « garland_happy > dans la première ligne du code doit être remplacée avec le nom de variable de votre thème personnalisé et que le tableau $defaults devra être copié depuis votre fichier theme-settings.php.
Après avoir publié la version 1.0 de votre thème, vous aurez peut-être envie d'ajouter d'autres paramètres personnalisés dans la version 2.0. Le processus est le plus souvent simple. Mais attention au code d'initialisation dans la troisième étape :
<?phpif (is_null(theme_get_setting('garland_slippers'))) {?>Cela garantira que les paramètres par défaut de votre nouveau thème personnalisé seront ajoutés aux valeurs sauvegardées des paramètres personnalisés du précédent thème.
Dans Drupal 7, beaucoup plus de souplesse est donnée aux thèmes pour qu'ils modifient les paramètres de thème. Dans un fichier theme-settings.php, un thème doit maintenant utiliser une fonction THEMENAME_form_system_theme_settings_alter(&$form, $form_state). Elle donne aux thèmes la même puissance que les modules qui utilisent hook_form_system_theme_settings_alter(). Consultez le « Form API Quickstart Guide » et le « Forms API Reference » sur http://api.drupal.org/api/7, ainsi que les docs hook_form_FORM_ID_alter() pour assimiler la souplesse de Forms API. Notez que les themes ne peuvent plus utiliser le phptemplate_prefix d'une fonction, vous devrez utiliser le nom réel de votre thème en guise de prefixe.
Voici un exemple pour un thème « foo » auquel vous voulez ajouter un champ texte dont la valeur par défaut est « blue bikeshed »:
<?php
function foo_form_system_theme_settings_alter(&$form, $form_state) {
$form['caberet_example'] = array(
'#type' => 'textfield',
'#title' => t('Widget'),
'#default_value' => theme_get_setting('foo_example'),
'#description' => t("Place this text in the widget spot on your site."),
);
}
?>Pour initialiser la valeur par défaut d'un élément de formulaire que vous ajoutez, vous devrez ajouter une simple ligne à votre fichier .info : settings[SETTING_NAME] = DEFAULT_VALUE. Pour ce thème foo, vous éditerez le fichier foo.info et ajouterez cette ligne :
Vous pourrez retrouver la valeur initialisée par l'utilisateur dans n'importe quel fichier php de votre thème en appelant :
<?php
$foo_example = theme_get_setting('foo_example');
?>
Traduction de la page http://drupal.org/node/864586
publiée / actualisée le 28 Janvier 2011 sur drupal.org
Le module CSS Template permet aux concepteurs de thèmes d'ajouter aux fichiers CSS de leurs thèmes des paramètres modifiables par l'utilisateur. Ce module reposait sur le module Color.
Pour qu'un thème puisse utiliser CSS Template, l'auteur doit déclarer le fichier de configuration css_template/css_template.inc dans le dossier du thème. Un exemple de css_template.inc montrant tous les types de variables disponibles pourrait être :
<?php
$info = array(
'templates' => array(
'css_template_demo.css',
),
'variables' => array(
'site_width' => array(
'type' => 'length',
'title' => 'Site Width',
),
'banner_image' => array(
'type' => 'image',
'title' => 'Banner Image',
'maximum_dimensions' => '1200x800',
'minimum_dimensions' => '600x100',
),
'site_name_font' => array(
'type' => 'options',
'title' => 'Site Name Font',
'options' => array(
'Verdana,Arial,Helvetica,sans-serif' => 'Sans-serif',
'Georgia,"Times New Roman",serif' => 'Serif',
),
),
'site_name_font_size' => array(
'type' => 'length',
'title' => 'Site Name Font Size',
),
'site_name_color' => array(
'type' => 'color',
'title' => 'Site Name Color',
),
),
);
?>Ces variables seront affichées sur la page de configuration du thème. Une fois paramétrées, les fichiers CSS du thème déclarés comme gabarits dans le fichier css_template.inc seront actualisés avec les valeurs indiquées. Pour que cette mise à jour soit possible, des marqueurs adéquats doivent être insérés dans les fichiers CSS, sous forme de commentaires. Par exemple :
Ces marqueurs de variables doivent toujours aller par deux, le contenu intérieur étant la valeur par défaut. Les paires de marqueurs peuvent également être imbriquées, les marqueurs intérieurs n'étant évalués que si les parents n'ont pas de valeur dans la page de configuration du thème.
Les variables de type Image mettent également leurs propriétés "width" et "height" à disposition, comme indiqué dans l'exemple ci-dessus.
Ces exemples sont extraits du thème de démonstration CSS Template : http://drupal.org/project/css_template_demo.
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 ».

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.
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(0, 37, 760, 121));
?>Vous pouvez indiquer un dégradé vertical à deux couleurs.
<?php
array('fill' => array(
'base' => array(0, 0, 760, 568),
'link' => array(107, 533, 41, 23),
));
?>
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(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),
));
?>
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 :
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 :
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.
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.
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.