Créer un thème avec Drupal 8

Personnaliser l'affichage des champs

Testez gratuitement nos 1270 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Sans entrer dans les système de templates, il est possible de personnaliser de façon avancée l'affichage des différents champs.
03:55

Transcription

Alors, nous avons pu voir dans la première formation, comment se servir des vues. Et comme les vues font partie intégrante du fonctionnement de Drupal il est tout à fait souhaitable de pouvoir modifier l'affichage de ces vues. Ce que nous allons commencer à faire, c'est de personnaliser cet affichage directement depuis la vue, sans toucher une ligne de code. On va aller dans gérer structure Vue, on va aller modifier notre vue Mes horloges qui a été créée à la première formation. On modifie la vue. Et ce qu'on va aller faire ici, c'est modifier le champ titre, donc on clique dessus. On voit qu'on a des paramètres d'affichage. On va aller cliquer sur personnaliser le code HTML du champ. On peut imaginer qu'on veuille une balise H2. Donc, avant d'aller plus loin, on va retourner sur notre front, on ouvre encore une page. On est sur la page d'accueil qui est en fait la page Mes horloges. C'est bien la page qui correspond à notre vue, on va examiner cet élément et on voit qu'on a bien à faire à un lien directement. On peut imaginer qu'on souhaite que ce soit un élément HTML de type H2. On clique sur paramètre d'affichage, personnaliser le code HTML du champ et, dans la sélect liste qui apparaît, on a toute une série de balises HTML possibles, on va sélectionner H2. On fait Appliquer pour tous les affichages. On enregistre la vue. On rafraîchit ici. Donc, ici on voit déjà que l’aspect a changé et on a bien notre lien dans une balise H2. Il est tout à fait possible de faire d'autres sortes de modifications. On peut rajouter une classe css. On va rajouter une classe css jaune et ensuite il est possible ici de personnaliser également, le code HTML de l'étiquette. Donc du label ; en fait, vous voyez ici, on n'a pas de label, mais on pourrait avoir un champ étiquette. Ici on pourrait mettre Titre et ce titre serait personnalisable en cochant cette case. Ensuite, de la même manière, il est possible de personnaliser le code de l’enveloppe du champ et de l'étiquette. On appelle ça un wrapper. Le wrapper, c'est ça. C'est ce qui contient --- on a uniquement le champ contenu mais si on avait un label, il serait également contenu là-dedans. Donc on peut personnaliser ce champ-là, il est même possible de supprimer ce wrapper. Tout ce qu'on souhaite faire, c'est ajouter notre classe yellow. Les classes css par défaut-- Drupal va automatiquement ajouter ses propres classes css. Il est possible de supprimer les classes css en décochant cette case. Ce qu'il est important de retenir, c'est qu'il est déjà possible d'effectuer des modifications sur le design assez avancé, sans toucher une ligne de code, uniquement en allant modifier le comportement de la vue. On va faire Appliquer tous les affichages. On enregistre. On actualise et on va voir une chose intéressante, c'est qu'on a notre classe yellow qui a bien été ajoutée. Après, il suffirait très simplement de rajouter dans notre style.css, donc c'est le fichier global qui est ajouté partout .yellow. Voilà donc, on rafraîchit. Et on a notre titre qui est bien en jaune. Ensuite on a la main pour ajouter d’autres éléments en jaune, très facilement.

Créer un thème avec Drupal 8

Créez votre propre thème personnalisé Drupal avec Twig, le nouveau moteur de template. Gérez les ressources, personnalisez Drupal de façon avancée grâce aux vues, etc.

1h48 (31 vidéos)
Aucun commentaire n´est disponible actuellement
 
Logiciel :
Spécial abonnés
Date de parution :17 mars 2016

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !