Use an external CSS stylesheet to customise the appearance of the Google CSE
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
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.
