Is it possible to remove the border on Google CSE's results?

Question

I have installed a Google Custom Search through Adsense on a website. The results that are returned show a gray (#666666) border around each one, with the following CSS:

.gsc-webResult.gsc-result, .gsc-results .gsc-imageResult {
      border-color: #666;
      background-color: white;
}

However, inside the AdSense search setup, I have set the border to #FFFFFF and other colors just to see if it will take affect. It seems like no matter what color I enter for border, the same #666666 is shown. All of the other colors I specify get applied, but not the border.

Any ideas?

Edit: The search results are in an iframe, so I don't have access to the CSS.

Answer 1

Some basic things like the border colors are customized through your Google control panel. Other things are customized with your own CSS and JavaScript.

http://code.google.com/apis/customsearch/docs/ui.html

The following code is inserted in the body on the results page, where the results appear...

<div id="cse" style="width: 100%;">Loading</div>
<script src="//www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript"> 
    function parseQueryFromUrl () {
        var queryParamName = "q";
        var search = window.location.search.substr(1);
        var parts = search.split('&');
        for (var i = 0; i < parts.length; i++) {
            var keyvaluepair = parts[i].split('=');
            if (decodeURIComponent(keyvaluepair[0]) == queryParamName) {
                return decodeURIComponent(keyvaluepair[1].replace(/\+/g, ' '));
            }
        }
     return '';
     }
     google.load('search', '1', {language : 'en'});
     google.setOnLoadCallback(function() {
        var customSearchControl = new google.search.CustomSearchControl(' /* my google api key */ ');
        customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
        var options = new google.search.DrawOptions();
        options.enableSearchResultsOnly(); 
        customSearchControl.draw('cse', options);
        var queryFromUrl = parseQueryFromUrl();
        if (queryFromUrl) {
                customSearchControl.execute(queryFromUrl);
        }
    }, true);
</script>

Here is the link to the Google code wizard.

More about the JavaScript API

I'm sorry I could not find the exact links I used just six months ago. The Google Developers documentation now seems to be a complete mess. In the last few minutes, I found several 404 errors and links to pages declared as "deprecated". Doesn't anyone at Google proof-read anything?

Answer 2

You just have to find advanced settings panel. See this one. It helped. http://tutes.in/2012/09/10/how-to-remove-bluegray-border-in-google-custom-search-engine-cse-results/