L'esthétique de votre site est normalement quelque chose de personnel. Mais créer son propre thème ( jargon Drupal) n'est pas si évident que cela et demande des compétences qui ne sont pas que du domaine graphique. Il vaut mieux avoir de bonnes bases sur les "langages du web" tels que HTML dans sa version 5 (quand à faire), CSS (version 3), PHP et Javascript.

L'article présenté ici comporte 3 parties :

  1. le thème basique ( niveau débutant).
  2. la personnalisation d'un thème (niveau intermédiaire à confirmé).
  3. la création d'un thème (niveau confirmé à expert).

Mais on peut commencer simplement en utilisant soit un des thèmes fournis avec votre version de Drupal, soit un des nombreux thèmes du site Drupal.org

  1. Le thème de base :

    Installer le thème choisi -mon tout premier thème : Garland- par l'item  "apparence" du menu d'administration.  Indiquez qu'il s'agira du thème par défaut
    Sinon se rendre sur Drupal.org pour copier l'adresse du thème qui vous plait et utiliser le menu "apparence - installer un thème".

Ma première personnalisation d'un thème téléchargé.

  1. Création du sous thème "dhsubthemeGarland"

    Pour créer un sous-thème (ou un thème d'ailleurs), il faut commencer par définir quelques dossiers dans le dossier  "theme"s (qui se trouve dans "site\all" sous drupal de votre installation).
    Commencer par créer le dossier dhsubthemeGarland (le dossier doit porter le nom du thème que vous allez définir).
    Dans ce dossier, placer le fichier dhsubthemeGarland.info dont la fonction est la description du thème (  la localisation des fichiers CSS et template ; la définition des régions ...).
    Son contenu minimum figure ci-dessous.
    Dans cette partie, je réutilise la mise en page du thème, je n'ai pas à définir de région.

name = dhsubthemeGarland
description = sous theme de test pour le design
version= 1.0
core = 7.x
base theme = garland
stylesheets = dhsubthemeGarland.css

Créer le fichier dhsubthemeGarland.css pour les styles CSS par exemple à partir d'une copie du fichier "style.css" du thème "Garland". Le CSS est là pour mettre en forme (mise en page et esthétique) le contenu (HTML  et PHP) d'un document (cf. §3). Ci-dessous figure un contenu minimal pour un affichage en trois colonnes des pages de votre site ( et rien de plus).

@charset "utf-8";
/* CSS Document  : dhgarland.css minimal
  avec une présentation en 3 colonnes  */
#page-wrapper {
width:85%;
margin:0 auto;
}
#header {
}
#content-wrapper
    {
overflow:hidden;
}
#colonne-gauche {
float: left;
width: 24%;
}

#colonne-droite {
float: right;
width: 24%;
}
#center {
margin-right: 25%;
margin-left:  25%;
}

Remarque 1 :
On utilise un # pour définir les id et un "." (dot) pour les classes
dans le code html : class="ma_classe" dans la feuille de style : .ma_classe
                                    id="mon_id"                                                         #mon_id
Plus d'information sur ces notions ( classe - ID - héritage)  sur le site d'alsacreations

Remarque 2 :
Dans le code html associé, l'ordre dans lequel on déclare les colonnes droite ou gauche n'importe pas. Le navigateur affiche le bloc ( ici <div> ...<\div>) à la volée l'un après l'autre. L'attribut float a pour rôle de "casser" le flux par défaut.
"float : left" affiche le bloc le plus à gauche possible."float : right" affiche le bloc le plus à droite possible.
Et, c'est pourquoi, le bloc "#center" s'affiche donc comme si il n'y avait pas de colonne. Il faut donc décaler les marges de chaque coté pour que le texte du "centre" ne se glisse pas sous les colonnes droites et gauches.
Plus d'informations sur le positionnement sur le site d'alsacreations

Remarque 3:
L'utilisation de "display" me parait préférable à "float". Voir le §3.
 

Il faut à présent modifier les fichiers de gabarits ( templates).
Ce sont les fichiers d'extension tpl.php  (exemple "page.tpl.php") qui définissent les'différentes structures de pages ; par exemple page.tpl.php est le gabarit pour l'affichage des pages du site. Ci-dessous, la structure du fichier de gabarit page.tpl.php simplifié au maximum pour ne garder que la structure de la page.

<?php print render($page); ?>
  <div id="page-wrapper">
        <div id="header">
        <!--
le chapeau des pages avec le logo ( en vrac), le titre ( en vrac) et les 2 menus principaux  -->
               <div >
               <?php if ($logo || $site_title): ?>
               <?php if ($title): ?>
                      <div ><strong><a href="<?php print $front_page ?>">
                      <?php if ($logo): ?>
                      <img src="<?php print $logo ?>" alt="<?php print $site_name_and_slogan ?>" title="<?php print $site_name_and_slogan ?>" id="logo" />
                      <?php endif; ?>
                     <?php print $site_html ?>
                      </a></strong>
                    </div>
                    <?php else: /* Use h1 when the content title is empty */ ?>
                     <h1><a href="<?php print $front_page ?>">
                     <?php if ($logo): ?>
                     <img src="<?php print $logo ?>" alt="<?php print $site_name_and_slogan ?>" title="<?php print $site_name_and_slogan ?>" id="logo" />
                      <?php endif; ?>
                      <?php print $site_html ?>
                      </a></h1>
                      <?php endif; ?>
                     <?php endif; ?>
               </div>

             <!-- les 2 menus principaux sont le fait des instructions ci-dessous - les variablesci-dessous sont extraites dans le fichier template.php-->
               <?php if ($primary_nav): print $primary_nav; endif; ?>
               <?php if ($secondary_nav): print $secondary_nav; endif; ?>
      </div> <!-- /#header -->
      <!-- content-wrapper -->
<!--
le corps des pages avec les 3 colonnes  -->
      <div id="content-wrapper" >
        <!--
la colonne gauche -->
            <?php if ($page): ?>
          <div id="colonne-gauche" class="sidebar">
          <?php print render($page); ?>
           </div>
          <?php endif; ?>
       <!--
la colonne droite -->
          <?php if ($page): ?>
           <div id="colonne-droite" class="sidebar">
          <?php print render($page); ?>
         </div>
         <?php endif; ?>

      <!-- la colonne du centre  voir la remarque 2 du CSS §2-->
        <div id="center-wrapper"  >
         <!--
C'est là que s'affichera le contenu principal  voir également la page "le chapeau" pour d'autres infos -->
                 <div id="content-header">
                  <?php print $breadcrumb; ?><!--
le menu - fil'd'ariane -->
                   <?php if ($page): ?><div id="highlighted">
                                                                              <?php print render($page); ?><!-- le bloc 'mis en évidence -->
                                                                              </div><?php endif; ?>
                    <?php if ($tabs): ?><div id="tabs-wrapper"><?php endif; ?>
                    <?php print render($title_prefix); ?>
                    <?php if ($title): ?>
                     <h1<?php print $tabs ? ' class="with-tabs"' : '' ?>><?php print $title ?></h1><!--
le titre du contenu voir également la page "le chapeau" -->
                     <?php endif; ?>
                     <?php print render($title_suffix); ?>
                     <?php if ($tabs): ?><?php print render($tabs); ?></div><?php endif; ?> <!-- le menu du contenu - voir -éditer .... -->
                    <?php print render($tabs2); ?>
                     <?php if ($action_links): ?><ul class="action-links"><?php print render($action_links); ?></ul><?php endif; ?>
                    </div> <!-- #content header -->
            
                <div id="content-content" >
                  <?php print $messages; ?> <!--
le bloc ' avertissement - erreur' -->
                  <?php print render($page); ?><!--
le bloc 'aide' -->
                  <?php print render($page); ?><!--
et enfin mon contenu -->
                  </div> <!-- #content-content -->
            </div><!- - #center-wrapper -->
         </div> <!-- /#content-wrapper -->
  </div> <!-- /#page-wrapper -->

  1. Créer son propre thème en html5 et CCS3