Google CSE Stylesheet

Question

He creado un motor de búsqueda para mi sitio web utilizando las Herramientas para webmasters de Google. Ahora me gustaría personalizar el formato de los resultados dados por el CSE. Google me ofrece descargar el archivo CSS en su totalidad, pero cuando lo adjunto a mi documento PHP dentro de la sección principal, no ocurre nada; el estilo personalizado no funciona.

Cuando puse el estilo de Google dentro de la etiqueta del cuerpo, todo funcionó normalmente. Pero el problema es que de esta manera no está de acuerdo con las reglas del World Wide Web Consortium, además mi código se vuelve muy "sucio" y desordenado si inserto un código CSS tan largo dentro del cuerpo de mi página.

¿Cómo puedo hacer que mi hoja de estilo externa cambie la apariencia predeterminada del motor de búsqueda?

Answer 1

¿Pudo averiguar si una hoja de estilo de CSS externa se puede usar para un cuadro de búsqueda de Google personalizado?

Esto es lo que he hecho hoy, y se valida en el W3C validador:

Salida este enlace: a homepage with Google Custom Search and external stylesheet.

Si ve la fuente, se puede ver que he descargado Google Búsqueda de "Fuente CSS "desde el enlace en su página" Obtener código ". Luego lo cargué en el servidor de mi sitio web (después de cambiar el CSS a mi gusto).

Tomé entonces las porciones de secuencias de comandos del código de la página "Obtener código" y las pegó en el HTML de la página, y me cambió la frase:

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

a esto:

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

Si alguien que conoce JavaScript puede decirme una mejor manera (solo porque esto esté funcionando no significa que sea la mejor manera) por favor hágamelo saber.

Answer 2

proporcionar simplemente parámetro adicional "nocss: verdad" al cargar Google Custom Search, para evitar que Google cargar ningún css para la búsqueda, por lo que puede definir todas gcse- , GS etc. css se clasifica sin interferencia

nocss: Un booleano que le dice a la API si cargar cualquier hoja de estilo típicamente asociada con sus controles. Si no tiene la intención de utilizar el CSS predeterminado , puede reducir el tiempo de carga estableciendo esto en verdadero. La configuración predeterminada es falsa.

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

Código:

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

Resultado (sin CSS, excepto reglas predeterminadas sitio):

archivo Ejemplo CSS para 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%; 
} 

Resultado (con estilos personalizados):

Answer 3

me gustaría decir gracias a Gniewomir y Kris.

Estoy instalando el diseño de dos páginas de búsqueda personalizada de google en mi blog de WordPress utilizando el código V1. Para el cuadro de búsqueda, pegué <div id="cse-search-form">Loading</div> en un widget de texto y el resto de la secuencia de comandos en mi encabezado.

me cambió esta porción

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"}); 

Al mismo tiempo, he descargado GREENSKY.css y lo ha guardado como 'gcse.css', que he subido a mi servidor.

Se ejecutó a través de GTMETRIX y las advertencias en los redireccionamientos HTTP desaparecieron.