CSS is fun

I've been messing around with MAGFest's web site using the Firefox extension Stylish. The result of all this is a dark color scheme. Being that I am who I am, I'll post it here.

Before	After

Using this theme is simple (so long as you use Firefox, and possibly also Opera):

1. Install Stylish if you don't already have it installed, and restart Firefox.
2. Click Stylish's icon in the status bar and select Manage Styles...
3. Click Write...
4. Type in a name for the theme in the Description box. I recommend Darkfest, but it's ultimately your decision.
5. Open the CSS file, press Ctrl + A and then Ctrl + C to select it and copy it to your clipboard.
6. In the Add Style window, click the large text box and press Ctrl + V to paste the CSS in.
7. Click Save and close the Manage Styles window.
8. Look at MAGFest's website, it should now look like the After image linked above. If not, refresh it.
9. Enjoy.

Now for some questions you might have.

Q. How do I toggle this theme?
A. The theme can be toggled quickly and easily by clicking Stylish's status bar icon and selecting it. You may need to refresh the page for it to take effect.

Q. Does this cause any functionality changes with the site?
A. Not intentionally. There is one known issue with the logo. With the site's default theme, clicking it takes you back to the main page (http://magfest.org/), but with this theme active, the logo is not a link. This is due to the way I replaced the image, and cannot be changed as far as I know. The page it takes you to is the "What is it?" page, which can easily be accessed through a link just below the logo anyway, so I don't consider it to be a huge issue.

Q. How did you invert the images?
A. I inverted the images in Photoshop (for the PNGs) and ImageReady (for the animated GIF). Load image, hit Ctrl + I, save. For the gif, every frame needed to be inverted, but it's just a matter of selecting all the frames and then inverting.

Q. Where are the inverted images stored?
A. Firefox supports embedding an image within a CSS file or a web page. You just have to encode the image with an algorithm called Base64 and use the right syntax. The images are thus stored within the CSS file itself.

Q. Why did you embed the images in the CSS file?
A. Distributing one file is easier than distributing four, and the associated documentation is a lot simpler to write and follow.

Q. How did you go about encoding the images?
A. I wrote a quick PHP script with a form to let me select an image to encode. It encodes it and spits out the correct syntax to use in a CSS file as well as a preview of the image so I know which image I just encoded.