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

CSS Template

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 :

#header, #content, #footer {
  width:/*site_width*//*banner_image.width*/100%/*banner_image.width*//*site_width*/;
  margin:auto;
}

#header {
  background-image:/*banner_image*/none/*banner_image*/;
  height:/*banner_image.height*/auto/*banner_image.height*/;
}

.site-name {
  font-family:/*site_name_font*/Verdana,Arial,Helvetica,sans-serif/*site_name_font*/;
  font-size:/*site_name_font_size*/2em/*site_name_font_size*/;
}

.site-name a, .site-name a:link, .site-name a:visited, .site-name a:hover {
  color:/*site_name_color*/#FFFFFF/*site_name_color*/;
}

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.