Installer barre de recherche Google sur la même ligne que la barre de recherche Forumactif

[Cloo]

Bonjour,

Sur mon forum principal, j'ai installé une barre de recherche Google, avec la méthode indiquée sur ce tutoriel, en mettant le code script donné par Google Search Engine dans le message d'accueil du forum sur la page principale.

Ça fonctionne très bien et ça donne ceci:
http://accrosjardin.forumactif.com/
la barre de recherche Forumactif à droite, plus petite. Et en-dessous, avant le tableau des catégories, la barre de recherche Google sur toute la largeur.


Maintenant, je voudrais, si possible, mettre la barre de recherche Google au même niveau que la barre de recherche Forumactif, la barre de recherche Google à gauche, la barre de recherche Forumactif à droite.
Je comprends très bien qu'il faut que j'utilise la 2ème méthode donnée dans le tutoriel, soit créer une fonction Javascript, qui est celle-ci:

Code:

$(function () {
  //Renseigner ici entre ' ' le code obtenu sur Google
  var cx = '016741246194126730176:lqprllnqaum';
 
        if($("div#search-box").length){ 
      //phpBB3 avec barre de recherche
      $("div#search-box").html("<div id='my_gs'><gcse:search></gcse:search></div>");
  }else{
      if($("div#page-body").length){
        //phpBB2, phpBB3 sans barre de recherche & punBB
        $("<div id='my_gs'><gcse:search></gcse:search></div>").insertBefore("div#page-body");
      }else{
        //Invision
        $("<div id='my_gs'><gcse:search></gcse:search></div>").insertAfter("div#submenu");
      }
  }
 
  var gcse = document.createElement('script');
  gcse.type = 'text/javascript';
  gcse.async = true;
  gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
      '//www.google.com/cse/cse.js?cx=' + cx;
  var s = document.getElementsByTagName('script')[0];
  s.parentNode.insertBefore(gcse, s);
});

et ce qu'il faut dans la feuille CSS pour personnaliser le tout:

Code:

/* Barre de recherche Google */
.my_gs{
          /* Propriétés CSS (sans !important) */
    }
   
    div#my_gs{
            width: 500px;
    }
    input.gsc-input{
            background-color: #F8FFE3 !important;
            color: #072E04 !important;
          /* Propriétés CSS (avec !important) */
    }
    #gsc-i-id1{
            /* Propriétés CSS (avec !important) */
    }
    input.gsc-search-button{
          /* Propriétés CSS (avec !important) */
            color: green !important;
    }

Je fais cet essai sur mon forum test que vous pouvez voir ici:
http://accrosjardintest.forumactif.com/

On voit bien la barre de recherche Google, placée à droite de l'écran.
J'ai l'impression que ce script est fait pour remplacer la barre de recherche standard par la barre de recherche Google.
Est-il possible de conserver les deux? Et d'aligner la barre de recherche Google à gauche en conservant la barre de recherche standard à droite?

Merci à ceux qui voudront bien m'aider... le Javascript n'est pas mon fort...


Cloo

[Cloo]

Merci d'avance à ceux qui auraient une petite idée

[Cloo]

J'ai réussi!!!

Dans le template overall-header, j'ai localisé l'endroit où se trouvait le code d'affichage de la barre de recherche standard Forumactif.

J'ai modifié à cet endroit-là pour faire un tableau de 2 colonnes/1 rangée.
Dans la 1ère colonne, j'ai mis le code de la script que j'avais dans le message d'accueil de mon forum principal, celui qui affichait la barre de recherche Google sur toute la largeur en lieu et place du message d'accueil.
Dans la 2ème colonne, le code qui était là pour afficher la barre de recherche standard.

Dans la feuille CSS, ceci pour ajuster la taille de la barre de recherche:
div#my_gs{width: 300px; }

et pour la barre de recherche standard:
#search-box #keywords {width: 300px;}

Vous pouvez voir le résultat ici, sur mon forum test:
http://accrosjardintest.forumactif.com/
Il se peut que je fasse quelques ajustements cosmétiques avant de l'implanter sur mon forum principal.

Si vous avez des commentaires, n'hésitez pas!

[Ajesto]

Ou alors, solution plus simple (Testé sur votre forum principal)
Mettre ceci dans votre CSS :

Code:

.gsc-control-cse {
    position: absolute!important; /* L'objet devient absolu */
    width: 400px!important; /* Largeur (Mettre 1200px pour que sa fasse toute la largeur du forum) */
    top: 392px!important; /* La barre se trouvera à 392px du haut de la fenêtre */
}

Laiorm

[Cloo]

Oui, je viens de l'essayer aussi dans Firebug, ça fonctionne, mais ça empiète sur les boutons au-dessus et le texte en dessous, il faut sûrement jouer avec des attributs padding?

Mais ma solution a l'avantage que la barre de recherche Google soit présente sur toutes les pages où là barre de recherche standard est présente. Certes un peu plus complexe, mais maintenant que c'est codé... il faut juste que je me souvienne que la définition de la barre est là, si jamais je change quelque chose (comme l'id, par exemple).

[Cloo]

Ou alors, solution plus simple (Testé sur votre forum principal)
Mettre ceci dans votre CSS :

Code:

.gsc-control-cse {
    position: absolute!important; /* L'objet devient absolu */
    width: 400px!important; /* Largeur (Mettre 1200px pour que sa fasse toute la largeur du forum) */
    top: 392px!important; /* La barre se trouvera à 392px du haut de la fenêtre */
}

Laiorm

Bonjour,

Je reprends ceci sur mon forum test:
http://accrosjardintest.forumactif.com/
parce que le "glitch", le soubresaut causé par l'affichage de la barre Google sur chaque page m'énerve...
Alors, je fais un test sur le forum test en remettant la script dans le message d'accueil, et avec le CSS ci-dessus.

Ça fonctionne bien, mais je voudrais aligner la barre de recherche standard qui est maintenant trop haute, trop collée aux boutons de navigation.
J'ai voulu mettre l'équivalent, mais elle s'est retrouvée complètement à droite, à l'extérieur du cadre du forum.
Alors, j'ai mis ceci dans le CSS:

Code:

#search-box #keywords {
    width: 300px;
    position: relative!important;
    top: 20px!important;
}


Ce qui est parfait pour la zone où on entre les mots-clés, mais le bouton ne suit pas. Que faut-il que je rajoute pour le bouton?

Voir ici --> http://accrosjardintest.forumactif.com/

Merci d'avance!

[Ajesto]

Dans le CSS :

Code:

p.nomargin input.button2[value^="Rechercher"] {
    margin-bottom: -40px;
}

[Cloo]

Ah, c'est parfait, merci beaucoup!