problème avec le tuto "Ajouter l'avatar du membre à côté de la réponse rapide"

[.gasoline.]

Détails techniques

Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Google Chrome
Capture d'écran du problème :

Voir l'image:

Personnes concernées par le problème : Moi uniquement
Lien du forum : (lien masqué, vous devez poster pour le voir)

Description du problème

bonsoir !

je viens vers vous parce que j'ai un problème avec ce tutoriel juste ici !!

je l'ai ajouté dans mon javascript + css, ça fonctionne mais mal... j'ai en suite trouvé un autre sujet ici, mais malheureusement la solution ne marche pas non plus..
je n'ai aucun autre code css ou javascript qui peut modifier l'éditeur.. donc je ne comprends vraiment pas ce qui peut bloquer :/
si vous pouviez m'aider vous me sauveriez vraiment !!

[*Splash*]

Hi,
Le problème ne vient pas du tuto mais de la taille de ton avatar qui est trop grande, réduit-là !

Reprend le javascript du tuto de Tech et pour la CSS tu mets le code donné par Demeter (second lien), ce code :

Code:

#av_quickreply img{
  position: relative;
  top: 35px;
  left: 15px;
  max-width: 100px;
  max-height: 160px;        
    }
 
#av_quickreply {
    float: left;
    position : absolute;
}

Ton avatar se réduira automatiquement

[.gasoline.]

merci beaucoup pour ta réponse !
le code tel quel ne fonctionne pas.. pour redimensionner l'image il a fallu que je retire les "max" devant width & height.

mon image est maintenant redimensionnée, mais l'éditeur ne bouge pas.. est-ce-qu'il y a un code qui permet de le redimensionner/décaler sur la droite ?

capture d'écran:

[*Splash*]

Tu peux me communiquer ton image d'avatar

[.gasoline.]

bien sûr !

c'est cette image :

https://images2.imgbox.com/10/34/bgfHw3W6_o.png

[*Splash*]

OK

Voilà le rendu en utilisant intégralement le tuto du FDF, celui de Tech, sur mon forum test en version phpBB2



Ce qui veut dire que pour toi le blème ne vient donc pas de ce tuto, mais bien d'ailleurs

[.gasoline.]

après déduction parce que j'ai aucun code qui touche cette partie là du forum, je pense que c'est la largeur de mon forum !
mais je n'ai pas envie de l'élargir, donc savoir si c'est possible via un code de redimensionner l'éditeur ?

[*Splash*]

Il a quelle largeur ton forum ?

[.gasoline.]

normalement à 60% et là pour tester avec l'avatar je l'ai mit à 80%

[*Splash*]

Alors pour une largeur de 60%, tu supprimes totalement le code CSS pour ne garder que le script, ton avatar viendra se positionner centré au-dessus du cadre de la réponse rapide

[.gasoline.]

c'est pas ce que je souhaite, mais je met un screen de ce que je voudrais arriver à avoir.

Spoiler:

[katia26]

Juste pour voir le lien du forum j'éditerai ensuite.

EDIT :

Normalement ça devrait régler le problème

Code:

form#quick_reply {
    margin-left: auto;
    margin-right: auto;
    width: 400px; /* La taille à modifier */
}

[Invité]

Hello .gasoline. ,
tes avatars ont des dimensions importantes 200px par 320px.

Soit on réduit les avatars de moitié et le style sera ainsi:

Code:

#av_quickreply img
{
position: relative;
max-width: 100px !important;
max-height: 160px!important;
border-radius:6px;
}
 
#av_quickreply
{
float:left;
position : absolute;
width:100px;
height:160px;
margin-left:80px;
margin-top: 40px;
}


Soit on ne touche pas à la dimensions des avatars et on augmente la hauteur de l'éditeur en proportion de l'avatar :

Code:

#av_quickreply img
{
position: relative;
width:200px;
height:320px;
border-radius:6px;
}
 
#av_quickreply
{
    float: left;
    height: 320px;
    margin-left: 0px;
    margin-top: 5px;
    position: absolute;
    width: 200px;

}

div.sceditor-container{min-height:320px !important;}


Avec ce style tu peux toujours déplacer l'éditeur sur la gauche en ajoutant left avec une valeur afin de mettre un espace entre l'avatar et l'éditeur à cette div:

Code:

div.sceditor-container{min-height:320px !important;left:30px!important;}

---

---

Ou en poussant un peu plus loin avec une animation au survol de l'éditeur on affiche l'avatar:

Code:

#av_quickreply img
{
position: relative;
width:200px;
height:320px;
border-radius:6px;
}
 
#av_quickreply
{
    float: left;
    height: 320px;
    margin-left:250px;
    margin-top: 5px;
    position: absolute;
    width: 200px;
  -webkit-transition: margin-left 0.5s ease-in-out;
-moz-transition: margin-left 0.5s ease-in-out;
-o-transition: margin-left 0.5s ease-in-out;
transition: margin-left 0.5s ease-in-out;


}
#quick_reply:hover #av_quickreply{margin-left:0px;}
div.sceditor-container{min-height:330px !important;left:30px!important;}


a++

[.gasoline.]

merci beaucoup à vous !! en bidouillant avec tous les codes que vous m'avez donné j'ai réussis.