Pluxopolis

Remplacer le lien "Lire la suite" par une image

---

Rédigé par jack le 12 juillet 2016 Aucun commentairee

Seules quelques lignes de code css sont à rajouter dans la feuille de style de son thème pour remplacer le lien "Lire la suite" par une image. Voyons en détail comment faire...

Ce tuto se base sur le thème par défaut de PluXml.

Étape 1: copiez votre image dans le dossier themes/defaut/img

Pour moi ce sera le fichier more.png

 

Étape 2: éditez le fichier themes/defaut/css/theme.css

À la fin du fichier, rajoutez les lignes suivantes:

.more a {
	background:url(../img/more.png) no-repeat;
	display: block;
	height: 32px;
	width: 32px;
	text-indent: -999px;
}

 

Explications

Ce que vous devez modifier en fonction de votre image:

1. Emplacement et nom de l'image

La ligne suivante permet de définir l'emplacement et le nom du fichier à utiliser

	background:url(../img/more.png) no-repeat;

adapter si besoin: ../img/more.png

 

2. Dimension de l'image

Spécifiez les dimensions de l'image. Ici j'ai utilisé une image de 32x32 pixels. Modifier donc les valeurs de la hauteur et de la largeur en fonction de la taille de votre image.

	height: 32px;
	width: 32px;

La ligne suivante permet d'afficher correctement l'image sur la hauteur avec la valeur spécifiée précédemment.

 

	display: block;

 

 

3. Masquer le lien "Lire la suite"

Ici il n'y a rien à changer. Cette ligne sert juste à déplacer le texte "Lire la suite" à un endroit de l'écran où le texte ne sera pas visible.

	text-indent: -999px;

 

Et voilà... rien de plus !

DClassé dans : PluXml ,Mots clés : Css, PluXml, Snippet, Thème

A propos de l'auteur, jack:

Webmestre de PluXopolis de 2018 à Avril 2023.