Script - Style des citations

Des citations élégantes

En rédigeant un article intitulé « Pourquoi ce site ? » j'éprouve rapidement le besoin de personnaliser ToWeb. En effet, malgré son puissant éditeur CSS, ToWeb ne permet pas actuellement de choisir la police de caractères pour les citations. Voici la version originale proposée par ToWeb dans le modèle que j'avais choisi :

Homme libre, toujours tu chériras la mer !
Charles Baudelaire
La rédaction d'un script HTML pour présenter les citations de manière élégante en police de caractères Serif s'impose. Pour cela je crée deux scripts minuscules dans lesquels je glisse une référence aux  Awesome Icons disponibles dans ToWeb.

Homme libre, toujours tu chériras la mer !  
Charles Baudelaire

Comment personnaliser le style des citations ?

Dans ToWeb, voici la procédure à suivre pour atteindre la première étape : 
— Menu Options
— Menu Sécurité & HTML
— Bouton Editeur de champs... 
— Ajouter et nommer un nouveau champ script html : CITATION_DEBUT
— Coller le code ci-dessous dans ce nouveau champ script CITATION_DEBUT

 <em><span style="font-family: georgia, palatino, serif; color:grey; font-size: 16px"><i class="fas fa-quote-left"></i>

Dans l'éditeur de champs encore, voici la deuxième étape :
— Ajouter et nommer un second champ script html : CITATION_FIN
— Coller le code ci-dessous dans ce second champ script CITATION_FIN

 <i class="fas fa-quote-right"></i></span></em>

Les deux scripts sont désormais prêts à être placés dans les paragraphes où on souhaite mettre en valeur une expression ou une phrase. Il faudra mettre les balises % CITATION_DEBUT % et % CITATION_FIN % au début et à la fin de la citation (en supprimant les espaces entre les % et les balises). Par exemple, pour obtenir visuellement

Homme libre, toujours tu chériras la mer !  

il faut écrire dans le paragraphe (en supprimant les espaces entre les % et les balises) :

 % CITATION_DEBUT % Homme libre, toujours tu chériras la mer ! % CITATION_FIN % 

Rappel ! Il faut supprimer les espaces dans le code entre les % et les balises.

Mises à jour

— Màj le 26 octobre 2019 - L'inconvénient des styles Custom de ToWeb, c'est qu'ils s'appliquent à des paragraphes entiers et qu'ils sont limités au nombre de cinq. Or je souhaite que le style Custom 5 que j'ai créé pour afficher du code source s'applique uniquement à des extraits du paragraphe : je le remplace donc par deux balises de script : % CODE_SOURCE_DEBUT % et % CODE_SOURCE_FIN % au début et à la fin du code source (en supprimant les espaces entre les signes % et les balises). Par exemple, pour obtenir visuellement 

  <p><span style="color: #000000;">Ceci est du code source !</span></p> 

il faut écrire dans le paragraphe (en supprimant les espaces entre les signes % et les balises) :

   % CODE_SOURCE_DEBUT % <p><span style="color: #000000;">Ceci est du code source !</span></p> % CODE_SOURCE_FIN %  

— Màj le 24 octobre 2019 - Pour soigner la présentation visuelle du code source dans un paragraphe, j'ai créé le style Custom 5 dans l'éditeur de thème CSS de ToWeb (choix d'un fond de box de couleur dimgray #696969 après essai d'un fond de box de couleur gris tourdille #C1BFB1). Pour le plaisir des mots, on rappelle ici que le tourdre est une variété de grive qui chante dans nos jardins et que gris tourdille se dit, en parlant de la robe d'un cheval, d'une couleur gris jaunâtre rappelant celle de la grive. 

Module Formatted Code Display


Google Analytics

Google Analytics est un service utilisé sur notre site Web qui permet de suivre, de signaler le trafic et de mesurer la manière dont les utilisateurs interagissent avec le contenu de notre site Web afin de l’améliorer et de fournir de meilleurs services.

Facebook

Notre site Web vous permet d’aimer ou de partager son contenu sur le réseau social Facebook. En l'utilisant, vous acceptez les règles de confidentialité de Facebook: https://www.facebook.com/policy/cookies/