• [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-shadow0px 0px 12px #777;
        -webkit-box-shadow0px 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...
    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...)

    « [CSS] Déplacer un élément dans l'en-tête du blog[QUIZ] Démo de quiz »

  • Commentaires

    1
    Mardi 27 Mai 2014 à 21:35

    Voilà mon dixième "esseulé" est disparu. Merci tu m'aides beaucoup.

    2
    Mercredi 28 Mai 2014 à 07:18

    Merci Ginette pour tes commentaires.

    C'est encourageant de voir que c'est utile. yes

    3
    Jeudi 5 Juin 2014 à 02:10

    moyen de pouvoir rajouter et non d'enlever ?

    4
    Jeudi 5 Juin 2014 à 02:39

    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'' ^^

    5
    Jeudi 5 Juin 2014 à 02:41

    D’ailleurs c'est pour ça que j'me voit pas sur les derniers visiteur ^^'

    6
    Jeudi 12 Juin 2014 à 21:22

    jai mis et je teste  merci beaucoup

    7
    Dimanche 22 Juin 2014 à 19:47

    Merci Jimakomo pour ta correction, il faut en effet compter à l'envers.

    Pour rajouter non, on est limité à 10 maximum.

    8
    Dimanche 22 Juin 2014 à 20:35

    de rien pour la correction et merci pour ta réponse ^^

    9
    Mardi 30 Décembre 2014 à 02:31

    Merci c'est beaucoup plus esthétique.

    10
    Mercredi 4 Mars 2015 à 13:50

    Merci ! Ça faisait un moment que je cherchais le deuxième code !

    11
    Mercredi 7 Octobre 2015 à 13:52

    Bonjour

    Le mieux c'est de le mettre en ligne horizontal

    Bonne journée

    12
    Samedi 19 Mars 2016 à 14:53

    merci, c'est que c'est bien mieux comme ça. 

    13
    Lundi 15 Août 2016 à 10:06

    Merci beaucoup pour code !

    Suivre le flux RSS des commentaires


    Ajouter un commentaire

    Nom / Pseudo :

    E-mail (facultatif) :

    Site Web (facultatif) :

    Commentaire :