This article will present a quick and painless way to change the forum color scheme using the Stylish add-on for Firefox 3. Users of alternative browsers, such as Internet Explorer, are encouraged to download and install Firefox here: http://www.mozilla.com/en-US/firefox/all.html
Stylish works by rewriting the CSS code that defines its target website. Before the page is displayed by your browser, Stylish replaces unwanted CSS code with your own. As a result, you can control over how the page is displayed. Hate the colors? Want to block ads? Don't want to wait for large images or signatures to appear when browsing a forum? Stylish gives you complete creative control.
This control comes at a price, of course. Installing Stylish requires some left-clicking, and adding styles for popular sites such as MySpace, Facebook, or Google is as easy as choosing a new image for your desktop. Some of these styles are quite complex, such as those that block ads or change icons, but installing them is no further away than your mouse-button. However, a quick glance at the code for each of these styles reveals that the changes under the hood involve a good deal of CSS scripting. This might be an interesting way to spend an afternoon, but there are Xbox 360 Achievements that are impatiently waiting to be unlocked. How, then, do we change the colors of our favourite forum quickly and without additional painkillers to combat the orange blox induced headache?
We start by installing Stylish for Firefox 3. Using the Tools menu, choose Add-ons. When the dialogue box pops up, choose 'Get Add-ons' and search for Stylish. Install it by clicking the button marked 'Add to Firefox' and confirm when prompted. Continuing in the same Add-on dialogue box, choose the tab marked Extensions and find and click the Options button for Stylish. At this point, you will be greeted with an empty box which holds the styles that you would like to apply. Again, we have the choice between becoming developers and writing our own custom scripts for the forums, or using pre-existing scripts for common sites. However, no one has written a script to make MPC's forum colors palatable, so it appears that we are stuck with the first option.
Appearances, however, can be deceiving. The beauty of the open-source movement is that developers are encouraged to build on the work of others in the community. In other words, there is no need to reinvent the wheel. The key is to find some code that almost does what you want and then change it appropriately. Often, this will be more difficult than writing your own code, but that is not the case today.
Stylish provides a website (http://userstyles.org/stylish/
) with user documentation, helpful forums, and a repository of style-scripts for use by the community. These scripts are divided into three types: application specific, site specific, and globally applied styles. Application specific styles change the appearance of Mozilla applications by moving widgets, changing icons, and applying skins. Globally applied styles are applied to every site you visit using the modified browser and are often used to block ads, pop-ups, and other annoyances that lurk about the Web. Site specifc styles apply only to a single website (www.maximumpc.com/forums/index.php
) or to a domain (maximumpc.com).
Thanks to Gailim, one of our forum members, we have some style-scripts that do not require any editing. He has created two styles for our forums using a blue-green scheme and a blue-green-red scheme. Based on these styles, several other forum members have added their own styles. Thanks guys!
Once you have installed Stylish, click on each of the following links to install style-scripts. Each link will take you to a page with a section entitled 'Install Options' with a button labelled 'Install in Stylish' directly beneath it. Click this button to bring up the style-script and click 'save' on the bottom right to import the script into Stylish.
Gailim Blue-Green-Red: http://userstyles.org/styles/8362
Gailim Blue-Green: http://userstyles.org/styles/8363
Don 2: http://userstyles.org/styles/8380
Don 3: http://userstyles.org/styles/8384
With your new script saved, go back to the empty dialog box that Stylish provided earlier labelled 'Manage Styles.' If you closed the window, simply go back to Tools, then Add-ons, and double-click on Stylish to reload the dialog box. It should now have an entry for the script that you have just edited and saved. There is a column to the left of the script names that may contain a checkmark. A check indicates that the script is active. Make sure the checkmark for your newly edited script is present and launch the forums at maximumpc.com, and enjoy.
HOW-TO hack a new script
This section of the HOW-TO explains how to hack an existing script to run on maximumpc.com/forums. I explain how I found an appropriate script and where to change it so that it recognizes our forum. Gailim's scripts used this as a base, but he took it a step further and changed the color values inside the code so the colors suit his preferences.
First, we need some code that almost does what we want and we can start by looking in the application specific styles for scripts that modify colors on phpbb 2.x based forums. By clicking on the 'App Styles' tab on Stylish's website and searching for 'forums', I was able to find a set of scripts that change the color of a forum at benheck.com. I've never heard of the forum, but they use the correct software and a quick glance over the script made me hopeful that I'd found what we need. Scroll down the list of scripts until you find 'Benheck Forums: Skins: smartBlue' and click on the link. If you prefer a green or red theme, you'll find similar scripts and should be able to follow the same directions to get them working in our forums.
Clicking on the link will bring you to a page that displays 'Before' and 'After' images of the affected forum. Below this appears 'Install Options' and a button labelled 'Load into Stylish'. Go ahead and click it. This will bring up another dialog box which is loaded with the CSS script that we've been trying to avoid writing. If you leave the script alone, you will have already changed the colors over at BenHeck.com, but that isn't our goal. We want the script to run on maximumpc.com, instead, so we'll need to start hacking.
The second line of the script identifies the page to be changed and it reads:
Modifying this single line to identify our forums at maximumpc.com will force the color change every time we visit the forums using this browser. Change the line to read:
If you want to change the color scheme, there are many hints and tips throughout this thread. Here is a list of hex color codes that might help you code your color changes: Hex Codes
Save your changes and go back to the empty dialog box that Stylish provided earlier labelled 'Manage Styles.' If you closed the window, simply go back to Tools, then Add-ons, and double-click on Stylish to reload the dialog box. It should now have an entry for the script that you have just edited and saved. There is a column to the left of the script names that may contain a checkmark. A check indicates that the script is active. Make sure the checkmark for your newly edited script is present and launch the forums at maximumpc.com, and enjoy.