Neatening the News

How to tidy up the BBC News website

Andrew Leach

For all those who dislike the shouty nature of the new BBC News website, here’s a short guide on how to calm it down. Don’t give up at the first mention of Greasemonkey — it’s actually quite easy.

What it does

The calming down is based on the Greasemonkey script written by Tom Veil. I've enhanced it and the current version (1.86) dated 1 August 2010...

It changes to font to Candara, because I like it. If you don’t like Candara, or don’t have it, it’s easy to set your own choice. There’s a full-size screen-shot of a slightly earlier version at http://www.acleach.me.uk/neater-news/scripted.png (430k, opens in new window) — the current version doesn’t look very different and has tidied up some of the faults apparent there.

NB: The new layout is optimised for screens of 1280px width. It will work on screens which aren’t as wide, including 1024px, but the right-hand sidebar hangs off the edge. I judged that this was less important than retaining the left-hand menu and shortening the main article text. Ideally the design should not depend on a fixed width, but I don't plan to change this.

* These faults appear to be have been rectified by the BBC’s design team now, too

Still to do

What it doesn’t do

How it works

The script is a Greasemonkey script. This means it only works in browsers which support Greasemonkey scripts, and that means that you need Firefox or Chrome. There may be other eligible browsers too, but I've tested those two. An error in the BBC’s news-ticker code prevents it working correctly in IE (with Greasemonkey for IE).

When you install the script, it’s triggered when a BBC News page is loaded, and it moves all the content around. This means that the BBC don’t know you’re using it: you have downloaded their page before getting down to work on it. It also means that you see the page as they intended, in all its glory, before the script kicks in and calms it down.

It’s written in JavaScript, and takes content from where the designers want it and injects that content into a different part of the page. It also redefines the styles defining how the content looks. If you’re interested in the actual code, it’s accessible via Greasemonkey.

How to install it

All the links here will open in a new window or tab so you can keep this one open.

  1. You need a compatible browser. If you don't already have one, install one:
  2. Use Firefox or Chrome to view this page, because it makes things easier.
  3. Install Greasemonkey.
  4. Go to my userscript page at http://userscripts.org/scripts/show/82319
  5. Click the green “Install” button
  6. Click the “Install” button on the dialog box

That’s all there is to it! Any time you visit a page whose address starts www.bbc.co.uk/news/, the script will kick in and do its stuff.

My script is called BBC News cleaner WIDE because it’s derived from Tom’s which he called BBC News cleaner, but mine handled screen widths better. You can have both installed, but it's probably not a good idea to have both acting at once, and you will need to disable one or the other. See below for information about disabling.

Customisation

If you don’t have Candara or want a different font, then you can change it. When choosing a font, you may need to experiment: some fonts will be too wide and it will mess up the “Share/Read/Watch/Listen” box in the sidebar. Unfortunately Verdana is too wide; Tahoma and Cambria both work, but their bold versions may be too bold for some.

  1. Right-click the monkey icon in the status bar and choose “Manage user scripts”
  2. In the dialog presented, click “BBC News cleaner WIDE”
  3. Click the “Edit” button at the bottom of the dialog
  4. You may be asked to select your editor; you only need to make the choice once. Notepad is good, but you'll need to find it. On my system it’s at C:\WINDOWS\system32\notepad.exe
  5. Right at the top of the script, there’s a line which says
    var fontFamily='Candara,Arial,sans-serif;';
    Change the first font listed, between the apostrophe and the comma, to what you want to use instead, for example
    var fontFamily='Cambria,Arial,sans-serif;';
    Be careful with the punctuation! Note where the quotes and semicolons are. If you want to use a font with spaces in the name, you need more quotes:
    var fontFamily='"Gill Sans MT",Cambria,Arial,sans-serif;';
  6. Close the editor and click “Yes” when asked to save your changes.

Disabling the script

In the unlikely event that you want to stop using the script, there are a number of methods:

What else you can do

The script hides the sharing icons, but if you’re affected by adverts and want to disable the Facebook script completely (remember, the Greasemonkey script only runs once everything has reached your computer) then you can install another add-in for Firefox called AdBlock Plus from https://addons.mozilla.org/en-US/firefox/search/?q=adblock+plus&cat=all. There’s a video at that link too, explaining how it works.

You can also amend the script yourself if you want it to do something different. The script is open-source, after all. But do keep the original acknowledgements at the top and add to them.

Suggestions and queries

Please use the discussion forum on my userscript page at http://userscripts.org/scripts/discuss/82319: click “New topic” if there isn’t already a relevant one.

And if you like it...

Add a review or become a fan at http://userscripts.org/scripts/show/82319

Privacy

Versions of the script from Version 1.81 (30 July 2010) check for updates by querying a file on my server here. That means that I can tell how many pages have been viewed using this script. Included in that data is your IP address as that makes the internet work. The IP address per se doesn't personally identify you and (in the UK anyway, where I am) it requires a court order to do that. I don’t collect information about which pages you are viewing.