-
[CSS] Retirer un visiteur de la liste des derniers visiteurs
Vous avez peut-être souhaité réduire la taille des images de la liste des derniers visiteurs.
Pour ce blog j'utilise ce code CSS qui réduit la taille et ajoute un arrondi et une ombre.
/* Derniers visiteurs */
.module_menu_type_lastvisitors img {
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
box-shadow:0px 0px 12px #777;
-moz-box-shadow: 0px 0px 12px #777;
-webkit-box-shadow: 0px 0px 12px #777;
margin:4px;
max-width:60px;max-height:60px;
}Note : le code CSS peut être ajouté dans le menu « Apparence » => « Modifier le thème » => « Ajouter du CSS ».
Du coup j'affiche trois images par lignes.
Si je définis l'affichage de dix visiteurs je suis bien embêté : j'ai un orphelin sur la dernière ligne (et ce n'est pas très joli...)
Dix visiteurs dont un orphelin...Pour masquer le dixième visiteur on va utiliser ce code CSS :
/* Retire le dixième visiteur */
.module_menu_type_lastvisitors .module_menu_contenu_block a:nth-last-child(1) {display:none}Ce code masque le 10éme visiteur (1er en partant de la fin).
Vous pouvez modifier le nombre 1 pour masquer un autre visiteur, et copier cette ligne pour en masquer plusieurs en fonction du nombre de visiteurs affichés et du nombre de visiteurs souhaités.Voyez le résultat à droite dans mon module « Derniers visiteurs », l'orphelin a disparu.
On voit un visiteur de moins mais ça fait gagner de l'espace et c'est mieux visuellement à mon goût.Remarque : ce code ne fonctionne pas pour Internet Explorer 8 et inférieur (mais ce n'est pas très grâve...)
-
Commentaires
Ah puis il y a une erreur dans ton code
.module_menu_type_lastvisitors .module_menu_contenu_block a:nth-last-child(10) {display:none}
* a:nth-last-child(10) *
le ''10'' correspond au premier visiteur et le ''9'' au deuxième jusqu'au dernier qui est ''1'' ^^
Bonjour,
Je suis depuis peu sur Eklablog et justement je me demandais comment faire apparaitre les derniers visiteurs ? Grâce à votre explication et surtout grâce à la publication de votre code CSS, j'ai pu l'installer. Merci beaucoup !
Ajouter un commentaire
Voilà mon dixième "esseulé" est disparu. Merci tu m'aides beaucoup.