Maximum PC

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
Nebbuchanezzar: http://userstyles.org/styles/8405
SomeGuy: http://userstyles.org/styles/8389
Don: http://userstyles.org/styles/8364
Don 2: http://userstyles.org/styles/8380
Don 3: http://userstyles.org/styles/8384
Ravenhawk: http://userstyles.org/styles/8409

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.

One more, I used Gailim's code and changed the base back round from green to a light beige...

Maximum PC Forums no green http://userstyles.org/styles/8364

I like Don's, but the bright blue text on the dark grey header and footers is hard to read...is it possible to change that (or the color of the grey?)

Oh and great write-up Jip.

Alternatively, maybe the how-to could go a little more in depth on how to change the colors ourselves? Or would that be too complicated? I don't know CSS but if I knew what lines to look for I could figure it out.

Here is another based on one from a Benheck style, it is two shades of blue on a black base backround...


Maximum PC Forums black w blue http://userstyles.org/styles/8380

Nevermind, I didn't see the show code button before...I can figure it out based on what is in there.

I know what I will be doing when I get home tonight

I'm glad that this has been helpful for you guys. Keep those new styles coming ... these are really great.

Maximum PC Forums no green change 1 http://userstyles.org/styles/8384

fixed.

Here are color codes have fun.

Edit; needed more space between the name and the link.

page not found


Less the green would be wonderful... red text on green is worse than the orange! I really didn't have an issue with the orange anyway though. Being an MPC member, I just had to try this out anyway.

Oh wow! maybe its not a good thing to load all three of the above color schemes! Now I have white lettering on a baby blue background and I can't see anything!!!


Yup, that was the issue. Be advised that you need to un-check the schemes you don't want to implement or they will all mix together.

He gave you the link, just take the maximumpc part of the URL out and you get: http://userstyles.org/styles/8384

Fixed, needed space between name and link.

theirs is a blue version too lol

Please set it back to what it was I use IE and have no desire to use mozilla/firefox.

We're going to change the backgrounds back and adjust some of the font colors and the page backgrounds as well. The orange framing will stay though.

I would just do it myself, but I don't have access to the stylesheets, so it has to go through internet ops, and they have some other, higher-priority stuff to do first.

So I've played around with stylish, and using some of the other guys' new styles I've figured out how to change most of the colors.

But one thing I want to do is figure out if it is possible to change the color of the links below the MPC logo (the ones inside the dark box) separately from the ones next to "Geek tested", as well as the huge chunk of links at the very bottom.

edit: oh sweet nevermind I figured out another way that will work.
Now I just need to figure out the red border...

do you mean the border around the forum?

its in the forum line

.forumline { background-color: #FFFFFF ! important; border: 2px #0000FF solid ! important; }

just change the second hex code to the color of your choice

would you mind telling me how you got the top links to be separate? that one stumped me

Here's my attempt at one. Its mostly red and grey.

http://userstyles.org/styles/8389
I know its not perfect but I will keep working on it. Oh and please make suggestions, I'll try to fix what I can.

As for the top links, I ended up just removing that line from the style and it uses the default white and grey colors.

Remove these lines (assuming you are starting from some of the other styles previously posted):

Orange is staying? who the hell is the fruit loop working there? Red, black, blue, green, hell even pink would be preferable to orange. Who ever made that decsion needs to be hung upside-down and forced to watch Barbra Striestand movies with their eyes taped open.

WELL, SOMEGUY, THAT ONLY WORKED FOR YOU, BECAUSE YOU WANTED THE LINKS TO BE RED...IF YOU WANTED TO HAVE LINKS SOME OTHER COLOR, IT WOULDNT WORK...WHEN YOU DELETED THOSE LINES, YOU IDNT NOTICE BECAUSE YOUR LINKS WERE ALREADY RED, BUT IT CHANGED YOUR LINK COLOR BACK TO DEFAULT...

aahhh, very sorry for teh caps, too lazy to go back and rewrite n non-caps...