Opacity: 1 ! important;

Anyone who’s made websites for a while knows that if you re-design anything many of your users will hate the new design, and you for daring to change it. Bloglines recently tweaked the design of their beta version and it was no surprise that the forums soon filled with people complaining. But this time they were complaining almost uniformly about the decision to change the text colour from black to medium grey.

It’s a tiny thing but if you ask me, the complainers are right. Why Bloglines thought a grey this light was easy to read for a long time is beyond me. Andy why their alleged extensive testing with users didn’t make this apparent seems strange.

Still, if you use the otherwise quite nice-looking Bloglines Beta, and you use Firefox, you just need to paste the CSS below into your userContent.css and restart Firefox. (On a Mac, look in ~/Library/Application Support/Firefox/profiles/[profile name]/chrome/ . If the file isn’t there, just create an empty text file in there with the name userContent.css.)

@-moz-document url-prefix(http://beta.bloglines.com/) {

  /* Main body content text colour. */
  div.fullviewTemplate,
  div.bl_selected,
  div.templateText {
    color: #000 ! important; 
  }

  /* Feed list text colour. */
  .tree a:link, 
  .tree a:visited,
  .tree li .selected a, 
  .tree li .selected span.bl_unread_count, 
  .tree .selected span.ur, 
  .tree .selected span.urb {
    color: #000 ! important; 
  }

  /* Reduce font size of Feed list */
  .tree {
    font-size: 68.75% ! important; /* 11px */
  }
  .tree a:link,
  .tree a:visited {
    font-size: 11px ! important;
  }

  /* Reduce indentation of feeds in folders */
  .tree li li .item, 
  .tree li li.sub .item {
    padding-left: 17px ! important;
  }

  /* Colour of pinned item count. */
  .tree .selected span.pn, 
  .tree .selected span.pnb, 
  .tree span.pn, 
  .tree span.pnb {
    color: #134571;
  }

  /* Reduce space between folders */
  .tree li.folder ul.folderList {
    margin-bottom: 5px ! important;
  }

  /* Items in Feed list */
  .tree div.sub_wrap {
    opacity: 0.7 ! important;
  }
  .tree div.unread {
    opacity: 1 ! important;
  }

  /* Byline in main content */
  div.fullviewTemplate div.templateBody h3.bl_byline, 
  div.triviewTemplate div.templateBody h3.bl_byline, 
  #bottomContent h3.bl_byline {
    color: #666 ! important;
  }

  /* Make selected item more obvious - thicker border */
  div.fullviewTemplate div.templateBody {
    border-width: 2px ! important;
  }
  div.fullviewTemplate div.bl_selected {
    border-width: 0 2px 2px ! important;
  }
  div.fullviewTemplate div.bl_selected h1.bl_title {
    border-top-width: 2px ! important;
  }
  /* For every pixel you increase the above border-widths, increase this padding: */
  div.fullviewTemplate div.bl_selected h2.bl_datetime {
    padding-top: 11px ! important;
  }

  /* More space on the right of main content */
  div.fullviewTemplate div.templateBody div.templateText,
  div.triviewTemplate div.templateBody div.templateText, 
  #bottomContent div.templateText, 
  #mainContent ol.bl_oneColumn li.summary div.templateText {
    margin-right: 1em ! important;
  }

  /* Make item headlines and bylines readable when headlines wrap to two lines. */
  div.templateBody h1.bl_title {
    line-height: 1.2em ! important;
    height: auto ! important;
  }


  /* LINK COLOURS */

  /* Headings in main content */
  div.fullviewTemplate div.bl_activeselection h1.bl_title a:link, 
  div.fullviewTemplate div.bl_activeselection h1.bl_title a:visited {
    color: #666 ! important;
  }
  div.fullviewTemplate div.bl_selected h1.bl_title a:link, 
  div.fullviewTemplate div.bl_selected h1.bl_title a:visited {
    color: #000 ! important;
  }

  /* Hover styles for headings in main content */
  div.fullviewTemplate div.bl_selected h1.bl_title a:hover,
  div.fullviewTemplate div.bl_activeselection h1.bl_title a:hover,
  /* Links in main content */
  div.templateText a:link, 
  div.templateText a:visited  {
    color: #134571 ! important;
    text-decoration: underline ! important;
  }

  /* Top pane in 3-pane view */
  div.triviewTemplate div.bl_activeselection h1.bl_title,
  div.triviewTemplate div.bl_activeselection h1.bl_title a:link,
  div.triviewTemplate div.bl_activeselection h1.bl_title a:visited {
    color: #134571 ! important;
    text-decoration: underline ! important;
  }

}

This works for me — you may want to adjust things slightly for your own taste. Bear in mind that if Bloglines fixes or adjusts CSS in the default view of the site, the rules above may conflict.

Why Bloglines still has this tagged a “beta” version when it’s been running for months is beyond me. It’s not like any non-beta website is ever finished.

Comments

  • Thanks for this. It is amazing how awful that font color choice was.

Commenting is disabled on posts once they’re 30 days old.

Sunday 10 August 2008, 3:42pm

< PreviousIn all of WritingNext >

10 Aug 2008 at Twitter

  • 11:13pm: A successful evening of Google Maps API fiddling. Mapping Mr Pepys in a winning fashion.
  • 2:32pm: No falafels on Sundays. Weird. Many hungry tourists. Ate much cold meat outside a nice cafe instead. Loving the holiday.
  • 12:47pm: Off to buy tasty baked goods for eating later, and maybe some tasty falafel for eating now.
  • 9:43am: Trying to get things done faster than I can think of things to do.

On this day I was reading