Afficher une icône devant les liens des flux rss

Rédigé par jack 7 commentaires
Classé dans : PluXml Mots clés : Css, Menu, Rss, Sidebar, Thème
Si vous utiliser le thème par défaut de PluXml, deux liens pour accéder aux flux rss des articles et des commentaires sont visibles dans la sidebar.

Nous allons voir comment ajouter rapidement une icône devant ces liens afin d'obtenir l'affichage suivant:

Le code utilisé pour afficher les liens rss dans la sidebar se trouve dans le fichier themes/defaut/sidebar.php: 

<h3>
	RSS
</h3>
<ul class="rss-list unstyled-list">
	<li><a href="https://pluxopolis.net/<?php $plxShow->urlRewrite('feed.php?rss') ?>" title="<?php $plxShow->lang('ARTICLES_RSS_FEEDS'); ?>"><?php $plxShow->lang('ARTICLES'); ?></a></li>
	<li><a href="https://pluxopolis.net/<?php $plxShow->urlRewrite('feed.php?rss/commentaires'); ?>" title="<?php $plxShow->lang('COMMENTS_RSS_FEEDS') ?>"><?php $plxShow->lang('COMMENTS'); ?></a></li>
</ul>
Nous allons utiliser la classe css rss-list de la balise <ul> pour rajouter aux balises <a> qui composent la liste html une image.

Éditez le fichier themes/defaut/css/theme.css et ajouter à la fin du fichier le code suivant: 

.rss-list a::before{
	margin: 0 5px 0 0;
	content: url('../img/rss.png');
	vertical-align: -10%;
}
Récupérez l'icône ci-dessous et copiez la dans le dossier themes/defaut/img (faire bouton droit de la souris sur l'image et sélectionner le menu "Enregistrer l'image sous").

Voilà, c'est fini !

7 commentaires

#1  - David a dit :

Excellente petite astuce pour continuer à améliorer visuellement son blog sous PluXml, je m'en vais tester ça, merci :)

Répondre
#2  - Bazooka07 a dit :

On peut également utiliser la méthode suivante :
.rss-list a {
padding-left: 20px;
background: url('../img/rss.png') no-repeat left center;
}
en supposant que la largeur d'icône de 16px.

Répondre
#3  - admin a dit :

@Bazooka07 :
Bien vu et même que je préfère ta syntaxe qui est plus conventionnelle et qui risque moins de poser de problème en fonction des différents navigateurs.

Répondre
#4  - joreveur a dit :

Bonjour,
bravo !
je viens de le mettre en place.
je ma même chose sur mon autre site informatique

Répondre
#5  - joreveur a dit :

et comment met-on cette image sur les "Fil Rss des commentaires de cet article" en bas de chaque article ?
merci d'avance.

Répondre
#6  - admin a dit :

@joreveur :
essaye en rajoutant ce bout de code dans le fichier /themes/defaut/css/theme.css du thème par défaut (PluXml 5.4)

.main section > p a {
padding-left: 20px;
background: url('../img/rss.png') no-repeat left center;
}

Répondre
#7  - joreveur a dit :

ok merci ça marche !
bonne fin de journée

Répondre

Écrire un commentaire

Quelle est la quatrième lettre du mot fwjxy ?

Fil RSS des commentaires de cet article

Top