No Footer for Google Search: Mac OS X Snow Leopard

About: Google Search: Mac OS X Snow Leopard
edited May 2009 in Style Reviews
Thanks for comments, jjh123. I see your point. I am weighning the space and usability; I am choosing latter for now and I might change later.

For now, try to add this code in the end of the style:

/* COPY FROM HERE */

/*---- HALVE THE HEADER ----*/
#gbar {
height: 16px !important;
background-position: 0 -8px !important;}

#gb nobr{
position: fixed !important;
max-width: 240px !important;
top: 31px !important;
left: auto !important;
right: 4px !important;
font-size: 0 !important;}
#gb nobr a{
font-size: x-small !important;
color: #bbb !important;}

#gb nobr:not(:hover){opacity: 1 !important;} /* Show My account - Optional delete if you don't like */

#gbi, #gbs{
margin-top: -5px !important;}

/*---- NO FOOTER ----*/
#ssb {
z-index: 0 !important;
position: relative !important;
width: auto !important;
margin-top: 60px !important;
margin-left: 0 !important;
margin-bottom: -60px !important;
border: none !important;
-moz-border-radius: 6px !important;}

/* TO HERE */


You should get something like this.

screenshot

Cheers

Comments

  • Actually this works better:

    /*---- HALVE THE HEADER ----*/
    #gbar {
    height: 16px !important;
    background-position: 0 -8px !important;}

    #gb nobr{
    position: fixed !important;
    max-width: 240px !important;
    top: 31px !important;
    left: auto !important;
    right: 26px !important;
    font-size: 0 !important;}
    #gb nobr a{
    font-size: x-small !important;
    color: #bbb !important;}

    #gb nobr:not(:hover){opacity: 0 !important;} /* Show My account - Optional delete if you don't like */

    #gbi, #gbs{
    margin-top: -5px !important;}

    /*---- NO FOOTER ----*/
    #ssb {
    z-index: 0 !important;
    position: relative !important;
    width: auto !important;
    margin-top: 60px !important;
    margin-left: 0 !important;
    margin-bottom: -60px !important;
    border: none !important;
    -moz-border-radius: 6px !important;}

    /*---- AUTOPAGERIZE ----*/
    #autopagerize_icon{
    top: 33px !important;
    right: 8px !important;
    -moz-border-radius: 6px !important;
    -moz-box-shadow: #eee 0 0px 4px !important;}
  • I think this looks fantastic. However, I think it should still include the shadow effect beneath the "Bottom Header".

    Also, with the code you just gave me, some text ads (the ones that have a peach-colored box around them) display behind the "Web Show Options... Results" section. Could you fix this bug?
  • edited May 2009
    I just put the shadow back using -moz-box-shadow: #999 0 2px 16px !important. The previous shadow was a little too heavy.

    So the only thing that needs to be fixed is the text advertisement bug. Here is a screenshot of the bug. http://img200.imageshack.us/img200/7153/picture1x.png

    If you could fix that bug I think this would look perfect.
  • Hello, jjh123. Thanks for comments. It helps me develop the style.

    Text ads that you mentioned was surely a bug but the thing was I could not face that problem. Google localize the page according to the user's location and for my case, Google Japan only has ads on side and not on top.

    I checked it using proxy to find out why. Now I fixed it to work. I will update style reflecting this fix soon.

    I may start clean up my code since it is not organized. Please let me know if you see problems.


    Regards.
  • Updated!

    One thing. Main reason I do not halve the black header is I use greasemonkey that utilize the Google in Japanese like this.
    image
    You can uncomment OPTIONS at very bottom of the code to halve the header.
  • You fixed the bug and now it looks beautiful!

    I just changed one small thing. Under "HALVE THE HEADER & AUTOPAGERIZE FIX", I changed "height: 16px !important;" to "height: 15px !important;". I didn't measure the pixels, but 15px looked more symmetrical.
  • edited May 2009
    Hello again!

    When using the Adblock Plus extension (https://addons.mozilla.org/en-US/firefox/addon/1865), all of the advertisements disappear and your formatting becomes screwed up. Here is a screenshot.
    http://img42.imageshack.us/img42/9634/picture2tro.png

    I discovered that REMOVING all of this code makes things look perfect when using the Adblock Plus extension:

    /*---- ADS ----*/
    #mbEnd{
    z-index: 0 !important;
    /*position: absolute !important;*/
    display: inline !important;
    width: 20% !important;
    right: 0 !important;
    margin-top: 64px !important;
    }
    #rhsline{
    border: 1px solid #ccc !important;
    border-right: none !important;
    -moz-border-radius: 4px 0 0 4px !important;}
    #mbEnd h2, #mbEnd a, #mbEnd li{
    font-size: x-small !important;}
    #mbEnd:not(:hover){opacity: 0.3 !important;}

    /*#mbEnd:hover{width:20% !important;right: 0 !important;
    }*/

    /*#mbEnd a{text-decoration: none !important;}*/

    /* Text ads(US) */
    #tads {
    margin-top: 68px !important;}
    #tads + #res {margin-top: 4px !important;}
    #tads:not(:hover) {opacity: 0.5 !important;}


    Perhaps you could make your script disable the above code when you are using the Adblock Plus extension.
    Or maybe you could just tell people to delete that code when they're using the Adblock Plus extension.
  • Thanks for telling me.

    I'm not checking so I'm not sure but deleting only Text ads part should take care of that problem.
    For now, I just mention this problem in the description.

    Also I modified the style a little bit so I appreciate your comment if you will have any problem.
  • There is just one small problem. The "Google logo" is a few pixels too low. Here is a screenshot of the bug:
    http://img20.imageshack.us/img20/3323/picture3hzs.png

    I corrected this by changing "margin-top: 3px !important;" to "margin-top: 0px !important;" in the "/*** Google logo ***/" section.


    Also, is there a way to put "Show options..." back where it was at the top? I don't like it floating at the bottom of the screen.

    Otherwise, everything looks good.
  • I could not reproduce the logo problem but I corrected the code so please check to see if that happens again.

    For the Show options, go to /*---- OPTIONS ----*/ section and change this line.

    #prs .tbpo:not(:hover), #prs .tbpc:not(:hover) {opacity: 0.5 !important;}

    Make the value 0.5 to 0. This makes it invisible until hovered.
    Or you can just delete /* Options floating */ section to back to original.
  • edited May 2009
    The problem with the google logo looks like it fixed itself. And thanks for the help with "show options...". Everything looks perfect! :)
Sign In or Register to comment.