• Encadrer avatar commentaire

    qu'est-ce que c'est ?

     
    Ci-dessus l'avatar est entouré d'un contour blanc,
    c'est ce que nous allons faire lors de ce nouveau tutoriel.


    comment faire ?

    Commencez pas ouvrir la feuille CSS de votre blog
    Apparence > Modifier le thème > Ajouter du CSS

    Et collez ceci dedans

    .commentavatar {
        background-color: #FFFFFF;
        border: 2px solid #FFFFFF;
        padding: 0;
    }

    background-color c'est la couleur de fond, elle doit être de la meme couleur que votre cadre. Pour changer sa couleur, changez #FFFFFF. border c'est la bordure, ici elle mesure 2px, vous pouvez bien sur changer cette mesure selon votre convenance, idem pour la couleur, vous remplacez #FFFFFF par celle de votre choix. padding évite simplement d'avoir un espace entre la bordure et l'image.

    Comme d'hab, si vous avez des question c'est par commentaire ! :)


    un peu plus d'approfondissement

    Ici c'est pour les curieux qui veulent exploiter le CSS des avatars au maximum, ce sont juste quelques astuces supplémentaires sans vraiment d'explication.

    Pour positionner l'avatar à gauche au lieu de le positionner à droite du commentaire

    .commentavatar {
        float: left;
    }

    Pour arrondir les coins de la bordure

    .commentavatar {
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        border-radius: 5px;

       
    background-color:
    #FFFFFF;

        border: 2px solid #FFFFFF;
        padding: 0;
    }

    Pour mettre de l'ombre derrière la bordure

    .commentavatar {
        box-shadow: 0 0 7px #000000; 
       
    background-color:
    #FFFFFF;

        border: 2px solid #FFFFFF;
        padding: 0;
    }

    Remplacez #000000 pour changer la couleur de l'ombre et réglez le 7px pour son étendue, plus le chiffre sera petit plus l'ombre sera nette et proche de la bordure, et inversement.

    Posez toutes vos questions par commentaires, j'y répondrai dès que possible ! :)
      


    Tags Tags : , , , ,
  • Commentaires

    16
    Lundi 5 Août 2013 à 11:55

    Merci pour les tutos :D ça m'a beaucoup aidé :)

    15
    Dalice mervelis Profil de Dalice mervelis
    Lundi 27 Mai 2013 à 13:27

    merci sa m'aide beaucoup ^^

    14
    ScholckapsKreynt
    Samedi 4 Mai 2013 à 12:21

    Ow, génial tuto. *-*

    Quel beau blog il y a là!

    13
    Vendredi 26 Avril 2013 à 12:00

    Oui c'est pas évident avec Ekla' pour ce qui est de trouver quels sélécteurs correspondent à quelle partie du blog. ^^

    12
    Toshiki Profil de Toshiki
    Vendredi 26 Avril 2013 à 11:55

    Merci beaucouuup ♥ Je m'y connais en css et html mais pour ekla je suis nulle xD

    11
    Vendredi 26 Avril 2013 à 10:05

    Voilà, voilà ! À insérer dans le CSS comme d'habitude. :)

    .module_menu_type_lastvisitors img {
    border: 2px solid #ffffff; /*Taille, forme et couleur de la bordure*/
    max-width: 100px; /*Largeur maximale des avatars des visiteurs*/
    }

    10
    Toshiki Profil de Toshiki
    Vendredi 26 Avril 2013 à 00:07

    Comment on fait pour que ce soit que pour les avatars des visiteurs?

    9
    Dimanche 14 Avril 2013 à 13:39

    Bonjour, merci beaucoup ! J'ai utlisé le dernier code et ça fait assez jolie ! :) Merci encore ! Au passage, ton blog est très bien organisé et vraiment beau. ♥

    • Nom / Pseudo :

      E-mail (facultatif) :

      Site Web (facultatif) :

      Commentaire :


    8
    Jeudi 19 Janvier 2012 à 20:01

    Merci^^

    Heu je sais que c'est pas le moment mais

    Enfaite sur un blog d'une amie,dans la rubrikk "derniers visiteurs" ,on voit pas le titre de la rubrikk(=derbier visiteur),les avatar cache le titre

    Ta pas un code CCS pour qu'on voit le titre?

    7
    Jeudi 20 Octobre 2011 à 17:11

    Merci beaucoup ! **O**

    6
    Samedi 15 Octobre 2011 à 15:01

    Youpi ca marche ! Merci beaucoup ^^

    5
    Samedi 15 Octobre 2011 à 14:57

    Oui je pense que j'ai compris ce que tu veux dire.
    Essaie donc ce code alors :

    .commentavatar {
        float: left;
        margin-right: 20px;
    }

    J'ai rajouté un margin-right, c'est la marge à droite de l'image, celle qui sépare l'image du texte.
    Elle de 20px, si tu veux la changer, tu peux, bien sûr. Normalement ton texte ne devrait plus être collé. ^^

    4
    Samedi 15 Octobre 2011 à 10:31

    Merci pour le tuto ! Il m'est très très utile ^^

    Hm ... Pour "positionner l'avatar à gauche" , peut-on faire en sorte qu'il ne sois pas "dans le texte " =

    Là, le texte est collé à l'avatar . Quand je fais "marge du texte", il comprend aussi l'avatar donc en gros je ne peux pas les écarter .

    Aurais-tu la solution s'il te plait ?
    (J'ai lu mon commentaire et c'est pas très clair dsl ...)

    3
    Samedi 17 Septembre 2011 à 10:04

    Merci !! <3

    2
    Jeudi 15 Septembre 2011 à 18:19

    Merciiii °0°

    1
    Mercredi 14 Septembre 2011 à 21:45

    Merci pour le tuto !! ^^

     

    Vous devez être connecté pour commenter