Customize Google Reader’s Appearance with CSS

by Brandon on August 31, 2011

Google Reader

I use Google Reader to keep up with all my favourite websites and blogs. Since I am currently looking for a new job, I have also been using Google Reader as a job search tool.  Each day, several hundred new job listings pile up inside my job search folder. Sounds great, right? One problem: It can be quite strenuous on the eyes sifting through the entire list.

In order to relieve my eye strain, I decided to seek out a way to improve the appearance of Google Reader. I thought to myself, “What if every other entry had a light grey colour like you often see in data tables?”

Excel Data Table

After a quick Google search, I came back empty-handed. A few days later, however, I came across this article on advanced CSS3 techniques, and I decided to implement a solution myself.

Here’s a snapshot of the end result:

End Result

As you can see, I’ve made a few minor changes that I feel enhance the readability and functionality of Google Reader.

What you’ll need:

  • The code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
/* GLOBAL */
 
/* background color - odd entries */
div#entries.list 
.entry:nth-child(2n+1) 
.collapsed {
  background-color: #bbbbbb;
  border-color: #bbbbbb;
}
 
/* current entry hightlight color */
div#entries.list 
#current-entry 
.collapsed {
  border: 2px solid #00ff00;
}
 
/* READ ENTRIES */
 
/* entry title (h2) text color */
div#entries.list 
.entry.read
.collapsed 
h2 {
  color: #c8c8c8;
}
 
/* source title & entry snippet color */
div#entries.list 
.entry.read 
.collapsed 
span {
  color: #c8c8c8;
}
 
/* gives 'read' styling to odd entries that have been marked as read */
 
div#entries.list 
.entry.read:nth-child(2n+1) 
.collapsed {
  background-color: #f3f5fc;
  border-color: #f3f5fc;
}

Install one of the extensions, then copy and paste the code in the relevant area.

For Minimalist Google Reader, it’s on the extension’s options screen as seen here:

MinGoogRead

For Stylebot, click the css button in the omnibar, then click the ‘Edit CSS’ button:

Stylebot

 

That’s it. Feel free to make any additional CSS changes you desire. If you have any questions, please leave a comment.

 

Leave a Comment

{ 1 trackback }

Previous post:

Next post: