Treehouse: Grow your CSS skills. Land your dream job.

[Solved] Style Google Custom Search Results

  • # April 6, 2011 at 7:08 am

    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

    read documentation on google webmaster tools
    still something missing

    how can you change the styling of the final output?

    # April 6, 2011 at 7:18 am

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

    # April 6, 2011 at 8:55 am

    I fully customized mine. Mine lays out on the same page. The results just push everything down. That style is not in an iframe. I used firebug to tell me everything I needed to know about what to target.

    # April 6, 2011 at 12:58 pm

    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 ?

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

    # April 6, 2011 at 2:03 pm

    5 hours of reading on GOOGLE help forum + documentation

    found my solution and it works :)

    # April 7, 2011 at 12:26 am

    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.

    # May 15, 2011 at 3:09 pm

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

    thanks for help

    # May 31, 2011 at 9:56 pm

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

    .cse input.gsc-input,input.gsc-input{background-image:none !important}
    # November 18, 2011 at 11:56 am

    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;



    keywords: change custom google search input field watermark

    # November 18, 2011 at 11:59 am

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

    # March 10, 2014 at 5:25 am

    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;
Viewing 12 posts - 1 through 12 (of 12 total)

You must be logged in to reply to this topic.