Chatbox latéral qui ne s'affiche plus depuis le changement de thème

[vianneyh]

Détails techniques

Version du forum : phpBB3
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : Depuis que j'ai mis le thème de noël
Lien du forum : http://train-68.forumactif.org/

Description du problème

Bonjour ,

Je ne sais pas si cela est lié ou pas, mais depuis que j'ai mis le thème temporaire de noël voici le premier problème :
L'avatar sortait de la barre toblaar ensuite je l'ai donc enlevé et maintenant me rend compte que la chatbox que j'avais fait en latéral ne s'affiche plus ....
Et tout ces codes vienne de ce forum et c'est du JavaScript je ne comprend pas pourquoi .

Merci d'avance pour votre aide .

[Oka.mi]

Bonjour,

Dans votre JavaScript, vous avez

Code:

.fa_avatar{width:5px;height:5px;position:relative;top:-3px;margin-right:5px;border-radius:3px;margin-bottom:-10px}

ça ne doit pas figurer là puisque c'est du CSS (peut-être pour ça que votre avatar se fait la malle d'ailleurs).
Enlevez-le pour le mettre dans le panneau d'administration > Affichage > Images et Couleurs > Couleurs > Feuille de style CSS

[vianneyh]

Merci pour votre réponse j'ai essayer mais il ne s'affiche pas du tout je me demande si il y à pas un problème avec les javascripts .... Comment peut on vérifier si ils sont bien activé ou non ?

[Oka.mi]

Comment peut on vérifier si ils sont bien activé ou non ?

Panneau d'administration > Modules > HTML & JavaScript > Gestion des codes JavaScript

Mais le JavaScript est activé sur votre site puisque je le vois

Merci pour votre réponse j'ai essayer mais il ne s'affiche pas du tout

Je vous ai demandé de retirer le passage CSS, or il y est toujours...

Code:

jQuery(document).ready(function(){jQuery('body').append('<table style="position: fixed; bottom: 50px; left: 0px;background-color: #ffffff;z-index:10000;"><tr><td><div id="panneau" scrolling="no" style="width: 800px; height: 400px; display: none;" marginwidth="0" marginheight="0" frameborder="0"><iframe src="/chatbox/index.forum?page=front" style="width: 800px; height: 400px;" ></iframe></div></td><td style="vertical-align: bottom;"><img src="http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png" onClick="document.getElementById(\'panneau\').style.display=(this.src==\'http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png\')?\'block\':\'none\';this.src=(this.src==\'http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png\')?\'http://i81.servimg.com/u/f81/11/21/85/73/fermer10.png\':\'http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png\';"/></td></tr></table>')});.fa_avatar{width:5px;height:5px;position:relative;top:-3px;margin-right:5px;border-radius:3px;margin-bottom:-10px}$(function(){if(_userdata.user_id==-1){var pseudo="InvitÃ:copyright:"}else{pseudo=_userdata.username}$("a.mainmenu:first-of-type").closest("td").append("<div>"+_userdata["avatar"]+"<br />"+pseudo+"</div>")});

ça devrait être

Code:

jQuery(document).ready(function(){jQuery('body').append('<table style="position: fixed; bottom: 50px; left: 0px;background-color: #ffffff;z-index:10000;"><tr><td><div id="panneau" scrolling="no" style="width: 800px; height: 400px; display: none;" marginwidth="0" marginheight="0" frameborder="0"><iframe src="/chatbox/index.forum?page=front" style="width: 800px; height: 400px;" ></iframe></div></td><td style="vertical-align: bottom;"><img src="http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png" onClick="document.getElementById(\'panneau\').style.display=(this.src==\'http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png\')?\'block\':\'none\';this.src=(this.src==\'http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png\')?\'http://i81.servimg.com/u/f81/11/21/85/73/fermer10.png\':\'http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png\';"/></td></tr></table>')});$(function(){if(_userdata.user_id==-1){var pseudo="InvitÃ:copyright:"}else{pseudo=_userdata.username}$("a.mainmenu:first-of-type").closest("td").append("<div>"+_userdata["avatar"]+"<br />"+pseudo+"</div>")});

[vianneyh]

Mais comment fait-on pour retirer un css il suffit de supprimer ce qui est marqué dans css non ?

Je suis un peu à la ramasse avec tous ça .... Désoler

[Oka.mi]

Mais comment fait-on pour retirer un css il suffit de supprimer ce qui est marqué dans css non ?

Je suis un peu à la ramasse avec tous ça .... Désoler

Pas de souci, je vous explique.

Dans votre panneau d'administration, vous avez :
- un endroit pour mettre du JavaScript (Modules > HTML & JAVASCRIPT > Gestion des codes Javascript)
- un endroit pour mettre du CSS (Affichage > Images et Couleurs > Couleurs > Feuille de style CSS)

Là, ce que je vous dis, c'est que vous avez mis du CSS à l'endroit où vous mettez habituellement du JavaScript : ce n'est pas fait pour.
Du coup, il faut que vous alliez à l'endroit où vous avez mis le JavaScript de la Chatbox (Modules > HTML & JAVASCRIPT > Gestion des codes Javascript), que vous retiriez le morceau de CSS qui s'est tapé l'incruste (pour faire simple, vous avez juste à copier-coller le code de mon dernier post, j'ai fait le retrait pour vous).
En fait, ce morceau de CSS, qui n'était pas à sa place, vous le remettez à l'endroit où vous mettez votre CSS (Affichage > Images et Couleurs > Couleurs > Feuille de style CSS).

[vianneyh]

Merci pour votre patience il me semble avoir bien fait les choses mais cela ne marche toujours pas en dessous des feuilles css faut il cocher quelque chose dans la section oui ?

[Oka.mi]

Ça ne marche toujours pas car le morceau de css est toujours dans le JavaScript ^^

On va procéder autrement : rendez-vous dans Modules > HTML & JAVASCRIPT > Gestion des codes Javascript, prenez une capture d'écran de la page et mettez-la ici (j'ai juste besoin de voir la liste des Javascripts installés)

[vianneyh]

Je suis un boulet voici la photo

[Oka.mi]

Merci

Pour les trois premiers scripts :
"chatbox latéral"
"avatar barre toolblar"
"Avatar dans la Toolbar"

Montrez-moi le contenu de chacun de ces scripts séparément et à l'aide des balises code

Code:

[code]VOTRE CODE JAVASCRIPT[/code]

OU si vous ne vous sentez pas à l'aise avec ça, via captures d'écran.

[vianneyh]

"chatbox latéral"

Code:

jQuery(document).ready(function(){jQuery('body').append('<table style="position: fixed; bottom: 50px; left: 0px;background-color: #ffffff;z-index:10000;"><tr><td><div id="panneau" scrolling="no" style="width: 800px; height: 400px; display: none;" marginwidth="0" marginheight="0" frameborder="0"><iframe src="/chatbox/index.forum?page=front" style="width: 800px; height: 400px;" ></iframe></div></td><td style="vertical-align: bottom;"><img src="https://i.servimg.com/u/f81/11/21/85/73/ouvrir10.png" onClick="document.getElementById(\'panneau\').style.display=(this.src==\'https://i.servimg.com/u/f81/11/21/85/73/ouvrir10.png\')?\'block\':\'none\';this.src=(this.src==\'https://i.servimg.com/u/f81/11/21/85/73/ouvrir10.png\')?\'https://i.servimg.com/u/f81/11/21/85/73/fermer10.png\':\'https://i.servimg.com/u/f81/11/21/85/73/ouvrir10.png\';"/></td></tr></table>')});$(function(){if(_userdata.user_id==-1){var pseudo="InvitÃ:copyright:"}else{pseudo=_userdata.username}$("a.mainmenu:first-of-type").closest("td").append("<div>"+_userdata["avatar"]+"<br />"+pseudo+"</div>")});

"avatar barre toolblar"

Code:

$(function(){
  if ( _userdata.user_id == -1) {
    var pseudo = "Invité";
  } else {
    pseudo = _userdata.username;  
  }
  $("a.mainmenu:first-of-type").closest("td").append("<div>" + _userdata["avatar"] + "<br />" + pseudo + "</div>");
});

"Avatar dans la Toolbar"

Code:

.fa_avatar {
  width: 5px; /* A modifier */
  height: 5px; /* A modifier */
  position: relative;
  top: -3px;
  margin-right: 5px;
  border-radius: 3px;
  margin-bottom: -10px;
}

[Oka.mi]

Top !

Alors vous allez commencer par supprimer le script "Avatar dans la Toolbar" (cocher à droite et ), car c'est lui qui contient le css alors qu'il ne doit pas se trouver là
Ensuite dans "avatar barre toolblar", remplacez tout son contenu par

Code:

$(function() {
    $(function() {
        $('#fa_welcome').prepend('<span class="fa_avatar">' + _userdata.avatar + '</span>')
    })
});

(C'est une version à jour du script)

Une fois que c'est fait, rendez-vous dans "chatbox latéral" et remplacez tout son contenu par

Code:

jQuery(document).ready(function(){jQuery('body').append('<table style="position: fixed; bottom: 50px; left: 0px;background-color: #ffffff;z-index:10000;"><tr><td><div id="panneau" scrolling="no" style="width: 800px; height: 400px; display: none;" marginwidth="0" marginheight="0" frameborder="0"><iframe src="/chatbox/index.forum?page=front" style="width: 800px; height: 400px;" ></iframe></div></td><td style="vertical-align: bottom;"><img src="http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png" onClick="document.getElementById(\'panneau\').style.display=(this.src==\'http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png\')?\'block\':\'none\';this.src=(this.src==\'http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png\')?\'http://i81.servimg.com/u/f81/11/21/85/73/fermer10.png\':\'http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png\';"/></td></tr></table>')});

Avec ça, le problème de la chatbox latérale devrait être réglé, mais vu que vous avez gardé le script de l'avatar dans la toolbar, je vous propose de réparer l'affichage de l'avatar dans la foulée
Pour cela rendez-vous dans Affichage > Images et Couleurs > Couleurs > Feuille de style CSS, et copiez-y le morceau de CSS anciennemment égaré au milieu des Javascripts !

Code:

.fa_avatar img {
      width: 25px; /* A modifier */
      height: 25px; /* A modifier */
      position: relative;
      top: -3px;
      margin-right: 5px;
      border-radius: 3px;
      margin-bottom: -10px;
    }

J'ai pris la liberté de mettre 25px de large et de hauteur à l'avatar car s'il fait 5x5 comme c'est initialement paramétré, vous n'y verrez pas grand-chose ^^

[vianneyh]

Merci beaucoup nickel tout refonctionne merci pour votre patience

[Oka.mi]

Avec grand plaisir ^^

Bonne soirée