Archive

Posts Tagged ‘css’

Changing Google’s Black Bar

June 29th, 2011 Adam No comments


Everybody has seen it. I’m sure Google will give us some options in the future to change it’s appearance, but for now it’s just there. It doesn’t necessarily look bad, it just might not fit with your browser’s overall theme. Well you don’t have to tolerate it. There is an addon called Stylish (Chrome, Firefox) that allows users to inject custom CSS to specific pages. So we’re going to do just that.

After you’ve installed the addon, go to the options and add a new style:

/* main bar background */
#gbx4{
  background-color: #f6f6f6!important;
  border-bottom: 1px solid #b6bac0!important;
}
 
/* main bar text */
.gbts{
  color: #777!important;
}
 
/* current tab */
.gbp1 .gbts{
  color: #333!important;
  background-color: #ddd!important;
}
 
/* current tab highlight */
.gbp1 .gbtb2 {
  border-top-color: #5893d6!important;
}
 
/* tab hover */
.gbzt-hvr span, .gbt .gbgt-hvr span{
  color: #fff!important;
  background-color: #888!important;
}

Note: We add !important to each parameter because some of google’s existing code will overwrite ours without it.

Firefox

Chrome




After implementing the above code, you should see this anywhere on the google.com domain:

Obviously, you can change these colors to whatever you like. The above style matches my current Chrome theme.

Categories: misc Tags: , , , , , ,