Thursday, November 03, 2011

Fix the new google reader layout

The new layout on google reader is really, reeeally boring. I don't like it.
Below is my fix in the form of a bit of css for use with the Stylish addon. It gets rid of the strange 3x-border-crap and replaces it with a red 5px redish border on the left side of the current story. It also changes the link color to a blueish one to make them stand out a bit more. There is a bit of whitespace left in the layout but a lot less than before.

I like it but ymmv with taste being subjective and all. :)

Update: I've added a slight border between stories and moved the search bar and some of the buttons at the top around. The image above is not updated.
@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document url-prefix("http://www.google.com/reader/view/"),url-prefix("https://www.google.com/reader/view/") {
 #main a {
  color:#1D58A1 !important;
 }
 #top-bar {
  height:0 !important;
 }
 #top-bar #logo {
  display:none;
 }
 #search {
  min-width:0 !important;
  margin:auto !important;
  position:fixed !important; 
  top:31px !important;
  right:-8px !important;
  padding:5px 0 0 0 !important;
  z-index:100;
 }
 #search #search-input {
  width:150px !important;
 }
 #viewer-header-container {
  border:0 !important;
 }
 #viewer-header {
  background-color:#fafafa!important;
  border-bottom:1px solid #dddddd!important;
  height: 25px !important;
  padding: 5px 0 10px 5px !important;
  margin:0 !important;
 }
 #viewer-top-controls-container {
  position:relative !important
 }
 #chrome-view-links {
  float:none !important;
 }
 #item-up-down-buttons {
  float:none !important;
 }
 #title-and-status-holder {
  display:none !important;
  margin-top:0 !important;
 }
 #entries {
  margin-top:-1px !important;
  padding-right:0 !important;
 }
 .card {
  padding: 5px 10px 10px 10px !important;
  border: 0 !important;
  border-left:solid 5px transparent !important;
 }
 .card-content {
  padding:0 !important;
 }
 .entry-title-go-to {
  display:none !important;
 }
 .entry{
  padding:0 !important;
 }
 .entry .entry-container {
  padding-bottom:10px !important;
 }
 #current-entry {
  border-top:1px solid #eeeeee;
  border-bottom:1px solid #eeeeee;
 }
 #current-entry .card {
  border-top:1px solid #eeeeee;
  border-bottom:1px solid #eeeeee;
  border-left-color: #dd3030 !important;
  background-color:#fafafa!important;
 }
 .card-actions.card-bottom {
  position:relative;
  padding:4px 0 3px 65px !important;
  background-color:#f0f0f0!important;
 }
.item-plusone {
  position:absolute;
  left:5px;
  top:3px;
 }
 .entry-actions .item-star, .entry-actions .item-star-active {
  display:none !important;
 }
}