Avatar arrondi

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Avatar arrondi

Message par Anya31 le Mer 26 Sep 2012 - 23:39

Bonjour,

Voilà je voudrais que les avatars soient légèrement arrondi...

alors, modification du CSS
Code:
/*#####ARRONDI AVATAR#####*/
xxxxxxxxxxx
{
-moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -o-border-radius: 10px;
    -m-border-radius: 10px;
    border-radius: 10px;
}

xxxxxxxxxxxxx
parce que je ne sais pas quoi mettre à la place...

j'ai fait quelques recherches, et essayer pas mal de truc, mais je bloque
http://forum.forumactif.com/t337951-arrondir-l-avatar?highlight=arrondir+avatar
et puis un autre, qui me met la puce à l'oreille
http://forum.forumactif.com/t293210-contour-de-couleur-et-bord-arrondi-autour-de-l-avatar-avec-template-modifie

car j'ai aussi le template viewtopic_body modifié.... comme suit :

Code:
<!-- BEGIN displayed -->
   <tr class="post">
      <td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} align="middle" valign="top" width="150">
                  <div style="position: absolute;"><span style="position: relative; bottom: 2px; right: 4px;">{postrow.displayed.ONLINE_IMG}</span></div>
                  {postrow.displayed.POSTER_AVATAR}<br>
          <span class="name"><a name="{postrow.displayed.U_POST_ID}"></a><strong>{postrow.displayed.POSTER_NAME}</strong></span><br>
            <span class="postdetails poster-profile">
            {postrow.displayed.POSTER_RANK}

            {postrow.displayed.RANK_IMAGE}
            </span>

            <span class="postdetails poster-profile">
            <!-- BEGIN profile_field -->

en fait je ne vois pas comment 'appeler' l'avatar dans le CSS pour pouvoir l'arrondir

Avez-vous une idée ?

Merci par avance


Dernière édition par Anya31 le Jeu 27 Sep 2012 - 19:39, édité 1 fois

Anya31
****

Masculin
Messages : 383
Inscrit(e) le : 10/12/2010

http://touslesloulous.forumactif.com/index.htm
Anya31 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Avatar arrondi

Message par Ifreann le Mer 26 Sep 2012 - 23:42

Bonjour,

Quand vous parlez de l'avatar, vous parlez de l'image ou du cadre de profil

Ifreann
**

Féminin
Messages : 84
Inscrit(e) le : 28/10/2008

http://avenement.forumactif.org/
Ifreann a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Avatar arrondi

Message par Anya31 le Mer 26 Sep 2012 - 23:47

de l'image

merci

Anya31
****

Masculin
Messages : 383
Inscrit(e) le : 10/12/2010

http://touslesloulous.forumactif.com/index.htm
Anya31 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Avatar arrondi

Message par Ifreann le Mer 26 Sep 2012 - 23:50

Il est pas possible de modifier l'image en elle même en css

Ifreann
**

Féminin
Messages : 84
Inscrit(e) le : 28/10/2008

http://avenement.forumactif.org/
Ifreann a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Avatar arrondi

Message par Anya31 le Mer 26 Sep 2012 - 23:54

heu si si

alors
avec :
Code:
a img {
-moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -o-border-radius: 10px;
    -m-border-radius: 10px;
    border-radius: 10px;
}

c'est toutes les images qui sont arrondies par exemple

Anya31
****

Masculin
Messages : 383
Inscrit(e) le : 10/12/2010

http://touslesloulous.forumactif.com/index.htm
Anya31 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Avatar arrondi

Message par Anya31 le Mer 26 Sep 2012 - 23:55

@Ifreann a écrit:Il est pas possible de modifier l'image en elle même en css
enfin on est d'accord : on ne modifie pas l'image en elle même
mais son traitement par le navigateur

Anya31
****

Masculin
Messages : 383
Inscrit(e) le : 10/12/2010

http://touslesloulous.forumactif.com/index.htm
Anya31 a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Avatar arrondi

Message par Manumanu le Jeu 27 Sep 2012 - 0:07

Bonjour,

Tu peux alléger à ça directement :
Code:
border-radius: 10px;

-moz-border-radius n'est plus supporté
-m-border-radius n'existe pas
les deux autres sont pris en charge par les versions récentes.

Également, pour cibler l'avatar et non pas toutes les images :
Code:
.postdetails a img {
   border-radius: 10px;
}

Manumanu
****

Masculin
Messages : 437
Inscrit(e) le : 27/12/2011

http://helpinghelps-phpbb2.forumgratuit.org/
Manumanu a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Avatar arrondi

Message par Anya31 le Jeu 27 Sep 2012 - 0:10

Merci
mais ça ne marche pas

Anya31
****

Masculin
Messages : 383
Inscrit(e) le : 10/12/2010

http://touslesloulous.forumactif.com/index.htm
Anya31 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Avatar arrondi

Message par Manumanu le Jeu 27 Sep 2012 - 0:11

Ton forum, c'est bien "touslesloulous" ? Ou un autre ?

Manumanu
****

Masculin
Messages : 437
Inscrit(e) le : 27/12/2011

http://helpinghelps-phpbb2.forumgratuit.org/
Manumanu a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Avatar arrondi

Message par Anya31 le Jeu 27 Sep 2012 - 0:23

oui c'est bien cela

Anya31
****

Masculin
Messages : 383
Inscrit(e) le : 10/12/2010

http://touslesloulous.forumactif.com/index.htm
Anya31 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Avatar arrondi

Message par Manumanu le Jeu 27 Sep 2012 - 0:31

Je vois, le Template a été (mal) modifié.

Juste avant l'avatar, il y a ça qui ne sert stritement à rien :
Code:
<div style="position: absolute;"><span style="position: relative; bottom: 2px; right: 4px;"></span></div>

Et l'avatar n'est plus dans un lien. Il faudrait remodifier ça, ou mettre une classe à un élément autour de l'avatar, sinon il n'y a aucun moyen direct de le cibler.

Manumanu
****

Masculin
Messages : 437
Inscrit(e) le : 27/12/2011

http://helpinghelps-phpbb2.forumgratuit.org/
Manumanu a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Avatar arrondi

Message par Anya31 le Jeu 27 Sep 2012 - 0:39

l'histoire de ce template, c'est par là :
http://forum.forumactif.com/t292834-le-en-ligne-sur-l-avatar

sinon j'ai effectivement essayé des trucs sur le template
de ce style, sur cet élément :

Code:
 <span class="imageavatar">  {postrow.displayed.POSTER_AVATAR} </span>

et donc dans le CSS, d'appeler imageavatar

mais sans succès...

idem dans un div
je n'ai pas essayé dans un div + span


je suis un peu largué là

(et vais au lit lol)

merci de ton aide en tout cas

Anya31
****

Masculin
Messages : 383
Inscrit(e) le : 10/12/2010

http://touslesloulous.forumactif.com/index.htm
Anya31 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Avatar arrondi

Message par Milouze14 le Jeu 27 Sep 2012 - 7:40

Salut Anya31,
dans ta feuille de style il faut ajouter img à la fin de ta class Wink .

Code:

.imageavata img
{

-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}

Wink

a++

Milouze14
+ Hyperactif +

Masculin
Messages : 4625
Inscrit(e) le : 18/04/2005

http://www.milouze14.com/
Milouze14 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Avatar arrondi

Message par Manumanu le Jeu 27 Sep 2012 - 15:06

Oui ; sans les deux premières propriétés, border-radius seulement. Wink

Manumanu
****

Masculin
Messages : 437
Inscrit(e) le : 27/12/2011

http://helpinghelps-phpbb2.forumgratuit.org/
Manumanu a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Avatar arrondi

Message par Anya31 le Jeu 27 Sep 2012 - 19:09

Yeah !
ça fonctionne en modifiant le template et indiquant une classe dans un span
et dans le CSS, en appelant la classe indiquée.

Merci Milouze, Manumanu Smile

Pour info, et être un peu moins bête à l'avenir :
- pourquoi préciser img ?
- et pourquoi mettre un point avant la classe ?

Merci

Anya31
****

Masculin
Messages : 383
Inscrit(e) le : 10/12/2010

http://touslesloulous.forumactif.com/index.htm
Anya31 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Avatar arrondi

Message par Manumanu le Jeu 27 Sep 2012 - 19:11

On précise img parce que c'est sur l'image qu'on veut appliquer l'effet, et le point c'est parce que c'est comme ça qu'on désigne une classe en CSS. Wink

#element c'est pour cibler un id (id="element")
.element c'est pour cibler une classe (class="element")
element c'est pour cibler une balise (<element>)

Manumanu
****

Masculin
Messages : 437
Inscrit(e) le : 27/12/2011

http://helpinghelps-phpbb2.forumgratuit.org/
Manumanu a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Avatar arrondi

Message par Anya31 le Jeu 27 Sep 2012 - 19:15

@Manumanu a écrit:Je vois, le Template a été (mal) modifié.

Juste avant l'avatar, il y a ça qui ne sert stritement à rien :
Code:
<div style="position: absolute;"><span style="position: relative; bottom: 2px; right: 4px;"></span></div>

Et l'avatar n'est plus dans un lien. Il faudrait remodifier ça, ou mettre une classe à un élément autour de l'avatar, sinon il n'y a aucun moyen direct de le cibler.

Si ce code me sert, il me positionne le "enligne" comme il faut Wink
Code:
<div style="position: absolute;"><span style="position: relative; bottom: 2px; right: 4px;">{postrow.displayed.ONLINE_IMG}</span></div>

Anya31
****

Masculin
Messages : 383
Inscrit(e) le : 10/12/2010

http://touslesloulous.forumactif.com/index.htm
Anya31 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Avatar arrondi

Message par Manumanu le Jeu 27 Sep 2012 - 19:16

Ok, effectivement je les voyais juste vide en regardant le code directement.

Manumanu
****

Masculin
Messages : 437
Inscrit(e) le : 27/12/2011

http://helpinghelps-phpbb2.forumgratuit.org/
Manumanu a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Avatar arrondi

Message par Anya31 le Jeu 27 Sep 2012 - 19:16

@Manumanu a écrit:On précise img parce que c'est sur l'image qu'on veut appliquer l'effet, et le point c'est parce que c'est comme ça qu'on désigne une classe en CSS. Wink

#element c'est pour cibler un id (id="element")
.element c'est pour cibler une classe (class="element")
element c'est pour cibler une balise (<element>)

Ha ben merci beaucoup pour ces précisions Smile

Anya31
****

Masculin
Messages : 383
Inscrit(e) le : 10/12/2010

http://touslesloulous.forumactif.com/index.htm
Anya31 a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum