• [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 !

    14
    elisa62-creascountry Profil de elisa62-creascountry
    Jeudi 8 Février 2018 à 10:02

    merci du conseil 

    15
    Vendredi 3 Mai 2019 à 20:35

    Merci pour les explications et codes

    16
    Lundi 27 Avril 2020 à 14:55

    Voilà qui va me permettre de progresser, merci à vous.

     

    17
    Lundi 15 Février 2021 à 13:05

    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 !

    18
    Mardi 1er Août 2023 à 16:07

    Il est génial ce code ! Merci beaucoup ! ^^

    Suivre le flux RSS des commentaires


    Ajouter un commentaire

    Nom / Pseudo :

    E-mail (facultatif) :

    Site Web (facultatif) :

    Commentaire :