Avatar arrondi

3 participants

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

Résolu Avatar arrondi

Message par Anya31 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
https://forum.forumactif.com/t337951-arrondir-l-avatar?highlight=arrondir+avatar
et puis un autre, qui me met la puce à l'oreille
https://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

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 Mer 26 Sep 2012 - 23:42

Bonjour,

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

Ifreann
**

Féminin
Messages : 86
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 Mer 26 Sep 2012 - 23:47

de l'image

merci
Anya31

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 Mer 26 Sep 2012 - 23:50

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

Ifreann
**

Féminin
Messages : 86
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 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

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 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

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 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

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 Jeu 27 Sep 2012 - 0:10

Merci
mais ça ne marche pas
Anya31

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 Jeu 27 Sep 2012 - 0:11

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

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 Jeu 27 Sep 2012 - 0:23

oui c'est bien cela
Anya31

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 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

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 Jeu 27 Sep 2012 - 0:39

l'histoire de ce template, c'est par là :
https://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

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 Invité 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++
Anonymous

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Avatar arrondi

Message par Manumanu Jeu 27 Sep 2012 - 15:06

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

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 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

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 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

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 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

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 Jeu 27 Sep 2012 - 19:16

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

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 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

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

- Sujets similaires

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