| | Contour autour de l'avatar (messages) |  |
|
|
 Roy Ascalon 
{ Membre }
 Messages : 11
 | Arf, excuse-moi  Voici : - Code:
-
<div><a class="infobulle"><img src="http://sd-1.archive-host.com/membres/images/3906915465395423/Sans_titre-1.jpg" alt="Ribbons Almark"> <span><center>Ribbons Almark <br><img src="http://sd-1.archive-host.com/membres/images/3906915465395423/8253841.jpg" alt="Ribbons Almark"> <br>Fondateur.<div><a href="http://gs-humanity-rebirth.forumactif.org/profile.forum?mode=viewprofile&u=1" target="_blank">Voir le Profil</a></div></a><div><a href="http://gs-humanity-rebirth.forumactif.org/msg.forum?mode=post&u=1" target="_blank">Envoyer un MP</a></div></center></span></a></div> | | |
|
| | |
Invité Invité
| Y a pas de soucis <3 Donc si j'ai bien compris ce que tu voulais ça donnerait quelque chose comme ça - Code:
-
<div><a class="infobulle"><img class="contour" src="http://sd-1.archive-host.com/membres/images/3906915465395423/Sans_titre-1.jpg" alt="Ribbons Almark"> <span><center>Ribbons Almark <br><img src="http://sd-1.archive-host.com/membres/images/3906915465395423/8253841.jpg" alt="Ribbons Almark"> <br>Fondateur.<div><a href="http://gs-humanity-rebirth.forumactif.org/profile.forum?mode=viewprofile&u=1" target="_blank">Voir le Profil</a></div></a><div><a href="http://gs-humanity-rebirth.forumactif.org/msg.forum?mode=post&u=1" target="_blank">Envoyer un MP</a></div></center></span></a></div> - Code:
-
a.infobulle {
position: relative;
}
a.infobulle span {
display: none; /* ceci masque l'infobulle */
}
a.infobulle:hover {
background: none; /* correction d'un bug IE */
z-index: 999; /* on définit une valeur pour l'ordre d'affichage */
}
a.infobulle:hover span {
display: inline; /* ceci affiche l'infobulle */
position: absolute;
white-space: nowrap; /* on change la valeur de la propriété white-space pour qu'il n'y ait pas de retour à la ligne non-désiré */
top: 5px; /* on positionne notre infobulle */
left: 15px;
background: #ebebeb; /* arrière-plan de l'infobulle */
color: black; /* texte dans l'infobulle */
padding: 3px;
/* bordures de votre infobulle*/
border: 1px dotted black;
border-left: 1px dotted black;
}
.contour {
background-color: white;
padding: 0.5%;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
} Mais comme je te l'ai dis, sur le forum que tu as montré leur contour a été fait graphiquement donc tu ne pourras pas avoir ce même effet lumineux avec la méthode CSS | | |
|
| | |
Roy Ascalon
{ Membre }
Messages : 11
| Okay, merci pour ton aide et ton conseil ^^ | | |
|
| | |
Invité Invité
| Avec plaisir =)
en espérant que ça t'ai aidé >w< | | |
|
| | |
Saras7
{ Membre }
 Messages : 15
| Bonjour ! Voilà, je me demandais si il était possible d'intégrer un cadre prédéfinis autour des avatar. Plus précisément, je voudrais savoir si au lieu d'ajouter des bordures arrondi, il était possible d'ajouter un cadre un cadre comme celui-ci par exemple, fait graphiquement au préalable : - Spoiler:
| | |
|
| | |
Basil Hawkins
{ Membre hyper-actif }
Messages : 2912
| Hello,  Oui c'est possible  Par contre il faudra couper l'image en 4 au préalable, et si les membres ont un avatar plus gros que prévu, le cadre sera déformé. =/ | | |
|
| | |
Saras7
{ Membre }
Messages : 15
| Oki ^^ La dessus pas de problème, les avatar ont une dimension à respecter.
Merci pour la rapidité de ta réponse, seulement pourrais-tu m'aider une nouvelle fois en me disant à quoi doit ressembler mon code si je coupe mon cadre en 4 ? la base du code css, c'est quoi exactement ?
si par exemple, les avatars doivent impérativement faire du 167*234, je dois couper mon cadre (en haut, en bas, à gauche, à droite je suppose), mais après en code css ca donne quoi ? | | |
|
| | |
Basil Hawkins
{ Membre hyper-actif }
Messages : 2912
| Bah le CSS je ne suis pas sûr de ma technique donc je préfère le faire moi-même et je te le passerai quand ça sera bon | | |
|
| | |
Saras7
{ Membre }
Messages : 15
| Oki d'ac. Merci encore pour ton aide Je vais voir aussi de mon coté pour essayer un code et puis je verrais si j'ai bien compris le truc ! | | |
|
| | |
Adrénalia
{ Membre }
Messages : 33
| Après avoir fait quelque codage est modifier deux trois templates, celui-ci ne marche plus Oo.
Normal? Que dois-je changer?
-Et merci pour ce super tuto! *o*- | | |
|
| | |
Toast'
{ Membre }
Messages : 10
| Merci | | |
|
| | |
Invité Invité
| Oh yeah, merci beaucoup pour ce code  | | |
|
| | |
Saras7
{ Membre }
Messages : 15
| Hello Je suis toujours en rechercher pour savoir comment faire un cadre autour de l'avatar, que l'on aurait crée au préalable ^^ Si quelqu'un à une idée je suis preneuse | | |
|
| | |
Invité Invité
| Alors oui tu peux par contre le cœur de ton cadre va poser problème car l'avatar ne passera pas "dessous" mais dessus le cachant :/ Dans ton template viewtopic_body : Tu cherches : - Code:
-
{postrow.displayed.POSTER_AVATAR} et tu l'entoures comme ceci : - Code:
-
<span class="banane">{postrow.displayed.POSTER_AVATAR}</span> Puis dans ton CSS - Code:
-
.banane img{
background-image: url("http://i67.servimg.com/u/f67/12/67/45/55/contou10.png");
width: 153px;
height: 220px;
background-position: center;
background-repeat: no-repeat;
padding: 30px;
} | | |
|
| | |
Arthlin
{ Membre }
Messages : 16
| Merci pour cette astuce, vraiment sympa ^^ Pour l'astuce d'ajouter un cadre fait graphiquement, si je fais une image un peu plus grande que la taille d'avatar normal (disons 100*100 et que je fasse une image de 105*105), ça pourrait fonctionner ?  | | |
|
| | |
Elle Sid
{ Membre }
Messages : 37
| |
| | |
Reira
{ Membre }
Messages : 53
| merci pour le code *o*
Bisous
Rei' | | |
|
| | |
Lolo
{ Membre }
Messages : 20
| Merci pour ce tuto.
Je me demandais comment on le faisais, c'est très utile. | | |
|
| | |
Invité Invité
| Merci pour le tuto, géniale =) Mais j'aurais une petite question ^^ Voilà, le code marche parfaitement mais la largeur du cadre était trop épaisse pour mon forum. J'ai essayer de modifier les valeurs pixels du code de moitier; - Code:
-
.postdetails.poster-profile a img {
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
border: 5px solid #000000;
} Mais ça n'as rien changer. Est-ce qu'il y aurait une façon de réduire la largeur du cadre.? Merci =) | | |
|
| | |
kalyon
{ Membre }
Messages : 156
| pour les bordures trop épaisse, il vous faut modifier cette ligne : - Code:
-
border: 5px solid #000000; en changent 5px par la valeur voulu ! si vous voulez avoir une différence d'épaisseur entre les différents coté, voila la code a inséré - Code:
-
pour la bordure du haut
border-top: 5px solid #000000;
pour la bordure du bas
border-bottom: 5px solid #000000;
pour la bordure de droite
border-right: 5px solid #000000;
pour la bordure de gauche
border-left: 5px solid #000000; En espérant vous avoir aidez Amicalement | | |
|
| | |
Invité Invité
| Ça fonctionne.! Milles merci.! =D | | |
|
| | |
kalyon
{ Membre }
Messages : 156
| Salut a tous ^^' petit soucis de mon coté :X voici le css que j'ai integrer a mon forum : - Code:
-
/*------CONTOUR AVATAR-----*/
.postdetails.poster-profile a img {
border: 5px ridge orange;
-moz-border-radius: 10px;
}
/*------FIN CONTOUR AVATAR-----*/
Et il n'affiche rien :/ Pourquoi ? Merci =) | | |
|
| | |
Invité Invité
| Chez moi ton code marche très bien :/
On peut voir le forum en question ? | | |
|
| | |
kalyon
{ Membre }
Messages : 156
| http://Maxii-pubs.com :/ je sais, sur mon forum de test aussi sa fonctionnait | | |
|
| | |
Invité Invité
| Mm, le code est installé présentement ?
As-tu touché au template viewtopic_body ?
Et sinon montre moi ton code CSS en entier pour voir | | |
|
| | |
Contenu sponsorisé
| |
| | |
| | Contour autour de l'avatar (messages) | |
|
