Remplacer le lien "Lire la suite" par une image
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 !
