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

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.

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):