Jusqu'à la version 3 de gantry et dans certains templates récents également, il existe une fonction, "title spans", qui une fois activé modifie la couleur du premier mot des titres.

Mais comme d'autres fonctions, elle n'apparait pas dans tous les templates gantry, ni dans le bundle 4.1.11

Nous allons donc l'activer pour pouvoir l'utiliser.

Ajouter la fonction title span dans gantry :

Ouvrex le fichier template-options.xml

repérez l'endroit ou vous voulez ajouter votre fonction, selon votre goût et vos besoins; pour nous ce fut à la ligne 92 juste avant la fonction date, et ajoutez :

        <field name="buildspans-enabled" type="toggle" default="1" label="TITLESPANS"/>

Le fait de l'avoir mis par défaut sur 1 active d'entrée la fonctionnalité, mais nous allons le vérifer.

Activer la fonction titlespans :

Pour activer la fonction dans gantry il suffit de switcher le bouton interrupteur :(cliquez pour agrandir)

Puis de sauver.

Vos titres ont désormais leur premier mot encadré dans une magnifique balise span.

Modifiez vos css :

Maintenant que nous avons une balise span qui différencie le pemier mot du reste du titre, il nous suffit d'appliquer des css afin de marquer visuellement cette différence.

 

h2 span {
    color: red;
}
h2 span:hover {
    color: darkred;
}

Par exemple... il convient d'adapter les css à chaque cas particulier.