16 January 2003

Operation Conquer the World

No, this isn’t gonna be about George Bush.

I have convinced mennuie (well, it wasn’t hard, because it didn’t cost him much) to let his readers change the way pages are displayed.

I had already mentioned that : all you have to do is add id="mennuieblog" (if you’re mennuie, the point being that every site should have a different id) in the <body> parameters. Then everyone can edit their browser’s personalized stylesheet and make the changes they like.

Ideally, browsers should have some way of imposing CSS rules upon a site depending on its URL, instead of relying on the webmasters adding stuff to their code. Well, maybe some browsers already do and I haven’t been notified.

Anyway, let’s get to business. For the (two) Opera users, you’ll have to manage that by yourselves. Opera is supposed to be a browser for advanced users, who know what they’re doing and know how to change the user stylesheet, right?

For Internet Explorer, you must create a something.css file, name it whatever you want, place it wherever you want, and then instruct the browser to load it by going in the Tools / Internet Options menu, then on the General tab clicking the Accessibility button.

In Mozilla, you must open (or create) the chrome\userContent.css file in your profile’s directory (on Windows 2000 and probably XP, it’s somewhere in Document and Settings\Your Windows Login\Application Data\Mozilla\Profiles).

Now that you have your stylesheet, you can add the rules you want. Here is what’s in mine (I’ve written it quickly, there may be nicer, cleaner ways or something, but it works fine in Explorer and Mozilla):

BODY#mennuieblog,
BODY#mennuieblog a,
BODY#mennuieblog a:link,
BODY#mennuieblog a:visited,
BODY#mennuieblog a:hover,
BODY#mennuieblog a:active {
  color: #000000 !important;
  background-color: #F0F0F0 !important;
  font-family: Georgia !important;
  font-size: 15px !important;
  line-height: 22px !important;
}

BODY#mennuieblog a
  { border-bottom: solid 1px #A0A0A0 !important; }

BODY#mennuieblog .head,
BODY#mennuieblog .head1,
BODY#mennuieblog .head2,
BODY#mennuieblog td,
BODY#mennuieblog th,
BODY#mennuieblog h1,
BODY#mennuieblog h2,
BODY#mennuieblog h3,
BODY#mennuieblog .side,
BODY#mennuieblog .side title,
BODY#mennuieblog .side item
  { color: #000000 !important; }
 

There you go: you’ve got mennuieblog in black on light grey. Well, that won’t be of any use to you, since the site’s in French, but what’s important is the technique. Everyone should do that, especially those white-on-black sites.

Have a look on my page source, and you’ll see there’s an id there, so you can do whatever you want with my pages.

For more information, check out the site that launched this idea.