Google CSE Style Sheet

Question

I created a search engine for my website using Google Webmaster Tools. Now I would like to customize the format of the results provided by CSE. Google offers me to download the entire CSS file, but when I attach it to my PHP document inside the section of the chapter, nothing happens - the user style does not work.

When I put the Google style in the body tag, everything worked fine. But the problem is that this method does not comply with the rules of the World Wide Web consortium, plus my code becomes very dirty and untidy if I insert such a long CSS code inside the body of my page.

How to make an external stylesheet change the default look of a search engine?

Answer 1

Could you figure out if an external CSS stylesheet can be used for a custom Google search field?

This is what I did today and it checks the W3C validator:

Check out this link: home page with Google Custom Search and an external stylesheet.

If you are viewing a source, you can see that I downloaded Google Custom Search "Source CSS" from the link on the "Get Code" page. Then I uploaded it to my website server (after changing the CSS to my liking).

Then I took the script code snippets on the Get Code page and pasted them into the HTML page of the home page, and I changed the phrase:

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

:

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

If anyone who knows the java script can tell me the best way (just because it works, it doesn’t mean that this is the best way), please let me know.

Answer 2

Just add the additional parameter " nocss: true " when loading Google Custom Search so that Google does not load css for search, so you can define all classes gcse-, gs-, etc. without interference.

nocss: a boolean that tells the API whether to load stylesheets typically associated with its controls. If you are not going to use CSS by default, you can reduce the load time by setting this to true. the default value is false.

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

The code:

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

Result (no css, except for the default rules for the site):

Example css file for 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%; } 

Result (with custom styles):

Answer 3

I would like to thank Wrathworld and Chris.

I am installing a two page google custom search layout on my Wordpress blog using V1 code. In the search box, I inserted <div id="cse-search-form">Loading</div> into the text widget and the rest of the script in my header.

I changed this part

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

to

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

At the same time, I downloaded GREENSKY.css and saved it as "gcse.css", which I uploaded to my server.

Edit this via GTMETRIX and the HTTP redirect warnings will disappear.