[Solved] Style Google Custom Search Results

[aoeui]

hi there mates,

little question
cant figure out a way how to style google custom search results and how to tweak the .CSS

I saw
https://css-tricks.com/video-screencasts/29-google-search-for-your-site/

read documentation on google webmaster tools
still something missing

how can you change the styling of the final output?

[aoeui]

dunno how to make sense of following

http://code.google.com/intl/cs-CZ/apis/websearch/docs/#StylingSearchResults
+
http://code.google.com/intl/cs-CZ/apis/websearch/docs/reference.html#_class_GwebResultCss

[jamygolden]

It’s in an iframe, so unfortunately you can’t. You can only customize it VIA google (The colours, etc).

[aoeui]

hi there

@ jamy_za
yes I used iframe
I hosted the search field + extra result page on my web
as mentioned in CSE settings

do you think it is better to use the option whre GOOGLE offers fully customisable layout and CSS ?

@eric
I might use FireBug to determine details
using it every day and this time teh idea just missed me :D

[aoeui]

5 hours of reading on GOOGLE help forum + documentation

found my solution and it works :)
http://code.google.com/intl/en/apis/customsearch/docs/ui_xml.html

[jamygolden]

The previous page discussed how you can use the control panel to customize the look and feel of your search box and search results. This page discusses how you can implement the customization using the context file, which is the XML specification for your search engine.

What you’re doing now is basic customization which you can change in the options area. Are you using GSE through adsense or not? I use it through adsense and I have those options.

[aoeui]

no AdSense
the xml file did it for me quite good and in easy way :]

thanks for help

[Bumpman]

Add the following line to your CSS to get rid of the watermark:

.cse input.gsc-input,input.gsc-input{background-image:none !important}

[nikita]

With the new API I did it this way with CSS:

input.gsc-input {
….
background:url(/path/to_your_bg.gif) no-repeat 0% 0% white !important;
…
}

Bye

keywords: change custom google search input field watermark

[nikita]

Sorry, it doesn’t go away with focus… ;^(

[vasaivirarproperty]

i haved used gse css in advance search using google custom search

css i used is as follows :

/* Use a different font family for search results */
.gs-title, .gs-snippet {
font-family: courier;
}

/* Add a border between individual search results */
.gs-webResult {
    border: 1px solid #eee;
    padding: 2px;
}

/* Do no display the count of search results */    
.gsc-result-info {
     display: none; 
}

/* Hide the Google branding in search results */
.gcsc-branding {
    display: none; 
}

/* Hide the thumbnail images in search results */
.form .gsc-thumbnail {
    display: none;
}

/* Hide the snippets in Google search results */
.gs-snippet { 

}

/* Change the font size of the title of search results */
.gs-title a { 
    font-size: 14px;  
}

/* Change the font size of snippets inside search results */
.gs-snippet {
    font-size: 12px;
}

/* Google Custom Search highlights matching words in bold, toggle that */
.gs-title b, .gs-snippet b {
    font-weight: normal;
}

/* Do no display the URL of web pages in search results */
.gsc-url-top, .gsc-url-bottom {
    display: none;
}

[Author]

Posts