CSS Tree Properties

The feed pane and article pane of NewsFox are XUL trees. Trees can be given properties that can then be used in CSS to give styling to the trees. The trees have row properties, column properties and cell properties that apply to row, columns and cells. Cells also have the properties of their row and column. This is important since certain aspects can only be styled via cells rather than rows or columns. For instance text properties only come from the cell. This article lists the properties available for these trees in NewsFox. Properties listed on a single line are mutually exclusive.

Feed Tree

Row properties

folder, feed, category
feedsFolder, tagFolder, searchFolder
feedsFeed
unread
newunread

Cell properties

faviconcol

A row has the property feedsFolder if it is the FEEDS folder, that is, it is the first row.

A row has the property feedsFeed if it is a feed within the FEEDS folder.

A row has the property unread if there are more than zero unread articles associated with that row.

A row has the property newunread if there are more than zero unread articles in the last refresh for that row.

A cell has the property faviconcol if space needs to be left for an icon, that is, if it is not a category.

Article Tree

Row properties

noID
flagged
unread
newunread
highprob
prob1, prob2, ..., prob10
hour1, hour3, hour6, hour12, hour24, hourother
day1, day7, day30, dayother
keyword
keywordX where X=1,2,3,4,...

Column properties

flag, title, read, date, author, source, blog, prob

Cell properties

faviconcol

A row has the property noID if NewsFox can't construct an ID for the article. If an article has no ID element ( in RSS or in atom) and has no unique link, the article will have this property. If an article is deleted by the user, NewsFox removes the ID, so deleted articles also have this property.

Scaled probabilities from the interest filter are rescaled to fill the interval from 0 to 1 based on the group/feed you are looking at. So even if all the absolute probabilities are near zero, the scaled probabilities will still be spread from 0 to 1.

A row has the property newunread if it is from the last refresh for its feed and is unread.

A row has the property highprob if the scaled probability is greater than 0.98.

A row has the property probX if the scaled probability is in the Xth decile(10%) from the top. An article with a scaled probability of 0.82 is in the 2nd decile from the top and hence has property prob2. Note that articles with scaled probabilities higher than 0.98 will have both properties highprob and prob1.

A row has the exactly one of the hour properties. If the age of the article is less than X hours, the article will have property hourX where X=1,3,6,12,24 and X is as small as possible. If the article is more than 24 hours old it will have property hourother.

A row has the exactly one of the day properties. If the age of the article is less than X days, the article will have property dayX where X=1,7,30 and X is as small as possible. If the article is more than 30 days old it will have property dayother.

A row containing a keyword has the property keyword.

A row containing keywordX has the property keywordX where X=1,2,3,4,5,....

A cell has the property faviconcol if space needs to be left for an icon.

Examples

Base

Here are the relevant parts of the built-in newsfox.css file:

treechildren::-moz-tree-cell-text
  { padding-left: 4px; }
treechildren::-moz-tree-image(faviconcol)
  { height: 16px; width: 16px; }

treechildren::-moz-tree-cell-text(unread)
  { font-weight: bold; }
treechildren::-moz-tree-cell-text(noID)
  { text-decoration: line-through; }
treechildren::-moz-tree-cell-text(highprob,unread)
  { color: #500000; }
treechildren::-moz-tree-cell-text(highprob,unread,focus,selected)
  { color: white; }
treechildren::-moz-tree-cell-text(keyword)
  { color: #10a010; }
treechildren::-moz-tree-cell-text(keyword,focus,selected)
  { color: white; }

treechildren::-moz-tree-row(current)
  { border: 1px dotted Highlight; }
treechildren::-moz-tree-row(current,selected)
  { border: 0px; }

Notice that text modifications (color, font-weight for example) are on the cell-text not on the row. Firefox also has some built-in properties(e.g. current, selected), but I don't have references with me on the road so you'll have to search for them if interested.

Feed Tree

Here is an example for the feed tree:

@-moz-document url("chrome://newsfox/content/newsfox.xul")
{
.feedtree > treechildren::-moz-tree-row(feed)
  { background-color: lightgray !important; }
.feedtree > treechildren::-moz-tree-row(feedsFeed)
  { background-color: red !important; }
.feedtree > treechildren::-moz-tree-cell-text(unread)
  { font-style: italic; }
.feedtree > treechildren::-moz-tree-cell-text(searchFolder)
  { color: blue !important; }
}

Try and keep that FEEDS folder closed by making the feeds hard to look at when it is open! Note that the unread cells still have font-weight: bold since we didn't turn it off.

Article Tree

Here is an example for the article tree:

@-moz-document url("chrome://newsfox/content/newsfox.xul")
{
.articletree > treechildren::-moz-tree-cell-text(noID)
  { color: white !important; }
.articletree > treechildren::-moz-tree-column(flag)
  { background-color: blue !important; }
.articletree > treechildren::-moz-tree-cell(flagged,flag)
  { background-color: red !important; }

.articletree > treechildren::-moz-tree-cell-text(prob1)
  { color: #900 !important; }
.articletree > treechildren::-moz-tree-cell-text(prob2)
  { color: #800 !important; }
.articletree > treechildren::-moz-tree-cell-text(prob3)
  { color: #700 !important; }
.articletree > treechildren::-moz-tree-cell-text(prob4)
  { color: #600 !important; }
.articletree > treechildren::-moz-tree-cell-text(prob5)
  { color: #500 !important; }
.articletree > treechildren::-moz-tree-cell-text(prob6)
  { color: #400 !important; }
.articletree > treechildren::-moz-tree-cell-text(prob7)
  { color: #300 !important; }
.articletree > treechildren::-moz-tree-cell-text(prob8)
  { color: #200 !important; }
.articletree > treechildren::-moz-tree-cell-text(prob9)
  { color: #100 !important; }
.articletree > treechildren::-moz-tree-cell-text(prob10)
  { color: #000 !important; }
.articletree > treechildren::-moz-tree-cell-text(highprob)
  { color: #f00 !important; }

.articletree > treechildren::-moz-tree-cell-text(hour1,date)
  { font-size: 100% !important; }
.articletree > treechildren::-moz-tree-cell-text(hour3,date)
  { font-size: 95% !important; }
.articletree > treechildren::-moz-tree-cell-text(hour6,date)
  { font-size: 90% !important; }
.articletree > treechildren::-moz-tree-cell-text(hour12,date)
  { font-size: 85% !important; }
.articletree > treechildren::-moz-tree-cell-text(hour24,date)
  { font-size: 80% !important; }
.articletree > treechildren::-moz-tree-cell-text(hourother,date)
  { font-size: 70% !important; }
}

Make titles unreadable when deleted?! Change just the flag column background to blue, unless the article is flagged then make it red. Make higher probability articles have redder text. Note the position of highprob. Make dates(just the date column) shrink as the article ages. Article title displays can be styled differently for each keyword, rather than the same styling for each keyword as is done in the base example.

NewsFox

User login

Navigation

Search