COS-Blog

Comment modifier l'apparence du bouton En savoir plus ?

Dernière mise à jour: July 7, 2017

Disponible avec :

Modifier l'apparence du bouton En savoir plus s'affichant sur la page de listing des articles de blog est très utile pour mettre ce bouton en valeur.

 

Exemple

Screen_Shot_2013-09-04_at_1.55.00_PM
  • Créez une classe CSS définissant le style du bouton En savoir plus. Ajoutez cette classe, ainsi que tout style personnalisé, à la feuille de style (accessible sous Contenu > Paramètres du contenu > Blog > Modèles > cliquez sur le nom de la feuille de style appliquée à votre blog).
  • Exemple de code : 
.read-more-btn{
background: blue;
border-radius: 10px;
color: white;
}
  • Accédez au créateur de modèle et trouvez le modèle appliqué à votre blog. Dans le module de contenu du blog, cliquez sur le bouton Modifier le modèle de listing pour accéder au code HTML de la page de listing.

blog-listing-html.png

  • Trouvez l'extrait suivant dans le code HTML du modèle de listing :
En savoir plus
  •  Remplacez la classe more-link par votre nouvelle classe read-more-btn. Votre code doit maintenant ressembler à ceci :
En savoir plus


read-more-code-1.png

  • Cliquez sur Publier les modifications.


Articles similaires :