Problème bloc de connexion et javascript

[Melow]

Détails techniques

Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://test-aendryl.forumactif.org/

Description du problème

Bonjour à vous tous !

Alors voilà, je suis en plein travail d'un nouveau design pour mon forum et j'ai, entre autre, utilisé la solution de Ange_tuteur sur ce > Topic <.
Pas de souci, ça fonctionne du feu de Dieu.

Malheureusement, je viens de modifier ma barre de navigation pour qu'elle vienne se coller au bas de mon forum. Pareil, no problemo pour ça. Seul et unique souci... c'est que du coup, mon bloc de connexion n'apparaît plus.

Alors, je suis allée fouiner dans le javascript et je suppose que le souci se trouve dans un bottom/top qui devrait être modifié mais... je suis bien trop novice dans le javascript pour oser tripoter ce long code un peu chinois.

Et tant que j'y suis, est-il possible de modifier la forme et les couleurs de ce bloc de connexion ? Je trouve l'idée d'un bloc vraiment géniale. Pourriez-vous m'aider à le remettre à sa place mais également à le personnaliser un petit peu ? Quelques explications me suffiront, je pense réussir à me dépatouiller car j'imagine que ça fonctionne un peu comme le CSS pour la personnalisation...

En vous remerciant d'avance ♥
Melow

[Melow]

UP siouplé

[Melow]

UP SVP !

[Melow]

Troisième UP... !

[Melow]

Rebonjour,

Je reviens avec des nouvelles... Après trifouillage de mon code javascript, j'ai trouvé comment le modifier au niveau de l'apparence. J'me débrouillerai donc pour ça.

Je suis néanmoins toujours coincée par cette histoire de bloc de connexion. J'imagine que ça doit se jouer sur le offset ou un truc dans ce genre là... mais j'n'y comprends tellement rien...

Code:

(function() {
  var lang = {
    title : 'Veuillez entrer votre nom d\'utilisateur et votre mot de passe pour vous connecter.',
    username : 'Nom d\'utilisateur : ',
    password : 'Mot de passe : ',
    automatic : 'Connexion automatique : ',
    login : 'Bienvenue sur les Terres d\'Aëndryl',
    register : 'S\'enregistrer',
    forgot : 'Récupérer mon mot de passe',
 
    redirect : window.location.href // page the user is redirected to upon login
  };
 
  // quick login theme
  document.write('<style type="text/css">#fa_quick_login{color:#333;font-size:13px;font-family:Arial,Verdana,Sans-serif;background:#FFF;border:1px solid #CCC;border-radius:3px;box-shadow:0 6px 12px rgba(0,0,0,.175);margin-top:20px;position:fixed;z-index:40000;width:400px}#fa_quick_login:before{content:url("http://nsa38.casimages.com/img/2016/02/16/16021604230465165.png");position:absolute;right:15px;bottom:-10px}#fa_right a.rightHeaderLink[href$="/login"]{padding:0 6px}#fa_right a.rightHeaderLink.fa_login_actif{color:#333!important;background-color:#FFF!important}#fa_quick_login a.gensmall{color:#069}#fa_quick_login a.gensmall:hover{color:#333}#fa_quick_login input{color:#333;background:#FFF;border:1px solid #CCC;border-radius:3px;padding:3px;margin:2px;cursor:text}#fa_quick_login input:hover{border-color:#39C}#fa_quick_login input:focus{border-color:#333;outline:0}#fa_quick_login input.mainoption{color:#39C;border:1px solid #39C;background:0 0;font-weight:700;display:block;width:100%;padding:6px 3px;margin-top:10px;cursor:pointer;transition:900ms}#fa_quick_login input.mainoption:hover{color:#FFF;background:#39C}#fa_quick_login input.mainoption:focus{color:#FFF;background:#8b5;border-color:#8B5}#fa_quick_login table.forumline,#fa_quick_login td,#fa_quick_login th,#fa_quick_login tr{border:none!important;background:0 0!important;border-radius:0!important;white-space:normal}#fa_quick_login .thHead{color:#333;font-size:13px;font-family:"Trebuchet MS",Arial,Verdana,Sans-serif}#fa_quick_login td{font-size:13px;padding:3px}</style>');
 
  $(function() {
    if (!_userdata.session_logged_in) {
      var container = document.createElement('DIV');
      container.id = 'fa_quick_login';
      container.style.display = 'none';
      container.innerHTML = '<form action="/login" method="post" name="form_login"><table class="forumline" width="100%" border="0" cellspacing="0" cellpadding="4" align="center"><tbody><tr><th colspan="3" class="thHead" nowrap="nowrap" height="25">' + lang.title + '</th></tr><tr><td width="100%" align="center" class="row1"><table cellpadding="0" cellspacing="0" border="0"><tbody><tr><td class="row1 align_gauche"><table width="100%" border="0" cellspacing="1" cellpadding="0"><tbody><tr><td class="align_droite" width="50%"><span class="gen">' + lang.username + '</span></td><td width="50%"><input type="text" name="username" value="" size="25" maxlength="40"></td></tr><tr><td class="align_droite"><span class="gen">' + lang.password + '</span></td><td><input type="password" name="password" size="25" maxlength="32"></td></tr><tr align="center"><td colspan="2"><span class="gen">' + lang.automatic + '<input type="checkbox" name="autologin" checked="checked"></span></td></tr><tr align="center"><td colspan="2"><input type="hidden" name="redirect" value="' + lang.redirect + '"><input type="hidden" name="query" value=""><input type="hidden" name="tt" value="1"><input class="mainoption" type="submit" name="login" value="' + lang.login + '"></td></tr><tr align="center"><td colspan="2"><br><span class="gensmall"><a class="gensmall" href="/register">' + lang.register + '</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a class="gensmall" href="/profile?mode=sendpassword">' + lang.forgot + '</a></span></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table></form>';
      document.body.appendChild(container);
 
      $(function() {
        var login = $('a.mainmenu[href="/login"]')[0];
 
        if (login) {
          login.onclick = function() {
            var login = document.getElementById('fa_quick_login'), offset = this.getBoundingClientRect(), loffset;
 
            if (login) {
              if (/none/.test(login.style.display)) {
                login.style.display = '';
            
                loffset = login.getBoundingClientRect();
                login.style.top= offset.top+ 30 + 'px';
                login.style.left = offset.left - ((loffset.right - loffset.left) - (offset.right - offset.left)) + 'px';
            
                login.getElementsByTagName('FORM')[0].username.focus();
                this.className += ' fa_login_actif';
              } else {
                login.style.display = 'none';
                this.className = this.className.replace(/fa_login_actif/, '');
              }
            }
        
            return false;
          };
        }
      });
    }
  });
}());

Merci d'avance. J'a joué un peu avec les offset mais je n'ose pas être trop téméraire.


EDIT : Sujet résolu.