L'aspect graphique de la zone contenu des pages du site

Les différents éléments à étudier sont :

  • la bordure (en rouge) ;
  • le fil d'ariane (en bleu) ;
  • le titre (texte sur fond bleu) ;
  • les éléments d'informations accessibles si l'on en a les permissions
    • le menu de la page - onglets : voir - modifier... (en vert)
    • l'aide (absente de l'image)
    • d'autres informations diverses (absentes de l'image).
  • enfin le contenu en lui-même (ici un texte  )

Le rendu présenté dans l'image ci-dessus est issu de la combinaison des fichiers suivants :

  • xx.info.yml où xx représente le thême du site (dans mon cas dhv3)
  • du gabarit "page.html.twig"
  • du style CSS ( déclaré dans le fichier .info.yml)

Ce sont ces fichiers qu'il faut modifier pour adapter l'affichage à votre besoin.

L'image ci-contre est un extrait de la page de "mise en page des blocs" qui affiche les régions définies dans le fichier .info.yml
Pour plus d'informations sur cette mise en page, consulter cette page.

1. Observer le code source de la page

Pour cela, j'utilise l'outil de développement des navigateurs Google Chrome ou Mozilla Firefox appliqué à la page. Cet outil présente et analyse le code source fourni au navigateur internet par le serveur web.

L'image ci-dessous montre son application sur la page "/node/etudeContent" du site

  1. un clic sur l'icône (pointé en 1sur l'image)  enclenche l'inspecteur de code.
  2. le survol de la souris sur le fil d'ariane (pointé en 2 sur l'image) permet la mise en évidence des lignes de code responsables de l'affichage
  3. le fil d'ariane est donc produit par la portion "<nav role="dh-breadcrum>    ...   </nav>" (pointé en 3 sur l'image)
  4. cet élément de style est détaillé dans la zone pointée en 4 sur l'image.

 

2. le fil d'ariane

Le code reçu par le navigateur pour l'affichage du fil d'ariane figure ci-dessus :

<section role="le-bloc" >
  
<div id="block-dhv3-breadcrumbs" class="contextual-region block block-system block-system-breadcrumb-block">
         <div data-contextual-id="block:block=dhv3_breadcrumbs:langcode=fr" data-contextual-token="twjSE7_WNEj-taqgElRiGcbfAVAtHI-u1Zc0b5LLiKI"></div>
         <div class="content">
               
<nav role="dh-breadcrumb" aria-labelledby="system-breadcrumb">
                      
<h3 id="system-breadcrumb" class="visually-hidden"> Fil d'Ariane :vous ètes ici: </h3>
                            
<ul>
                                    <li>
                                             <span> <a href="/"> Accueil</a> </span>
                                            
<span><img src="/themes/custom/dhv3/css/images/task-list.png"></span>
                                    </li>
                                    <li> ............ </li>
                       
    </ul>
          
     </nav>
        
</div>
   
</div>
</section>

Ce code est fournit par le fichier "breadcrumb.html.twig" qui figure dans le dossier /templates/navigation/ du thême en cours. et c'est le code {{page.breadcrumb}} du fichier "page.html.twig" qui est responsable de son lancement.

Le style est fournit par la balise nav role="dhbreadcrumb"  décrire au point 2 du §4 : la bordure rouge et par ses descendants qui stylisent les balises html <ul> et <li>

3. le titre

Ce code est fournit par le fichier page-title.html.twig  dont le contenu est reproduit ci dessous et qui se trouve dans le dossier templates/content du thême en cours. C'est le code {{page.content}} du fichier "page.html.twig" qui est responsable de son lancement.

Le style est fournit par la balise nav role="page-title"  reproduite au point 2 du §4 : la bordure rouge.

 *
 * Available variables:
 * - title_attributes: HTML attributes for the page title element.
 * - title_prefix: Additional output populated by modules, intended to be
 *   displayed in front of the main title tag that appears in the template.
 * - title: The page title, for use in the actual content.
 * - title_suffix: Additional output populated by modules, intended to be
 *   displayed after the main title tag that appears in the template.
 */
#}
<section role="page-title">
    {{ title_prefix }}
    {% if title %}
        <h1{{ title_attributes }}>{{ title }} </h1>
    {% endif %}
        {{ title_suffix }}
</section>    .

 

4. la bordure rouge

La bordure rouge qui encadre la partie haute de  la colonne centrale est réalisée en plusieurs étapes

  1. le code border-top: solid thick #c06 de la balise article[role="main"] trace la bordure rouge  qui marque le haut de la colonne.

article[role="main"] {
    flex-grow: 2;
    width: 58%;
    text-align: justify;
    position: relative;
    background: none repeat scroll 0 0 #F8F8F8;
    margin: 0em 0 0em;
    border-radius: 15px 15px 15px 15px;
    box-shadow: 0px 2px 5px #1c1a19;
    border-top: solid thick #c06;
}

  1. Le code     border-right: solid thick #c06;    border-left: solid thick #c06; de la balise nav[role="dh-breadcrumb" trace les portions de bordure rouge à droite et à gauche du fil d'ariane.

nav[role="dh-breadcrumb"] {
    border-right: solid thick #c06;
    border-left: solid thick #c06;

    padding: 2.2em 1.5em;
    margin: -2em -1em;
    border-radius: 10px 10px 0px 0px;
}

  1. Le même code dans la balise section[role="page-title"] trace les portions de bordure rouge à droite et à gauche du titre.

section[role="page-title"] {
    position: relative;
    font-size: 1.7em;
    border-right: thick #C06;
    border-left: thick #C06;

    border-style: solid;
    margin: -1em -12px 0em -12px;
    border-bottom-color: RGBA(255,255,255,0);
    border-top-color: RGBA(255,255,255,0);
    border-radius: 8px 8px 0px 0px;
}

  1. le code border-radius présent dans ces 3 balises crée ou annule les arrondis aux coins des bordures.