• Encadrer avatar commentaire

    Par Mikuru le 11 Septembre 2011 à 17:54

    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 ! :)      


    16 commentaires