Google Ricerca Personalizzata (CSEv2) guida di stile?

Ho bisogno di aiuto su styling Google Ricerca Personalizzata Box (non i risultati)

Vecchi stili, utilizzando il form tag, dove si potrebbe facilmente stile il look & feel della casella di ricerca.

<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>

Con il nuovo CSEv2 codice è contenuto nel tag 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>

e hai messo il seguente tag nel punto in cui si desidera che la Casella di Ricerca per essere visualizzati.

<gcse:search></gcse:search>

Ho bisogno di aiuto su come stile per il nuovo CSE a guardare come il precedente. (dimensione del carattere, pulsante e immettere le dimensioni del campo, ecc.., esattamente lo stesso stile come prima..si applicano classi/set di font, ecc..)

Grazie!

InformationsquelleAutor whispers | 2013-11-20

Tags: css, search, styling

6 Replies

8

Non c’è bisogno di fare tutto questo basta aggiungere questo al fine di ricerca di google <script> tag in questo Modo:
```
<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>
```
Assicurarsi di aggiungere <gcse:searchresults-only ></gcse:searchresults-only> in fondo a quella di chiusura del tag script E aggiungere la propria forma Per esempio:
```
<form action="" method="GET">
  <input class="input" name="q" placeholder="Search...">
</form>
```
Poi lo stile proprio come si farebbe con stile qualsiasi tag HTML, E sei a posto! e funziona esattamente il modo in cui È abituato a lavorare. PS. Se volete prendere qualche altro posto, per Esempio search.html Basta aggiungere questo <form action="search.html" method="GET"> al posto di questo <form action="" method="GET">

Spero Che ti ha aiutato! -Arqetech
- Ehi Arqetech. Senza dubbio la tua soluzione funziona. ma crea un url il parametro’ e lo aggiunge alla barra degli indirizzi URL. significato-aggiornare la pagina di caricare l’ultimo salvataggio parametri di ricerca e caricare la ricerca personalizzata automaticamente. Avete una soluzione per questo ?
- Nanjappa mi Dispiace per il mio ritardo della risposta, Ma io didn ‘ t ottenere abbastanza di esso! Si prega di spiegare brevemente
- Esempio, se l’url è dire – localhost:8080 e si cerca di dire play, la ricerca mostra la url di ora cambia localhost:8080/?q=play/. Ora aggiornare l’url NON cambia, ma finisce ricerca per la parola play di nuovo.
- Quindi, si vorrebbe un $_POST richiesta, invece, di $_GET per impostazione predefinita utilizza $_GET
- È necessario modificare il <form action="" method="GET"> per <form action="" method="POST">
- POST mette ancora la stringa di query nell’url per me.
- questo è molto meglio la soluzione di hacking CSS tramite JS. Mi ha davvero aiutato.
InformationsquelleAutor Arqetech
7
1. Utilizzare un DOM strumento di controllo come quello integrato in Google Chrome o Firefox. (Clic destro su un elemento e selezionare “controlla.”) Questo vi permetterà di determinare elemento IDs/classi e i loro stili corrente.
2. Scrivere le regole CSS che ignorare questi stili, come questo:
  input.gsc-input {} input.gsc-search-button {} form.gsc-search-box {} div.gsc-control-cse {}
InformationsquelleAutor bwhet
2

Sul CSE pagina,
1. Scegliere il motore di ricerca, il quale si desidera a stile.
2. Fare clic su Look and feel
3. Fare clic sul Customize scheda
Questo ha opzioni per la tematizzazione di qualsiasi componente del motore di ricerca PERSONALIZZATO che si desidera a stile.

Aggiornamento

Se volete più opzioni rispetto a quelli offerti nel pannello di controllo, si dovrà utilizzare le API, un esempio di utilizzo è in fondo alla pagina.

È particolarmente interessato in Ricerca personalizzata Elemento di Controllo API, dove è possibile specificare i tag HTML, l’id dell’elemento, che è quindi possibile stlye.

Esempio Di Demo :
```
<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>
```
- Grazie,..byut che difficilmente ti dà più controllo..solo su un paio di confine o colori di sfondo… come posso avere la stessa ‘styling’ ho avuto in precedenza mentre utilizzando il MODULO di tag? Come la dimensione del carattere e la dimensione dei pulsanti/campo di input, ecc…QUINDI stai dicendo che è là e l’ho perso? O tu non leggi il post completamente? Ho bisogno di essere in grado di stile/aggiungere classi, come precedentemente fatto per abbinare le dimensioni e attuale tema del sito. Grazie!
- Ah, perso in questione, ho aggiornato la risposta 🙂
- Grazie. Ma alla fine non riuscivo a farlo funzionare. Un esempio potrebbe essere la cosa migliore, se possibile? 🙂 Non ho potuto ottenere l’ingresso in campo di essere una specifica dimensione (sempre troppo alto, non qualcosa di piccolo come 15px in altezza o qualcosa dimensione del carattere 9px non ho potuto ottenere un piccolo pulsante (ma ha fatto ottenere una nuova immagine con il pulsante BG, tuttavia, l’icona della lente di ingrandimento in sovraimpressione c’era ancora) E aveva ancora il branding di google/immagine nel campo di immissione. esempi specifici sul targeting/sovrascrivere il css che aspetto è apprezzato. (si ricorda che per ora questo è solo il targeting per il campo di input & pulsante, non i risultati ancora) Grazie
- Per chiunque altro voglia/disposti ad aiutare.. un esempio di come ottenere il CSE v2 simile a questo: link Grazie a chiunque può postare qualche semplice CSS per sovrascrivere Google CSS e rendere i componenti apparire come l’immagine qui sopra (che è fatto con i CSS e la FORMA più antica tag) Grazie!!!!
InformationsquelleAutor Pranav 웃

PER CANCELLARE FILIGRANA:

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

InformationsquelleAutor nitinsridar

0

Il modo in cui ho ottenuto questo lavoro..
1. Set asincrono per falso in google script (gcse.async = false);
2. Aggiungi css di seguito. Probabilmente dipende dall’ordine in cui il css viene caricato!

.gsc-controllo-cse{
padding:0 !importante;
}

InformationsquelleAutor Harry

È necessario separare il file della casella di ricerca e i risultati.

Per il file principale:

<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>

E per i risultati file (di default: 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>

Se non funziona, forse perché del tuo sito web non è sul Motore di Ricerca Google, o probabilmente il codice di errore? Si prega di rispondere se non funziona.

InformationsquelleAutor Kakkoiikun

Lascia un commento Annulla risposta

Devi essere connesso per inviare un commento.