SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Member
    Join Date
    Apr 2011
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How Do I Delete 2 Gray, Bordered Boxes Next to Google Custom Search Engine?

    Do you know how to delete the 2 gray, bordered boxes to the right of my Google Custom Search engine here:
    www.ComparingVitamins.com? In Firefox, they are both live links to these 2 CSS pages:
    http://www.google.com/uds/api/search...35/default.css
    http://www.google.com/cse/style/look/default.css
    How can I make them disappear?

    Here is my code...

    Code:
    <div id="cse" style="width: 30%; float: left; text-align: left">Loading</div>
    <script src="//www.google.com/jsapi" type="text/javascript"></script>
    <script type="text/javascript">
      google.load('search', '1', {language : 'en'});
      google.setOnLoadCallback(function() {
        var customSearchControl = new google.search.CustomSearchControl('004167335507867730147:8aewcrcx99a');
        customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
        var options = new google.search.DrawOptions();
        options.setAutoComplete(true);
        customSearchControl.draw('cse', options);
      }, true);
    </script>
    <link rel="stylesheet" href="//www.google.com/cse/style/look/default.css" type="text/css" />
    When I delete the last line <link rel..., one box disappears. But how can I make both boxes disappear?

    Thank you for your help,

    Greg

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,177
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Hi Greg. Welcome to SitePoint.

    You shouldn't have <link> elements in the body of the page. Try moving this line in the <head> of the document:

    Code:
    <link rel="stylesheet" href="//www.google.com/cse/style/look/default.css" type="text/css" />
    You should also get rid of these divs from the bottom of your <head> section:

    Code:
    <div id="headtop">
    
    <div id="headimg">
    
    </div></div>

  3. #3
    SitePoint Member
    Join Date
    Apr 2011
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Ralph,

    Thanks for the advice. That got rid of one box. But the other one still shows and links to:
    http://www.google.com/uds/api/search...35/default.css

    Any more ideas on how to delete it?

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,177
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    O, there's another one in your HTML:

    Code:
    <link rel="stylesheet" type="text/css" href="http://www.google.com/uds/api/search/1.0/fb730160e72add7b256fbc9b5dc23635/default.css">
    Move that to the <head> too. (Assuming it's needed at all. I'm not sure.)

  5. #5
    SitePoint Member
    Join Date
    Apr 2011
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmm, I just opened View Source and found all that code. But it's not in my header so I can't edit it there. So it must be called from my Google CSE settings on their site, right? Google Custom Search - Site search and more I just looked there, but I don't know which setting would edit that problem. (Unfortunately, Google did not answer my question or most questions in their Help Forum.)

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,177
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    O well, another option is just to place this in your style sheet, perhaps at the bottom:

    Code:
    link {display: none;}
    It's a shame to have to, though. The code is a bit of a mess. the <link> code must be added via JS or something. Google does know how to offer up some pretty messy code.

  7. #7
    SitePoint Member
    Join Date
    Apr 2011
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That makes sense. But which stylesheet: Google's or mine? (I tried it in mine, and it deleted the box, but also some of my other links.)

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,177
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    It will have to be yours, as you can't change Goggle's.

    I've never seen styles for <link> elements before, as they are meant to be in the head, so I'm worried that you have them all over your page. Anyhow, you could target just the Goggle links with this in your stylesheet:

    Code:
    link[href^="http://www.google.com"] {display: none;}
    Just so you know, though: that kind of CSS rule won't work in older browsers like IE6 and below (not that I care about IE6 any more, mind you).

  9. #9
    SitePoint Member
    Join Date
    Apr 2011
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't have any style links in my page. Apparently they're being called from my program settings at Google?

    I tried putting that in the Body of my stylesheet, but it didn't work. Was that the right place to put it? Why is the ^ symbol in there?

  10. #10
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,177
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Greg Gibson View Post
    I don't have any style links in my page. Apparently they're being called from my program settings at Google?
    Hm. Well, I wouldn't think it's a problem if they are all visually hidden, then. They have no place on a web page. What other things on the page were affected by my first CSS rule? I didn't see anything else change.

    I tried putting that in the Body of my stylesheet
    Not sure what you mean by that. Do you mean as part of the body {} styles? Just place the rule (the whole line I gave) on its own line in the CSS file, separate from anything else, perhaps right at the bottom.

    Why is the ^ symbol in there?
    That just says choose any <link> element that has an href attribute that starts with http://www.google.com.

    It's called an attribute selector. There are other similar markers for 'ends with' etc.

  11. #11
    SitePoint Member
    Join Date
    Apr 2011
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I just placed it before the /* @end */ of stylesheet, and it worked! Thank you very much for your help Ralph. If you ever have a question on direct response advertising or copywriting, let me know if I can help you.

  12. #12
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,177
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Thanks Greg! And glad it worked.


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •