[User CSS] Good old Google

[User CSS] Good old Google

Not sure this is the right board for posting this (if it isn't, please move it to the appropriate one), but I thought I'd share my google.css file I'm using Google with. Hopefully, some of you old geezers like me will enjoy it (and maybe improve on it and share the results.)

Just right click on a Google page, Display tab, My Stylesheet, and choose the google.css file.

google.css

- I've changed the font to something that looks better (Segoe UI). You may remove the Segoe UI line to keep the Arial font.

- Instead of hiding the navigation bar on the left, I've simply moved it to the right. The navbar is not the problem, it's the fact that it's positioned at the place where we're used to scan the first Google results. It's a reflex, so it needs to go.

- If you want to remove the navbar completely, feel free.
At the end of the CSS file, just replace the navbar definition with:

#leftnav {
	display: none !important;
}

- The !important keywords are not always necessary (the above definition doesn't need it), but this is to make sure Google won't take priority if it ends up adding that keyword as well.

- Finally, I've removed the commercial links. Remove the #rfs_block rule redefinition if you want them back. I can understand some people would want them. I personally never look at them, never even notice them, so I might as well not show them.

I've replaced the original file with an alternative version which aims to be closer to the original.

- Segoe UI font replaced with Arial (it IS, after all, an attempt to get the old Google back, so my personal font tastes shouldn't have any impact on the final file),
- Search box is modified with smaller font, and less padding inside the box.

If you want it, here's the version with Segoe UI:

google2.css

PS: I'm not sure whether it's logical to have any upload replace the earlier one if it's got the same filename. It's a good thing, but it should, at the very least, be pointed out to the user.

On wider screens, the leftnav hangs over part of the search results at the right. I set display to none and that was solved. What about the ad text at the top of the page?

- I'm in 1280x1024 so it's not particularly wide, but yes the google.css file shows the navbar to the right, that's intentional as explained above. Removing it is an option, but I think it'd be detrimental in the end, since the navbar isn't much on the bother as long as it stays on the right.

- I didn't notice a top of the page ad bar so I didn't think of it. Just add ", #tads" to the #rhs_block redefinition. Worked for me. I've updated the google.css file in the first post.

I played recently with transition effects and this is how it looks like

Since this thread is about google old look i've hidden the menu. But after moving the mouse over the left free space the menu will be popup .

body#gsr #leftnav div {
    display:none
}
body#gsr #leftnav{
    opacity:0 !important;
    min-height:300px; width:0px !important; padding-left:10px !important; overflow:hidden;
    -o-transition-property: opacity;
    -o-transition-duration: 0.5s;
}
body#gsr #center_col{
    margin-left:10px !important;
}
body#gsr #leftnav:hover{
    width:151px !important; 
    box-shadow:2px 2px 5px #333333;
    border-radius:5px; 
    opacity:1 !important;
}
body#gsr #leftnav:hover div{
    display:block !important;
}


body#gsr li.g{
    background-color: rgba(255, 255, 255, 0.0);
    -o-transition-property: background-color;
    -o-transition-duration: 0.3s;
    padding:5px !important;
    border-radius:5px;
}
body#gsr #rhs{
    opacity:0.4;
    -o-transition-property: opacity;
    -o-transition-duration: 0.5s;
}
body#gsr #rhs:hover{opacity:1;}

body#gsr li.g:hover{
    background-color: rgba(229,236,249, 0.7);
}
body#gsr li li.g:hover{
    background-color: rgba(255, 255, 255, 0.6);
}
body#gsr #cnt{
    min-width: 600px !important;
    max-width: 1600px !important;
}
body#gsr .tsf-p { 
    max-width: 1500px !important;
    margin-right: 200px !important;
}
body#gsr .lsd{width:200px !important;}
body#gsr #subform_ctrl{max-width: 1490px !important;}

But in the end i like the new google look with the visible sidebar on the left

Thanks.

artmil's looks good too.

Wish I could figure out how to do this. There's a few other sites giving me headaches with their silly add-ons.

thank you buddy.

Hi !

I've just noticed this useful user.css doesn't work anymore.
The left bar is still correctly hidden, but when you want to display it, the background is too transparent :




I guess something was recently changed in google code.
Maybe some class and id.

If your talking about my style then just add

z-index: 99;

to the

body#gsr #leftnav

selector.

It should look like this

body#gsr #leftnav{
    opacity:0 !important;
    min-height:300px; width:0px !important; padding-left:10px !important; overflow:hidden;
    -o-transition-property: opacity;
    -o-transition-duration: 0.5s;
    z-index: 99;
}

Thanks a thousand, it works.

No problem

artmil
Can You make CSS, that puts sidebar to the right side?

@Nao's CSS moves the sidebar to the right

Hmm a right place hide-able sidebar maybe?

UPD nevermind, got that myself

someone re-wrote the CSS again because it doesn't work properly anymore?