Making the British Newspaper Archive viewer more usable

I'm an avid user of the British Newspaper Archive (BNA), which is a fantastic tool for historians and researchers.

I only have two quibbles with it. One is that they continue to show you banner ads, even after you take a paid account (about the same cost as a Netflix HD subscription). The other is that the size of the viewer is rather restrictive. That means you either have scroll around a lot, or make the newspaper view full screen (which hides all the other useful information and controls on the page).

To resolve the latter issue, I've created a piece of code which tweaks the layout of the viewer to reduce the size of non-functional elements, maximise the viewer window, and move the Search Terms, Print and Download buttons into a more useful place.

This is how the BNA viewer looks normally:

Before screenshot

And here's how it should look once you have followed the instructions below:

After screenshot

Note that this is intended for people using desktop or laptop computers. There may be a way to get it working on a tablet, but I don't have a tablet, so you'll have to work that out for yourself.

How to do it

  1. First, you need to install a browser extension which will let you create and manage snippets of code called 'userstyles'. Userstyles alter how a web page looks, but only for your web browser.

    There are various browser plugins that let you do this, but my favourite is Stylus (install on Chrome or install on Firefox).

  2. Once you have Stylus installed, you will find an icon for it among your web browser's extensions. In Chrome this is within the puzzle piece icon at the top right (like this). You can click the 'pin' icon next to Stylus to pin it to your browser's address bar.
  3. Copy the following userstyle in its entirety (it should copy when you click on it):

  4. Click on the Stylus {S} icon at the top right of your browser - remember it might be hidden in the 'puzzle piece' icon.
  5. Click the 'Manage' button that appears. This opens a new tab for Stylus.
  6. In the Stylus tab, click 'Write new style', and paste your copied userstyle text in.
  7. If it asks, click 'Overwrite style'. You should also enter a name for the style (at the top right) - this can be anything you like, such as 'BNA'.
  8. Click 'Save' at the top right and close the Stylus tab.
  9. Now when you use the BNA viewer, it should automagically apply the improvements. Enjoy!