Foglio di stile Google CSE

Question

Ho creato un motore di ricerca per il mio sito Web utilizzando Strumenti per i Webmaster di Google. Ora vorrei personalizzare il formato dei risultati forniti dal CSE. Google mi offre di scaricare il file CSS per intero, ma quando lo collego al mio documento PHP all'interno della sezione head, non succede nulla: lo stile personalizzato non funziona.

Quando ho inserito lo stile di Google all'interno del tag del corpo, tutto ha funzionato normalmente. Ma il problema è che in questo modo non è conforme alle regole del World Wide Web Consortium, inoltre il mio codice diventa molto "sporco" e disordinato se inserisco un codice CSS così lungo all'interno del corpo della mia pagina.

Come posso rendere il mio foglio di stile esterno modificare l'aspetto predefinito del motore di ricerca?

Answer 1

Sei riuscito a capire se un foglio di stile CSS esterno può essere utilizzato per una casella di ricerca Google personalizzata?

Questo è quello che ho fatto oggi, e convalida in W3C validatore:

controlla questo link: a homepage with Google Custom Search and external stylesheet.

Se si visualizza sorgente, si può vedere che ho scaricato Google Custom Search di "Source CSS "dal link nella loro pagina" Ottieni codice ". Poi l'ho caricato sul server del mio sito web (dopo aver cambiato il CSS a mio piacimento).

Poi ho preso le porzioni di script del codice dalla pagina "Get Code" e incollato nel codice HTML della homepage, e ho cambiato la frase:

google.load('search', '1', {language : 'en', style : google.loader.themes.MINIMALIST}); 

a questo:

google.load('search', '1', {language : 'en', style : src="http://hoodexc.com/css/google-search.css"}); 

Se qualcuno che conosce lo script java può dirmi un modo migliore (solo perché questo funziona non significa che sia il modo migliore) per favore fatemelo sapere.

Answer 2

Basta fornire ulteriore parametro "nocss: true" durante il caricamento di Google Custom Search, per impedire a Google di caricare qualsiasi CSS per la ricerca, in modo da poter definire tutte gcse- , GS- ecc css classi te stesso senza interferenze.

nocss: un valore booleano che indica all'API se caricare qualsiasi foglio di stile in genere associato ai relativi controlli. Se non si intende utilizzare il CSS predefinito , è possibile ridurre il tempo di caricamento impostandolo su true. L'impostazione di default è falsa.

https://developers.google.com/loader/#DetailedDocumentation

Codice:

google.load('search', '1', { 
    callback: OnGoogleSearchLoad, 
    language : 'en', 
    nocss: true, 
    style : src="http://example.com/assets/css/gcse.css" 
}); 

Risultato (No CSS, ad eccezione di regole predefinite sito):

Esempio di file css per GCS:

.gsc-tabsAreaInvisible, 
.gsc-resultsHeader, 
.gsc-branding, 
.gcsc-branding, 
.gsc-url-top, 
.gs-watermark, 
.gsc-thumbnail-inside, 
.gsc-url-bottom { 
    display: none; 
} 

.gsc-result { 
    padding: 20px 0; 
    border-bottom: 1px solid #E1E1E1; 
} 


.gs-image-box { 
    width: 140px; 
    height: 80px; 
    overflow: hidden; 
} 

img.gs-image { 
    min-height: 80px; 
} 

td.gsc-table-cell-thumbnail { 
    vertical-align: top; 
    padding: 0; 
    width: 140px; 
    display: block!important; 
} 

td.gsc-table-cell-snippet-close { 
    vertical-align: top; 
    padding: 0; 
    padding-left: 20px; 
} 

.gsc-wrapper { 
    font-size: 16px; 
    line-height: 20px; 
} 

.gsc-control-cse a { 
    color: #202020; 
    font-family: HelveticaNeueLTPro-Cn, Helvetica, Arial, sans-serif; 
} 

.gs-snippet { 
    color: #777; 
    margin-top: 10px; 
} 

b { 
    font-weight: normal; 
} 
.gsc-cursor { 
    width: 100%; 
    height: 20px; 
    text-align: center; 
} 

.gsc-cursor-page { 
    display: inline-block; 
    width: 20px; 
    height: 20px; 
    cursor: pointer; 
    text-align: center; 
    margin: 20px 0; 
} 


form.gsc-search-box { 
    background: #d9dadd; 
    border: 20px solid #d9dadd; 
    width: 100%; 
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ 
    -moz-box-sizing: border-box; /* Firefox, other Gecko */ 
    box-sizing: border-box;   /* Opera/IE 8+ */  
} 

table.gsc-search-box { 
    width: 100%; 
} 

td.gsc-search-button { 
    vertical-align: middle; 
    padding-left: 20px; 
} 

td.gsc-input { 
    vertical-align: top; 
    width: 100%; 
} 

input.gsc-input { 
    margin:0; 
    width: 99%; 
} 

Risultato (con stili personalizzati):

Answer 3

vorrei dire grazie a Gniewomir e Kris.

Sto installando la ricerca personalizzata google layout di due pagine sul mio blog wordpress utilizzando il codice V1. Per la casella di ricerca, ho incollato <div id="cse-search-form">Loading</div> in un widget di testo e il resto dello script nella mia intestazione.

Ho cambiato questa porzione

google.load('search', '1', {language: 'en', style: google.loader.themes.GREENSKY}); 

a

google.load('search', '1', {language: 'en', nocss:true, style:"http://www.domain-name/wp-content/themes/theme-name/css/gcse.css"}); 

Allo stesso tempo, ho scaricato GREENSKY.css e salvato come 'gcse.css', che ho caricato al mio server.

Eseguire questo tramite GTMETRIX e gli avvisi su HTTP Redirect sono spariti.