Use an external CSS stylesheet to customise the appearance of the Google CSE

Question

I have created a search engine for my website using Google Webmaster Tools. Now I'd like to customise the format of results given by the CSE. Google offers me to download the CSS file in whole, but when I attach it to my PHP document inside the head section, nothing happens – the custom style doesn't work.

When I put the Google's style inside the body tag, everything worked normally, but the problem is that this way isn't according to the rules of the World Wide Web Consortium, plus my code gets very 'dirty' and untidy if I insert such a long block of CSS code inside the body of my page.

How can I make my external style sheet change the default appearance of the search engine?

Answer 1

Simply provide additional parameter "nocss: true" when loading Google Custom Search, to prevent Google from loading any css for search, so you can define all gcse-, gs- etc. css classes yourself without interference.

nocss: A boolean that tells the API whether to load any style sheets typically associated with its controls. If you don't intend to use the default CSS, you can reduce the load time by setting this to true. The default setting is false.

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

Code:

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

Result (no css, except site default rules) :

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 2

Were you able to figure out if an external CSS stylesheet can be used for a Custom Google Search box?

This is what I've done today, and it validates in W3C validator:

Check out this link: a homepage with Google Custom Search and external stylesheet.

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

Then I took the script portions of the code from the "Get Code" page and pasted them in the HTML of the homepage, and I changed the phrase:

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

to this:

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

If anyone who knows java script can tell me a better way (just because this is working doesn't mean it's the best way) please let me know.

Answer 3

I would like to say thanks to Gniewomir and Kris.

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

I changed this portion

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.

Ran this through GTMETRIX and the warnings on HTTP Redirects are gone.