Aug 19, 2011

How to change the Google Plus nav bar color without yet-another--chrome-extension

Someone noticed my Google Plus navbar wasn't black, but a nice gray color. Here's how I did it without having to install yet-another-Chrome-extension:

1. Edit the custom.css file buried down in chrome's "user stylesheets" directory.

On Windows, go to the run window and type this line:

notepad "%userprofile%\appdata\local\google\chrome\user data\default\user stylesheets\custom.css"


This file is the style override file for Chrome. You can do other cool thing like force links to always show underlines, etc.

2. Add the following line:
#gbx4 { background-color: #F1F1F1 !important; }




F1F1F1 is the color,  you can change it by picking a different color:

3. Save. (should change immediately without reloading chrome).

[edit]

Here's a more complex Custom.css that changes the font color, mouseover color, etc:

#gbx4 {
  /* change the color of the background */
  background-color: #F1F1F1 !important;
  /* change the color of the border */
  border-bottom-color: #D2D2D2 !important;
}
.gbts {
  /* font color */
  color: #3366CC !important;
}
.gbts:hover {
  /* color of background when you mouse-over */
  background-color: #D2D2D2 !important;
}


2 comments:

  1. How do i make the links blue on a white background like in G mail. also make the border blue or better yet go away. + have the viewed text link black?

    ReplyDelete
  2. Hey Alien. This is a little more complex, but this is the content for Custom.css

    The more complex it is, the more likely it is to be incompatible in the future.

    Let me know how it works.

    /* start of Custom.css */

    #gbx4 {
    /* change the color of the background */
    background-color: #F1F1F1 !important;
    /* change the color of the border */
    border-bottom-color: #D2D2D2 !important;
    }
    .gbts {
    /* font color */
    color: #3366CC !important;
    }
    .gbts:hover {
    /* color of background when you mouse-over */
    background-color: #D2D2D2 !important;
    }

    ReplyDelete