[Résolu] Barre de recherche google

Bonjour,
J'ai créé un site il y a une dizaine d'années en intégrant une recherche google et, n'étant pas du tout dans l'informatique, je ne me suis occupé que du contenu qui me donnait cela, ce qui je vous l'accorde n'était pas entièrement satisfaisant.

Or je suis en train de récrire mon site en responsive.
J'essaie de modifier les styles de la barre de recherche et du bouton qui n'est pas satisfaisant. Bien que j'ai une clef, je n’arrive pas à la trouver dans le site de google sur customs search qui me dit que je n'ai pas de moteur de recherche et me demande d'en créer un nouveau.
Dans la page https://developers.google.com/custom-search/docs/element, j’ai récupéré un script que j’ai mis directement dans ma page en enlevant les autres et en mettant mon numéro. A priori, il me le prend bien.
1. Comment faire pour modifier les styles ? Cela donne cela dans mon nouveau site.

2. Sinon puis-je créer un autre moteur de recherche sur le même site et modifier les styles ?
Merci d'avance

Bonsoir,

As tu une url à nous montrer ?

Bonjour,
La première image correspond à une page quelconque de mon site vetopsy.fr.
La deuxième image correspond à vetopsy.fr/mag17/example.php.
Merci

J'ai fait quelques recherches par rapport à ton souci.

l'api de google est assez bien fourni. Je pense que tu devrais parcourir cette api
C'est la méthode la plus propre. Il y a d'autres manières, mais là pour le coup, ce ne sera pas propre (bob le bricoleur)

Bonjour,

excuse mon retard pour te répondre car j'étais en vacances. Je vais regarder et je te recontacte.

Merci beaucoup pour ta recherche.

J'ai donc regardé et j'avais déjà vu cet article. C'était l'objet de ma deuxième question du début : est-ce que tu penses que créer un nouveau moteur de recherche ne fera pas doublon avec l'ancien et ne produira pas de conflit ?
Merci d'avance

Hello Osiris67,

Je viens seulement de voir ton msg mp.

En soit, styliser l'input et le bouton, c'est facile. Je n'avais pas approfondit le sujet. Tu n'as pas vraiment besoin de l'api. Tu peux très bien forcer les choses :

pour le css bien que ce ne soit pas des écritures classes, tu peux utiliser !important.

J'ai fait un screenshot qui te montre que c'est faisable de faire du css pour retravailler l'input, le bouton et les résultats :
http://hpics.li/26bfe8b
Modifié par niuxe (28 Aug 2017 - 12:28)

Merci de ta réponse : je vais regarder cela pour voir si je te comprends bien, vu mon manque d'expérience sur le sujet.
Je vais t'écrire prochainement en mp pour une question plus professionnelle.

Bien ! pour le bouton, j'ai résolu mon problème de style très facilement grâce à tes remarques.
Par contre, je n'arrive pas à modifier que partiellement le contenu placé dans le cadre de ma recherche : voir 2ème image du début.
Le script, d'après firebug est :

<td id="gs_tti50" class="gsib_a">
<input id="gsc-i-id1" class="gsc-input" autocomplete="off" size="10" name="search" title="rechercher" style="width: 100%; padding: 0px; border: medium none; margin: 0px; height: auto; outline: medium none; background: rgb(255, 255, 255) url("http://www.google.com/cse/static/images/1x/googlelogo_lightgrey_46x16dp.png") no-repeat scroll left center; text-indent: 48px;" dir="ltr" spellcheck="false" placeholder="Recherche personnalisée" type="text">
</td>

J'ai ciblé le id="gsc-i-id1" en css, et j'ai supprimé l'image de google.

#gsc-i-id1 {
	background-image: none !important;
	text-indent: 2px !important;
   margin-top: -20px !important;
}

Le margin-top négatif me place à peu près le "Recherche personnalisée" au milieu, mais c'est pas terrible !
Par contre, j'essaie de changer le placeholder par "Rechercher dans le site" et je ne trouve pas grand-chose sur le net. J'ai essayé input::placeholder, mais je ne sais pas si c'est la bonne pseudo-class et quel attribut utiliser : content ou value ne fonctionnent pas.
Merci d'avance

Pour ton placeholder, tu as 2 solutions :

1. Ce code devrait faire l'affaire (si le fond du champ est blanc) :

input::placeholder{
    color:#fff !important;
}

C'est pas terrible comme bonne pratique mais ça aura le mérite de fonctionner surement.

2. après ta déclaration de ton js pour ton formulaire de recherche, tu peux faire ceci (si tu veux supprimer l'attribut placeholder. Dans le cas contraire, setAttribute t'aidera):

document.getElementById('gsc-i-id1').removeAttribute('placeholder');

Bonjour
Cette discussion a éveillé mon attention, je me suis dit que je pourrais peut être utiliser cet outil sur mon site.

Simplement la documentation que j'ai trouvée sur Internet explique comment utiliser Google Custom Search mais ne dit pas ce que ça fait, le genre de résultat que l'on obtient, enfin bref je me retrouve comme une poule qui a trouvé un couteau.
Auriez vous de l'information à me communiquer?

Actuellement le site en question dispose d'une icône de recherche dans le menu de chaque page. Quand on clique sur cette icône, ça ouvre une zone pour saisir le texte à rechercher sur le site. Le programme JS récupère ce texte et ouvre une page Google avec comme paramètre

site:nom-du-site texte-à-chercher

Je suppose qu'il s'agit de réaliser quelque chose de similaire, mais ce n'est pas clair dans mon esprit.
Merci de vos conseils

Bonjour,
merci pour tes réponses judicieuses.
Si, ton code 1 est efficace, i.e. elle recouvre bien le "Recherche personnalisée" et le cache, je n'arrive pas à faire fonctionner ton javascript, mais comme je n'y connais rien
Mon script pour appeler la recherche google qui marche bien est :

<script src="http://www.google.fr/jsapi" type="text/javascript"></script>     
<script type="text/javascript" src="/js/rechgoogle.js"></script>

Le script suivant pour supprimer le placeholder, et qui est mis tout de suite après, ne fait rien.

<script type="text/javascript">document.getElementById('gsc-i-id1').removeAttribute('placeholder');</script>

En outre, je veux effectivement remplacer le texte du placeholder, tu m'as dit qu'il faut utiliser setAttribute, mais comment pour remplacer ce " Recherche personnalisée " par "Rechercher dans le site " ?
Merci d'avance

bonsoir osiris67,

Désolé mais j'ai été occupé ces derniers jours.

Je viens d'essayer en console sur ta page : http://vetopsy.fr/mag17/example.php

Normalement, si tu mets ceci tout en bas de page (avant body), ça devrait fonctionner :

<script>document.getElementById('gsc-i-id1').setAttribute('placeholder', "Ce que j'ai envie d'écrire");</script>

tu peux essayer aussi ceci au cas où (après le chargement du dom) :

<script>window.addEventListener('DOMContentLoaded', function(){document.getElementById('gsc-i-id1').setAttribute('placeholder', "Ce que j'ai envie d'écrire");});</script>

Bonjour,
je regarde ton message ce matin après ma journée de voyage d'hier et CELA MARCHE MAGNIFIQUEMENT .
Merci pour ton aide précieuse et ton expertise approfondie et avisée
À bientôt

osiris67 a écrit :
Bonjour,
je regarde ton message ce matin après ma journée de voyage d'hier et CELA MARCHE MAGNIFIQUEMENT .
Merci pour ton aide précieuse et ton expertise approfondie et avisée
À bientôt

Heureux que j'ai pu t'aider dans ta démarche