Arkusz stylów CSE Google

Question

Utworzyłem wyszukiwarkę dla mojej witryny za pomocą Narzędzi Google dla webmasterów. Teraz chciałbym dostosować format wyników podawanych przez CSE. Google oferuje mi pobranie pliku CSS w całości, ale gdy dołączę go do mojego dokumentu PHP w sekcji head, nic się nie dzieje - niestandardowy styl nie działa.

Kiedy umieściłem styl Google w tagu body, wszystko działało normalnie. Problem polega jednak na tym, że ten sposób nie jest zgodny z regułami Konsorcjum WWW, a mój kod jest bardzo "brudny" i niechlujny, jeśli wstawię taki długi kod CSS do wnętrza mojej strony.

W jaki sposób ustawić zewnętrzny styl arkusza, aby zmienić domyślny wygląd wyszukiwarki?

Answer 1

Czy byłeś w stanie dowiedzieć się, czy zewnętrzny arkusz stylów CSS może być użyty w niestandardowym oknie wyszukiwarki Google?

To co zrobiłem dzisiaj, i to sprawdza w W3C walidator:

Wyjazd ten link: a homepage with Google Custom Search and external stylesheet.

Jeżeli zobaczyć źródło, można zobaczyć, że ściągnąłem Google Custom Search'S „Źródło CSS "z linku na stronie" Pobierz kod ". Potem przesłałem go na serwer mojej strony (po zmianie CSS według mojego upodobania).

Potem wziął fragmenty skryptów kodu ze strony „Pobierz kod” i wkleić je w kodzie HTML strony głównej i zmieniłem zdanie:

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

do tego:

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

Jeśli ktoś znający skrypt Java może mi powiedzieć lepszy sposób (tylko dlatego, że to działa, nie oznacza to, że jest to najlepszy sposób), proszę dać mi znać.

Answer 2

Wystarczy dostarczyć dodatkowy parametr "nocss: true" podczas ładowania Twojej wyszukiwarki Google, aby uniemożliwić Google ładowaniu css wyszukiwania, dzięki czemu można zdefiniować wszystkie gcse- , GS css etc. klasyfikuje się bez przeszkód.

nocss: logiczna opowiada API czy załadować arkusze stylów typowo związane z jego kontroli. Jeśli nie zamierzasz używać domyślnego CSS , możesz skrócić czas ładowania, ustawiając wartość true. Domyślne ustawienie to fałsz.

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

Kod:

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

Wynik (nie css, z wyjątkiem reguł domyślnych site):

Przykład pliku css dla 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%; 
} 

Wynik (z niestandardowych stylów):

Answer 3

Chciałbym powiedzieć dzięki Gniewomir i Kris.

Instaluję dwustronicowe niestandardowe wyszukiwanie Google na swoim blogu wordpress przy użyciu kodu V1. W polu wyszukiwania wkleiłem <div id="cse-search-form">Loading</div> w widgecie tekstowym, a resztę skryptu w nagłówku.

zmieniłem tę część

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

do

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

Jednocześnie, Pobrałem GREENSKY.css i zapisać go jako 'gcse.css', która została przesłana do mojego serwera.

Przeprowadzono to przez GTMETRIX, a ostrzeżenia dotyczące przekierowań HTTP zniknęły.