Recherche Personnalisée Google (CSEv2) aide sur le style?

J'ai besoin d'aide sur le style de la Recherche Personnalisée Google Boîte (pas les résultats)

Styles anciens ont été à l'aide de la form balises, où vous pouvez facilement le style le look & feel de la zone de recherche.

<form action="/search" id="searchbox_abc:123" class="search">
    <input type="hidden" name="cx" value="abc:12">
    <input type="hidden" name="cof" value="FORID:XX">
    <input type="text" name="q" size="16" class="smalltext">                    
    <input type="submit" name="sa" value="SEARCH" class="smalltext">
</form>

Avec la nouvelle CSEv2 code, il est contenu dans des balises de script:

<script>
  (function() {
    var cx = 'abc:123';
    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);
  })();
</script>

et vous devez mettre les balises suivantes où vous souhaitez que la Boîte de Recherche pour être affiché.

<gcse:search></gcse:search>

J'ai besoin d'aide sur la façon de style de la nouvelle CST à ressembler à la précédente. (taille de la police, le bouton d'entrée et de tailles de champ..etc, exactement le même style qu'avant..appliquer classes/définir la police etc..)

Merci!

OriginalL'auteur whispers | 2013-11-20

8

Vous n'avez pas besoin de faire tout ça juste ajouter ceci à la fin de la recherche de google <script> balise Comme ceci:
```
<script>
    (function() {
        var cx = '017524632059031635296:oiqsdcln6tk';
        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);
    })();
</script>
<gcse:searchresults-only></gcse:searchresults-only>
```
Assurez-vous d'ajouter <gcse:searchresults-only ></gcse:searchresults-only> au bas de la fermeture de balise de script Et ajouter votre propre formulaire Par exemple:
```
<form action="" method="GET">
  <input class="input" name="q" placeholder="Search...">
</form>
```
Puis le style de Ce juste la façon dont vous le style de n'importe quelle balise HTML, Et vous êtes bon pour Aller! et Il fonctionne exactement de la façon dont Il l'habitude de travailler. PS. Si vous wan pas à l'utilisateur d'un autre lieu, par Exemple search.html il suffit d'ajouter ce <form action="search.html" method="GET"> place de cette <form action="" method="GET">

Espère que Cela vous a aidé! -Arqetech

Hey Arqetech. Pas de doute, votre solution fonctionne. mais il crée un "paramètre d'url" et l'ajoute à la barre d'adresse URL. signification sur le rafraîchissement de la page vous permettra de charger la dernière sauvegarde des paramètres de recherche et de charge de la recherche personnalisée automatiquement. Avez-vous une solution pour cela ?
Nanjappa Désolé pour ma réponse tardive, Mais je n'ai pas tout à fait le faire! Veuillez expliquer plus brièvement
Exemple, si votre url est dire - localhost:8080 et vous recherchez pour dire play, la recherche montre et l'url change maintenant à localhost:8080/?q=play/. Maintenant, lors de l'actualisation de l'url ne change PAS, mais finit par la recherche de la parole play de nouveau.
Alors vous voulez un $_POST demande au lieu de $_GET par défaut, il utilise $_GET
Vous avez besoin de changer la <form action="" method="GET"> à <form action="" method="POST">

OriginalL'auteur Arqetech
7
1. Utiliser un DOM outil d'inspection comme celui qui est intégré dans le Google Chrome ou Firefox navigateurs. (Clic droit sur un élément et sélectionnez "Inspecter.") Cela vous permettra de déterminer l'élément Id/classes et de leurs styles.
2. Écrire des règles CSS qui remplacent ceux qui sont des styles, comme ceci:
  input.gsc-input {} input.gsc-search-button {} form.gsc-search-box {} div.gsc-control-cse {}
OriginalL'auteur bwhet
2

Sur le Le CST page,
1. Choisir le moteur de recherche, qui vous voulez style.
2. Cliquez sur Look and feel
3. Cliquez sur le Customize onglet
Cela a des options pour la thématisation de tout composant de la CST que vous voulez de style.

Mise à jour

Si vous voulez plus d'options que celles proposées dans le panneau de contrôle, vous devrez utiliser l'API, un exemple d'utilisation est au bas de la page.

Vous serait particulièrement intéressé par Recherche personnalisée de l'Élément de Contrôle de l'API, où vous pouvez spécifier la balise HTML, l'id de l'élément, que vous pouvez ensuite stlye.

Exemple De Démo :
```
<div id="test"></div>
<style type="text/css">
    #test input {
      font-size: 32px;
      color: red;
    }
</style>

<script>
var myCallback = function() {
  if (document.readyState == 'complete') {
    google.search.cse.element.render({
          div: "test",
          tag: 'search'
   });
  } else {
    google.setOnLoadCallback(function() {
        google.search.cse.element.render({
              div: "test",
              tag: 'search'
            });
    }, true);
  }
};

window.__gcse = {parsetags: 'explicit', callback: myCallback};
(function() {
  var cx = '008717607452966325908:cegvvfhkhvk'; //Insert your own Custom Search engine ID here
  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);
})();
</script>
```
Merci,..faction byut qu'on ne vous donne beaucoup de contrôle..seulement sur les quelques frontière ou les couleurs de fond... comment puis-je obtenir le même "style" j'ai déjà eu tout en utilisant les balises de FORMULAIRE? Comme la taille de la police et la taille des boutons/champ de saisie...etc DONC, vous dites qu'il est là et je l'ai raté? Ou vous n'avez pas lu le post entièrement? J'ai besoin d'être en mesure de style/ajouter des classes, comme déjà fait pour correspondre à la taille et le courant le thème de ce site. Merci!
Ah, raté dans la question, j'ai mis à jour la réponse 🙂
Merci. Mais à la fin, je ne pourrais pas le faire fonctionner. Un exemple serait le meilleur si possible? 🙂 Je ne pourrais pas obtenir le champ de saisie à une taille spécifique (toujours trop hauts, pas quelque chose de petit comme 15px en hauteur ou quelque chose de la taille de police 9px je ne pourrais pas obtenir un petit bouton (mais n'a d'obtenir une nouvelle image, le bouton BG, cependant l'icône de la loupe/overlay était toujours là) Et avait encore la marque google/image dans le champ de saisie. des exemples spécifiques de ciblage/en remplaçant le css pour que l'aspect est apprécié. (rappelez-vous maintenant, c'est seulement cibler le champ de saisie & bouton, pas les résultats encore) Merci
Pour quelqu'un d'autre qui veulent/prêt à aider.. un exemple de la façon d'obtenir le CST v2 pour ressembler à ceci: lien Merci à tous ceux qui peuvent poster des CSS simple pour remplacer Google CSS et rendre les composants ressembler à l'image ci-dessus (ce qui est fait à l'aide de CSS et de l'âge de balises de FORMULAIRE) Merci!!!!

OriginalL'auteur Pranav 웃

POUR EFFACER FILIGRANE:

.gsc-clear-button{
 display:none !important;
}
.cse input.gsc-input,input.gsc-input{
background-image:none !important;
height:30px !important;
}

OriginalL'auteur Nithin

0

La façon dont j'ai obtenu ce travail..
1. Set asynchrone à false dans google script (gcse.async = false);
2. Ajouter css ci-dessous. Cela dépend probablement sur l'ordre de la css est chargé!

.gsc-contrôle-cst{
padding:0 !important;
}

OriginalL'auteur Harry

Vous aurez besoin de séparer le fichier de la boîte de recherche et les résultats.

Pour le fichier principal:

<form action="/search.html" method="get"><!--Change /search.html to your 
results file-->
    <input type="text" name="search" placeholder="Search..">
    <input type="submit" name="q" value="Submit">
</form>
<style>
    input[type=text] {
        width: 150px;
        box-sizing: border-box;
        border: 2px solid #ccc;
        border-radius: 4px;
        font-size: 16px;
        background-color: white;
        background-position: 10px 10px; 
        background-repeat: no-repeat;
        padding: 10px;
        -webkit-transition: width 0.4s ease-in-out;
        transition: width 0.4s ease-in-out;
    }

    input[type=text]:focus {
        width: 300px;
    }

    input[type=submit] {
        width: 100px;
        box-sizing: border-box;
        border: 2px solid #ccc;
        border-radius: 4px;
        font-size: 16px;
        background-color: white;
        background-position: 10px 10px; 
        background-repeat: no-repeat;
        padding: 10px;
        -webkit-transition: width 0.4s ease-in-out;
        transition: width 0.4s ease-in-out;
    }
</style>

Et pour le fichier de résultats (par défaut: search.html):

<script>
    (function() {
        var cx = 'abc:123';
        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);
    })();
</script>
<gcse:searchresults-only></gcse:searchresults-only>

Si cela ne fonctionne pas, il peut-être en raison de votre site web n'est pas sur le Moteur de Recherche Google ou probablement erreur de code? S'il vous plaît répondre si cela ne fonctionne pas.

OriginalL'auteur Kakkoiikun

Vous devez vous connecter pour publier un commentaire.