CSS style – Google AJAX Search API

Immer wieder kommt man auf Seiten, wo es eine Suchfunktion ‚powered by Google‘ gibt.

Mit einem Google Account bekommt man auf Google Code einen AJAX Search API key, der für dieanzugebende Domain gültig ist. Dann kann man sich auch gleich mit einem Wizard den Quelltext für eine der folgenden Google-Suchen zusammenstellen:

Zitat Google:

Map Search Wizard
Allow your users to search for places on a Google map without leaving your site.

Video Bar Wizard
Embed a set of Google Videos on your blog or web page.

Video Search Wizard
Let your users search for videos and watch ones you’ve selected without leaving your site.

News Bar Wizard – HorizontalNew!
Add a dynamic news bar to your web site or blog. Headlines fade in and out, giving your users direct access to timely and relevant news articles.

News Bar Wizard – VerticalNew!
Fill the empty column in your web page with news snippets and links to timely articles from Google News search.

Blog Bar WizardNew!
Add a dynamic blog bar to your web site or blog. Post titles fade in and out, giving your users direct access to timely and relevant blog posts.

Book Bar Wizard
Show off books on topics that interest you on your web site or blog.

Ich habe mir eine ‚Tabbed Search‘ ausgesucht, die inzwischen so aussieht: Search

Dazu lade ich die vorgegebene gsearch.css und den Java-Script im Header des Blogs und habe eine neue page-template gebastelt. Dort steht dann der Aufruf des ’scripts‘ (wenn man das so nennen kann, bin auch nicht der Spezialist)

Was mir nicht gefallen hat, war das normale Google-Styling in meinem schwarzen Hintergrund hier.

Ich dachte, okay, hol‘ Dir die gsearch.css auf den Blog und passe dort die erforderlichen Einstellungen an. Das Problem ist, in der CSS steht gross: Copyright Google! Noch dazu fehlen dann die Icons in der Suchseite.

Was macht man am besten? Den vorgegebenen Style mit der eigenen CSS überschreiben!

Man nimmt seinen Firefox und analysiert die Seite mit dem Firebug.

Der zeigt einem ganz klar, welche ID oder CLASS man wo findet. Nur, wie schaffe ich das, dass meine Änderung auch greift?

Google beschreibt zwar in langen TextenStyling Search Results wie das gehen soll, ich hab’s lange nicht kapiert.

Nach viel Probiererei will ich Euch den Code meiner style.css betreffend des Search Api’s aber doch hier nicht vorenthalten:

.search-control { padding: 20px; }
#search_control_tabbed { background:#000;}
.gsc-resultsbox-visible { width : 500px; }
.gs-result .gs-snippet {color:#f0e3b5; }
.gsc-tabHeader.gsc-tabhActive {background:#DBA24B; }
div.search_control_tabbed a {color :#e5c98c; }
#search_control_tabbed .gs-webResult .gs-title * { color:#DBA24B; }
#search_control_tabbed .gs-webResult .gs-visibleUrl { color:#DB4F00; }
#search_control_tabbed .gs-blogResult .gs-title * { color:#DBA24B; }
#search_control_tabbed .gs-blogResult .gs-visibleUrl { color:#DB4F00; }
#search_control_tabbed .gs-newsResult .gs-title * { color:#DBA24B; }
#search_control_tabbed .gs-newsResult .gs-visibleUrl { color:#DB4F00; }
#search_control_tabbed .gs-localResult .gs-title * { color:#DBA24B; }
#search_control_tabbed .gs-localResult .gs-directions { color:#DB4F00; }
#search_control_tabbed .gs-bookResult .gs-title * { color:#DBA24B; }
#search_control_tabbed .gs-bookResult .gs-visibleUrl { color:#DB4F00; }
#search_control_tabbed .gsc-trailing-more-results * { color:#DBA24B; }

sieht vielleicht nicht schön aus, aber so funktioniert’s bei mir!

Was andere dazu schreiben:

[rsspara:http://del.icio.us/rss/tag/google%20api]