-
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'approfondissementIci 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 : ffffff, , border, couleur, 7px
-
Commentaires
14ScholckapsKreyntSamedi 4 Mai 2013 à 12:21Oui c'est pas évident avec Ekla' pour ce qui est de trouver quels sélécteurs correspondent à quelle partie du blog. ^^
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*/
}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. ♥
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?
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é. ^^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 ...)Vous devez être connecté pour commenter
Merci pour les tutos :D ça m'a beaucoup aidé :)