Joomla! Documentation™

Joomla! 

5.x

séries

Description

Cette fonctionnalité permet aux utilisateurs d'ajouter facilement des classes CSS aux liens directement depuis l'éditeur tinyMCE. Que vous souhaitiez appliquer des styles spécifiques ou transformer des liens en éléments interactifs comme des boutons, cette option simplifie considérablement le processus de personnalisation des liens dans vos articles. Elle élimine la nécessité d'éditer manuellement le code source, permettant aux utilisateurs d'appliquer rapidement des styles prédéfinis ou d'ajouter des effets visuels avancés. Les utilisateurs peuvent choisir parmi une gamme de classes prédéfinies, telles que celles de Bootstrap, pour améliorer l'apparence et l'interaction des liens. Cela offre un moyen d'enrichir la mise en forme des liens sans avoir à modifier directement le code HTML.

Améliorer le style des liens avec le sélecteur de classe

À partir de Joomla 5.2, vous pouvez désormais ajouter facilement des classes CSS personnalisées aux liens en utilisant l'éditeur tinyMCE. Cette nouvelle fonctionnalité vous permet de styliser vos liens sans avoir à modifier directement le code source de vos articles. En ajoutant des classes Bootstrap, par exemple, vous pouvez rapidement transformer un lien en bouton ou ajouter des effets visuels spécifiques. Voici un guide pour vous aider à tirer le meilleur parti de cette nouvelle option.

Étapes pour utiliser le sélecteur de classe

1. Accéder à la configuration de tinyMCE : Allez dans la configuration de l'éditeur tinyMCE et ouvrez l'onglet "Avancé".
2. Ajouter des classes au menu déroulant : Dans l'onglet "Avancé", vous pouvez ajouter des classes CSS que vous souhaitez utiliser pour styliser vos liens. Par exemple, des classes Bootstrap pour créer des boutons élégants.

Vous pouvez trouver des exemples pour les templates utilisant nativement Bootstrap dans la documentation officielle :
Bootstrap Documentation

Voici quelques classes que vous pouvez utiliser pour les variantes de boutons Bootstrap :

• btn btn-primary pour un bouton principal
• btn btn-secondary pour un bouton secondaire
• btn btn-success pour un bouton de succès
• btn btn-danger pour un bouton de danger
• btn btn-warning pour un bouton d'avertissement
• btn btn-info pour un bouton informatif
• btn btn-light pour un bouton clair
• btn btn-dark pour un bouton foncé
• btn btn-link pour un bouton de lien

Alternatives de boutons outline

Vous pouvez également utiliser les variantes outline des boutons :

• btn btn-outline-primary pour un bouton principal outline
• btn btn-outline-secondary pour un bouton secondaire outline

   … (etc.)

Pour les tailles de boutons, ajoutez les classes suivantes

• btn-lg pour un bouton large
• btn-sm pour un bouton petit

Exemple : btn btn-dark btn-lg (un bouton large et foncé)

Créer un lien dans un article

Ouvrez un article et créez un lien. En bas de la boîte de dialogue de création de lien, vous verrez une option pour sélectionner les classes configurées.

Utilisation avancée : appliquer des classes personnalisées

Cette fonctionnalité ne se limite pas aux classes Bootstrap. Vous pouvez également appliquer vos propres classes CSS personnalisées en fonction de vos besoins spécifiques. Par exemple, vous pouvez ajouter une icône avant le lien avec un effet au survol. Cela permet de styliser facilement les liens sans avoir besoin de modifier le code source de l'article.

Remarque sur l'origine de la fonctionnalité

Cette fonctionnalité a été ajoutée dans Joomla 5.2 via le PR #43260.