NewsFox

Since version 0.7, the file textview.css in the newsfox folder in your profile folder has allowed customization of the view-pane of NewsFox. The feature was improved in version 0.8.1.

Since version 0.8.2, image files placed in the images subfolder of the newsfox folder have been able to replace skin image files. With version 1.0, it is also possible to replace mail.png and encl-*.png as well.

In version 1.0, the file newsfox.css in the newsfox folder is a global stylesheet. In particular, it will apply to NewsFox. Previously, some people have used Stylish(Firefox extension) to style NewsFox. It is now much easier. This post will discuss a few of the things you can do with this new feature.

This feature can be accessed in K-Meleon by pointing your browser to chrome://newsfox/content/newsfox-overlay.xul which will load the stylesheet and then open NewsFox.

The following discussion is aimed at users who know a little CSS - just like me - so it will be the blind leading the blind. Resources: an introduction to CSS, access to the newsfox.xul file. Choose view: text near the top of the page and you should be able to look at the most recent newsfox.xul. You can also get the file from the extension you installed if you know how. You need to be able to look at the newsfox.xul file to find the ids and classes in the file.

Here is part of an example file just to illustrate a few points.

@-moz-document url("chrome://newsfox/content/newsfox.xul") {

#tBcheck, #fBcheck  /* to use default Firefox icon  */
{ 
  list-style-image: url("chrome://browser/skin/Toolbar-small.png") !important;
  -moz-image-region: rect(0px 64px 16px 48px);
}

#fBtag { visibility: collapse; }

#feedTreeChildren:-moz-tree-twisty(closed)
{
  list-style-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAATklEQVR42mP8%2F%2F8%2Fw6NHjxhwAXl5eQZGkCJXV9f%2FQP7RuXPn2uBV1NHRwVBRUXEUJIGsGEMRDCArxqkISTHDnj17GEk3iaCbCPqOUDgBAKwXUgoTciZ1AAAAAElFTkSuQmCC") !important;
}

#newsfox-panes,
#mainToolbar,
#busyAnimation
  { -moz-box-direction: reverse; }

treechildren::-moz-tree-cell-text(unread,title)
  { font-stretch: narrower; }

treechildren::-moz-tree-cell-text(noID)
  { text-decoration: none !important; color: red !important; }

#newsfox-window,
splitter,
treecol,
.treecol-image
  { background-color: #abc !important; }

}

Since the file is a global CSS file it is a good idea to restrict the scope of your CSS with @-moz-document, note the trailing '}' closing the opening brace on the first line. Here I have removed the '!important' that aren't necessary, but you can put '!important' on every declaration.

The first group gets the image for the main toolbar refresh icon(#tBcheck) and feed toolbar refresh icon(#fBcheck) from the usual place that Firefox looks for its refresh icon. So this may not work on SeaMonkey, for example. It definitely doesn't work on K-Meleon as they don't have chrome icons in the sense that Firefox does.

The next hides the tag icon from the feed toolbar.

You can specify an icon inside the newsfox.css file. This might be useful if you wanted to give your newsfox.css to someone else without having to worry about exchanging icon files. You can turn an icon file on your computer into a data: URL here for example.

You can reverse the order of the NewsFox panes.

The next makes bold text take up a similar amount of room as regular typeface. The property 'title' is the id of the title column, so this only applies to the title text. Firefox automatically makes the id of columns a property that can be used in CSS.

The next shows how to use red text for deleted articles. You need to turn off the strike-thru with 'text-decoration: none'.

The last shows how to color the background. I don't know how to color the scrollbars.