Thursday, July 16, 2009

Customizing Bloglines

I find the beta.bloglines font too large to be of any use, but I love the three pane interface. With no easy way to customize the preference here's a hack I found to do just that.

http://www.gyford.com/phil/writing/2008/08/10/opacity_1_import.php

Create a file called userContent.css in C:\Documents and Settings\\Application Data\Mozilla\Firefox\Profiles\\chrome. Copy paste the below lines into this file -

@-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;
}

}

No comments: