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

Créer un thème Drupal avec des CSS, et rien d'autre

Traduction de la page http://drupal.org/node/394612
publiée / actualisée le 11 Mars 2011 sur drupal.org


Dans Drupal 6 et Drupal 7, plusieurs améliorations du core facilitent la tâche des concepteurs de thème qui travaillent en CSS et ne touchent pas au code PHP.

Le thème Stark a été créé pour aider les concepteurs à connaître le code xhtml généré par Drupal, il fait partie du core de Drupal 7. Les concepteurs de thèmes peuvent maintenant réaliser de superbes thèmes uniquement avec des CSS.

Ce tutoriel vous montrera comment créer, en quelques étapes simples, votre propre thème Drupal 6 ou 7 à base de CSS.

Etape n° 1 : créer le dossier du thème et le fichier .info

La première étape dans la réalisation d'un thème est de créer le dossier où il sera enregistré, et créer le fichier .info pour informer Drupal de son existence.

Pour créer le dossier :

  1. Créez ce dossier dans le dossier /sites/all/themes
  2. Nommez-le votretheme, tout en minuscules

Pour créer le fichier .info

  1. Creéz un document dans un éditeur de texte et collez-y les lignes suivantes (en les modifiant là où ce sera nécessaire*) :
  2. name = votretheme
    description = Description de votre thème
    core = 6.x
    engine = phptemplate
    stylesheets[all][] = style.css
    stylesheets[all][] = layout.css
    regions[left] = Left sidebar
    regions[right] = Right sidebar
    regions[content] = Content
    regions[header] = Header
    regions[footer] = Footer

  3. Sauvegardez ce fichier dans le dossier créé précédemment et nommez-le votretheme.info.

* Notes :

Etape 2 : création des feuilles de style

Si vous regardez la feuille de style du thème Stark, layout.css, vous remarquerez qu'elle ne comporte que très peu de règles :

#sidebar-left,
#main,
#sidebar-right {
  float: left;
  display: inline;
  position: relative;
}

#sidebar-left,
#sidebar-right {
  width: 20%;
}

body.one-sidebar #main {
  width: 80%;
}

body.two-sidebars #main {
  width: 60%;
}

body.sidebar-left #main-squeeze {
  margin-left: 20px;
}

body.sidebar-right #main-squeeze {
  margin-right: 20px;
}

body.two-sidebars #main-squeeze {
  margin: 0 20px;
}

Ce code ne fait que mettre en forme le contenu d'une installation Drupal standard. Cela montre à quel point une thème peut être simple. A partir de là, vous pouvez construire votre propre thème de différentes façons. 

La première étape consistera à mettre en place les régions et le graphisme de votre page. Vous le ferez dans votre propre fichier layout.css.

Ensuite, vous pouvez créer un fichier style.css pour les autres styles.

Une pratique habituelle, qui facilite la maintenance du code, est de créer également d'autres fichiers CSS qui porteront notamment sur les éléments HTML, print.css et ie.css. 

Pour chaque fichier CSS supplémentaire que vous créerez, vous devrez ajouter une ligne dans le fichier votretheme.info, au format suivant, après les autres déclarations de styles CSS :

stylesheets[all][] = newstylesheetname.css

Etape 3 : prenez votre pied en di-zaïe-nant !

Si vous créez votre thème avec des CSS... il n'y a plus grand chose d'autre à faire...

Si vous le souhaitez, vous pouvez jeter un œil aux fichiers gabarits du core utilisés dans votre thème. Les principaux fichiers à examiner sont :

  • page.tpl.php (pour la mise en page globale de la page)
  • node.tpl.php (pour tous les nodes ou les principales sections de contenu d'une page)
  • block.tpl.php (pour les blocs, qui sont placés dans des régions)
  • comment.tpl.php (pour tous les commentaires de votre site).

Vous pouvez copier ces gabarits PHP dans le dossier de votre thème, puis vous les modifierez à votre convenance, si vous souhaitez modifier l'organisation du code HTML.