alainericgauthier.com

Drupal 7 et HTML5 -- Les fichiers .css et .js

Cette série d'articles montre comment créer un thème de toute pièce pour Drupal 7 qui donnera du code en HTML5.

Dans l'article précédent...

Dans la construction de notre thème, nous avons installé deux modules et nous avons ensuite créé un fichier .info. Dans cet article nous allons y joindre un fichier CSS et un fichier Javascript, ce qui va nous permettre d'avoir un thème un peu moins générique.

Plus on a de fichiers, plus on rit...

Nous allons tout d'abord indiquer à Drupal que nous voulons ajouter un fichier CSS et un fichier Javascript à notre thème. Pour ce faire nous devons simplement ajouter deux lignes au fichier minimi.info.

 stylesheets[all][] = normalize.css
 scripts[] = minimi.js

Il faut ensuite ajouter deux fichiers au dossier minimi qui seront nommés normalize.css et minimi.js. Le fichier CSS se trouve à http://necolas.github.com/normalize.css/, il permet de standardiser l'apparence de tous les éléments d'une page et ce, dans un très grand nombre de navigateurs. Consultez le site pour en savoir plus.

Le fichier minimi.js est très élémentaire pour l'instant, vous pouvez le voir ici. Sa fonction est simplement de faire disparaître la barre latérale lorsqu'on clique sur l'entête de la page.

Plus on a de régions, plus on rit aussi...

Par défaut, Drupal défini un certain nombre de régions. Les régions par défaut sont :

 regions[header] = Header
 regions[highlighted] = Highlighted
 regions[help] = Help
 regions[content] = Content
 regions[sidebar_first] = Left sidebar
 regions[sidebar_second] = Right sidebar
 regions[footer] = Footer

Pour chacune de ces déclarations, Drupal générera un élément <div> et y ajoutera une valeur à l'attribut "id". Par exemple, pour la première déclaration, Drupal génèrera :

<div id="header">

Si vous allez à l'administration des blocs (cliquez sur Structure et ensuite Blocs), une section sera disponible pour y ajouter des blocs et elle sera nommée "Header". Notez que ces chaînes de caractères peuvent être traduites automatiquement par Drupal (si votre installation est dans une langue autre que l'anglais).

Less is more

Pour garder l'esprit minimal de notre thème, nous allons réduire le nombre de régions. Voici donc la liste des régions à ajouter au fichier .info :

 regions[header] = Header
 regions[help] = Help
 regions[content] = Content
 regions[sidebar_first] = Left sidebar
 regions[footer] = Footer

On ajoute les fichiers

Assurez-vous d'avoir fait tous les changements décrits plus haut à votre fichier minimi.info. Téléchargez ensuite les deux fichiers suivants :

Il ne vous reste qu'à déposer ces deux fichiers dans votre dossier minimi au même niveau que le fichier minimi.info

Pour tester le tout, il faut s'assurer d'effacer le cache. Dans la barre d'amnistration, cliquez sur Configuration et dans la page qui vient, cliquez sur Performance. Dans la page qui suit, cliquer sur le bouton "Effacer tous les caches"

Donc...

En résumé, il faut :

  • lier les fichiers .css et .js au fichier .info
  • ajouter un fichier .css
  • ajouter un fichier .js

Si tout s'est bien passé, vous devriez voir apparaître un message d'erreur dans vos pages Drupal. Ce message devrait faire référence à page.tpl.php. Dans le prochain article, nous verrons pourquoi ce problème et comment l'éliminer.

Vous voulez en apprendre encore plus?

Obtenez le guide Comment créer un thème sous Drupal 7 maintenant.

Je veux ce guide.