L'objet de cette page est d'expliquer la réalisation du "chapeau" des pages  du site qui est reproduit ci-dessous.

Les différents éléments à étudier sont : la bordure ( en rouge) ; le fil d'ariane (en bleu) ; le titre (gros cadre à fond gris) ; le menu de la page ( onglets voir - modifier...).

Les éléments de code <HTML et PHP> présentés sont issus du gabarit "page.tpl.php" et les éléments <HTML> le sont des fichiers de styles CSS. Ce sont ces fichiers qu'il faut modifier pour adapter l'affichage à votre besoin Pour connaître le nom des fichiers CSS, consulter le fichier "info" de votre thème.

  1.  observer facilement le code source de la page :

Pour cela, j'utilise l'outil de développement du navigateur Google Chrome (très voisin du plug-in firebug du navigateur firefox) appliqué à la page que vous êtes en train de consulter ( /drupal/content/le-chapeau). L'outil de développement "firebug", présente et analyse le code source fourni au navigateur internet par le serveur web. Il nous indique que "l'objet" que l'on étudie se trouve dans le bloc <div id=header>.

  1. la bordure

le code reçu par le navigateur ( dit code source)  crée un bloc <div> identifié "content-header"qui englobe le contenu à afficher. C'est le style qui fournit l'affichage.

<div id="content-header">
....
</div>

Le code CCS qui contient la déclaration de l'ID fait toute la mise en forme.

#content-header{
     text-align:left;
     margin: 0 0 1em;
     padding: 0 1em 5em 0.5em;
     border-top: thick red;
     border-right:thick red ;
     border-left:thick red ;
     border-bottom:hidden;
     border-style:solid;
     background: white;
     border-radius: 15px 15px 0 0 ;
}

  1. le fil d'ariane

Le code reçu par le navigateur figure ci-dessus :

<div class="breadcrumb">
<a href="/drupal/">Accueil</a>
›››
<a href="/drupal/?q=content/les-phases-de-la-r%C3%A9alisation-du-site" title="Les phases de la réalisation du site">L&#039;installation</a>
›››
<a href="/drupal/?q=content/realisation-de-laspect-graphique" title="L&#039;aspect graphique du site" class="active-trail">La présentation</a>
</div>

le code <HTML - PHP> à l'origine figure ci-contre ; c'est la variable $breadcrumb qui contient l'information : voir  la page surcharger de ce site

<?php print $breadcrumb; ?>

  1. le titre

le code reçu par le navigateur figure ci-dessous :

 

3.
 
  <h1 class="with-tabs">Le chapeau</h1>
le code <HTML - PHP> à l'origine figure ci-contre : <h1<?php print $tabs ? ' class="with-tabs"' : '' ?>><?php print $title ?></h1>
le code CSS
/* layout_dh.css */
 
h1.with-tabs {
   float: left; /* LTR */
   margin: 0 2em 0 0; /* LTR */
    padding: 0;
    padding: 1em 2em;
    border: 1px solid black;
    border-radius: 0 15px 0 0;
    color:black;
    background-color:#FBFBFB;
}
4. le menu de la page
 
le code reçu par le navigateur  crée un bloc <div> identifié "tabs-wrapper"qui englobe le contenu à afficher $tabs ( un tableau de valeur présenté sous la forme d'une liste non ordonnée (balises <ul> <li>..<:li><li>..<:li><li>..<:li> </ul>)
<div id="tabs-wrapper">
<h1 class="with-tabs">Le chapeau</h1>
<h2 class="element-invisible">Onglets principaux</h2>
<ul class="tabsdh">
​        <li class="active"><a href="/drupal/?q=content/le-chapeau" class="active">Voir<span class="element-invisible">(onglet actif)</span></a>
​       </li>
       ​<li><a href="/drupal/?q=node/52/edit">Modifier</a>
​        </li>
         <li><a href="/drupal/?q=node/52/outline">Structure</a>
​          </li>
</ul>
</div>
le code <HTML - PHP> à l'origine figure ci-contre :
<?php if ($tabs): ?><div id="tabs-wrapper"><?php endif; ?>
<?php if ($tabs): ?><?php print render($tabs); ?></div><?php endif; ?>

le code <CSS> extrait du fichier de style. 
Notons que toute la décoration se trouve dans les attributs de la balise de lien <a>

#tabs-wrapper {
    margin: 0 -26px 1em;
    padding: 0 26px;
    position: relative;
}
 
/* layout_dh.css */
 
ul.tabsdh {
   list-style-type: none; 
   width:100%;
}
 
ul.tabsdh li {
   float:left;
 
ul.tabsdh a {
   float: left;
   text-align: center;
   text-decoration: none;
   margin: 0 -0.4em;
   padding: 0em 2em;
   border: 1px solid black;
   border-radius: 0 15px 0 0;
   color:black;
   background-color:white
}
 
ul.tabsdh a:hover {
   background-color:#EAEAEA; 
}
 
 
ul.tabsdh a:visited {
   background-color:#FBFBFB; 
}