Search code examples
htmlcssadsensegoogle-searchgoogle-custom-search

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


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.


Solution

  • 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?