Habari Xenu - Customizing the Display of Headlines

You now have greater control over how headlines are displayed in the right hand side through custom Cascading Style Sheets (CSS). You can now customize the display of headlines and summaries to your needs. Some people prefer using better or different fonts; some prefer different colors; some like seeing two columns of headlines.

How to start using custom CSS?
To start using custom CSS, you must do the following:

1. Enable user customization by checking the option Enable customization through userContent.css under Habari Xenu -> Settings.
2. Under your Mozilla or Firefox profile, you will find a special directory named chrome. You customizations must be added to the file userContent.css under this chrome folder. This file contains user-level style-sheet customizations that have to be applied to all webpages viewed through the browser.
3. The ChromEdit extension greatly simplifies editing your userContent.css. It is strongly recommended that you install it. After installing it and restarting your browser, you can launch ChromeEdit through Tools -> Edit User Files.
4. Add your CSS customizations to the tab titled userContent.css in ChromEdit. The following section provides some frequently asked for customization.

Frequently Asked for Customizations
You may need to restart the browser for some of the following to take effect

Display Headlines in Two Columns
Add the following to userContent.css:

div.hx-item{
    width:45% !important;
    float: left !important;
}

Increase the size of the 'Posted' credit line
Add the following to userContent.css, changing 8pt to whatever works best for you:

div.hx-credit{
    font-size: 8pt !important;
}

Changing the font of an entire news item (headline + summary)
Add the following to userContent.css, changing 'verdana' to whatever works best for you:

div.hx-item{
    font-family: verdana; 
}

Some background into document classes used in Habari Xenu
There are several document classes in the headlines displayed by Habari Xenu. You can style one or more of these classes to have maximum control over how headlines and summaries are displayed. Remember that you must mark any custom styles you add as '!important'.

The display frame is divided into the following classes:

class=hx-header

NYT > International
Find breaking news, world news, multimedia & opinion on the US, Africa, Canada, Mexico, South & Central Americas, Asia, Europe, the Middle East and Iraq.

Details:
Feed URL: http://www.nytimes.com/services/xml/rss/nyt/International.xml
Feed Type: RSS
Feed Published At:Sat, 20 Nov 2004 22:00:01 EST
Feed Parsed Copy: /home/thaths/.mozilla/default/h3vuta92.slt/chrome/habarixenucache/83fb5ec097f5e17dcb92631dce4d3948.html

class=hx-header-title

NYT > International

class=hx-details

Details:
Feed URL: http://www.nytimes.com/services/xml/rss/nyt/International.xml
Feed Type: RSS
Feed Published At:Sat, 20 Nov 2004 22:00:01 EST
Feed Parsed Copy: /home/thaths/.mozilla/default/h3vuta92.slt/chrome/habarixenucache/83fb5ec097f5e17dcb92631dce4d3948.html

class=hx-item

Are You Kidding Me?

BERLIN (Reuters) - Thieves have stolen scantily clad garden gnomes from a gnome peepshow in an eastern German amusement park, park manager Frank Ullrich said on Thursday.

Posted at Fri, 19 Nov 2004 14:19:41 GMT

class=hx-headline

Are You Kidding Me?

class=hx-summary

BERLIN (Reuters) - Thieves have stolen scantily clad garden gnomes from a gnome peepshow in an eastern German amusement park, park manager Frank Ullrich said on Thursday.

class=hx-credit

Posted at Fri, 19 Nov 2004 14:19:41 GMT