Basic Theme Help

Soumis par kolossaldrupal le mer, 15/04/2009 - 06:00
Date du document original en anglais : 26 Février 2009 – 03h56 http://drupal.org/node/39451

Objectifs d'un thème

Améliorer le thème de votre site peut vous aider à accomplir de nombreux objectifs. Parmi lesquels :

  • Amener du trafic vers votre site,
  • Mettre en évidence les produits en vente sur votre site,
  • Fournir des informations aux visiteurs de votre site,
  • Aider les visiteurs de votre site à coopérer les uns avec les autres.

Le but de ces manuels sur les thèmes est de vous aider à réaliser les objectifs de développement suivants :

  • Réaliser des petites modifications de conception en évitant les problèmes de compatibilité des navigateurs
  • Mettre en œuvre des designers wireframes dans votre thème
  • Personnaliser un thème de base
  • Créer un nouveau thème par l'adaptation d'un thème existant.

Contribuer à l'amélioration de l'aide sur les thèmes Drupal

Dans une récente enquête sur l'administration de Drupal, les utilisateurs ont répondu que la conception de thèmes leur semblait la tâche la plus difficile. Nous avons mené une série d'entretiens pour en savoir plus sur les concepteurs de thèmes, les objectifs et les tâches qui doivent être remplis lors de l'élaboration d'un thème.

Tâches de base pour les thèmes Drupal

Quelque soit le thème sur lequel vous choisirez de travailler, vous aurez besoin de connaître ces quelques éléments de base :

  • Trouver et ouvrir une feuille de style en cascade (CSS) pour votre thème,
  • Copier et coller du code CSS,
  • Apprendre les attributs CSS dans votre thème,

    Il est recommandé d'utiliser le navigateur Firefox avec la barre d'outils des développeurs et les extensions affichage du code source formaté.

    Nous vous recommandons d'utiliser la norme CSS ID names, tel que recommandé par Andy Clarke et Eric Meyer.
  • Modification des couleurs
  • L'utilisation d'un autre thème. Par exemple, copiez le thème CivicSpace Admin dans le thème de votre site.
  • Construction d'une nouvelle mise en page sur un thème existant. Par exemple, changer le nombre de colonnes, en-tête et pied de positions, mise ne page fluide par opposition à mise en page statique.

Tâches de conception difficiles

Nous avons identifié un certain nombre de difficultés qui nécessitent des explications. Certaines tâches sont à la fois élémentaires et difficiles et doivent être documentées pour en expliquer les difficultés :

  • Élaboration d'une mise en page avec les feuilles de style CSS,
  • Choix d'un bon thème de base pour débuter

    Nous avons ajouté des possibilités de classement au module projet qui permettent un classement des thèmes.
  • Modification d'un thème existant,
  • Apprentissage des classes et ID CSS,
    Il est recommandé d'utiliser le navigateur Firefox avec la barre de développement et l'extension «vue de code-source formaté». Nous vous recommandons également d'utiliser la norme d'Eric Meyer concernant le nommage des classes CSS.
  • Comment ajouter du padding ou margins aux classes,
  • La suppression de texte et d'images dans le thème User Interface. Par exemple, supprimer le Soumis par, ce qui peut poser ou pas problème,
  • Comment arranger les formulaires qui sont trop complexes,
  • Corriger le code xHTML des modules qui causent des problèmes d'affichage.

    Un rapport d'erreur devrait être effectué pour ces modules. En incluant une copie d'écran, son apparence dans le thème de base, tel que Box Gray, en fournissant un extrait du code xHTML incriminé et en indiquant à quoi le code xHTML devrait ressembler.
  • Travailler avec des variables PHP,
  • Abandon des largeurs d'affichage fixes et travail avec les conteneurs,
  • Travail avec des designs pleine page complexes ou de taille variable qui requièrent de nombreux max-width ou min-width bien conçus.
  • Insertion d'effets graphiques qui fonctionnent aussi avec Internet Explorer,
  • Compatibilité avec Firefox et Internet Explorer,
  • Conception d'un thème à partir d'un brouillon.

Quelques utilitaires pour la conception et l'analyse des thèmes

Firebug http://addons.mozilla.org/en-US/firefox/addon/1843

  • Pour tout développement, je recommande Firebug comme étant l'une, si ce n'est la plus utile, des extensions de Firefox. En cliquant sur un élément de la page vous pouvez inspecter ses propriétés CSS et connaître quel fichier CSS est utilisé lorsque vos sélecteur CSS ont été surchargés.
  • Il dispose également d'une console pour le développement JavaScript, les appels AJAX et bien d'autres choses encore dont vous pourriez avoir besoin.

    • Dragonfly, pour les utilisateurs d'Opera : http://www.opera.com/products/dragonfly/