Déplacer le messenger

[Aspen_Hayes]

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

Bonjour,

J'ai installé le messenger et j'aimerai le déplacer dans ma barre latérale. Malgré plusieurs essais, je ne trouve pas la bonne solution. L'icon se met "par dessus" et ne s'intègre pas comme je le souhaite. Je voudrais que cela apparaisse à la 1ère case, mais je sèche...

Je vous joins les codes.

Merci à la personne qui saura m'aider.

Le JS du messenger vient d'ici (trop long pour être mis ici): https://raw.githubusercontent.com/SethClydesdale/forumactif-messenger/master/fam.js

Le code pour la barre venant du template overall header:

Spoiler:

Le CSS concerné:

Spoiler:

[Toryudo]

Bonjour !

Au plus simple, il va falloir remplacer la ligne suivante dans le script :

Code:

document.body.appendChild(frag);

par la ligne suivante :

Code:

$('#icon-sidebar ul li:first').append(frag);

Dans votre élément #icon-sidebar, au niveau du code HTML, vous allez ensuite créer un nouveau <li></li> vide en première position du <ul> et c'est ce li qui va recevoir le bouton du messenger, grâce à la modification faite dans le script. Plus qu'une chose à faire ensuite : modifier le CSS pour que le bouton #FAM-button ne soit plus en position fixe, comme ceci par exemple :

Code:

#icon-sidebar #FAM-button {
  position: inherit;
}

Et le bouton devrait bien apparaitre dans la barre latérale en première position :

[Aspen_Hayes]

Bonjour Toryudo,

Merci beaucoup, cela fonctionne parfaitement !

J'ai une autre petite question: comment faire pour que la fenêtre du messenger s'ouvre à la gauche du bouton ? Parce que pour le moment quand je clique dessus, la fenêtre s'ouvre toujours en bas, comme si le bouton s'y trouvait toujours.

[Toryudo]

Alors, vous allez devoir modifier deux choses dans le script :

Code:

#FAM{color:#333;font-size:13px;background:#FFF;border:1px solid #DDD;position:fixed;height:70%;width:40%;min-height:400px;min-width:300px;right:3px;z-index:99999;visibility:visible;opacity:1;bottom:35px;transition-property:top,right,bottom,left,height,width,margin,opacity,visibility;transition-duration:500ms}

Ici, on va passer la valeur right de 3px à 80px :

Code:

#FAM{color:#333;font-size:13px;background:#FFF;border:1px solid #DDD;position:fixed;height:70%;width:40%;min-height:400px;min-width:300px;right:80px;z-index:99999;visibility:visible;opacity:1;bottom:35px;transition-property:top,right,bottom,left,height,width,margin,opacity,visibility;transition-duration:500ms}

Et ensuite, au niveau de cet élément, toujours dans le script :

Code:

#FAM[data-hidden=true]{visibility:hidden;opacity:0;bottom:-100%}

On va remplacer bottom par right, pour que la fenêtre vienne de la droite plutôt que du bas :

Code:

#FAM[data-hidden=true]{visibility:hidden;opacity:0;right:-100%}

Ça devrait suffire !

[Aspen_Hayes]

Merci infiniment, cela fonctionne à la perfection !!
Merci d'avoir pris le temps de m'aider.