Intro: Many websites are made for maximum compatibility and as such don't really use the full resolution (horizontally) of your monitor. This is especially true if you're using a widescreen monitor, but may also be true on 4:3 ratios at higher resolutions.
Purpose:
This will teach you how to intercept the CSS code from the EggXpert webserver and make a small change to it so that the entire website will become more suitable for widescreen monitors. This technique will work on any website that is well written with CSS stylesheets. All that needs to be done is adjust a single property in the local CSS stylesheet and that will change the entire EggXpert experience which will apply to all eggxpert forums and blogs! The changes are only local to your computer...
Ok, here's where you need to pay attention. First, you need to decide if you just want to mess around or if you want the changes to be semi-permanent. If you just want to play around without any way to make your changes permanent, see PART A.
If you know you might want to make permanent changes, then see PART B
PART A:
For those who just want to play around with the eggxpert CSS with no possibility of saving their changes...
First, download and install firefox.
Second, download and install the firefox plugin Realtime EditCSS
Third, visit the eggxpert forums
Okay, here comes the part that gets a little tricky..
Right-click on the page and select "EditCSS"
Ok after clicking this, the CSS editor will apear on the left side of the screen.
You need to locate the pixel width property under "CommonOuter" and change it to a value that is suitable for your monitor. The default is 960 pixels! Might want to change it to 1280 or even wider!
(Property highlighted above)
After this, the eggxpert forums will now use the horizontal width of your monitor! But when you close down EditCSS, your changes will NOT be saved!
PART B:
For those who want to always view the eggxpert website in widescreen
We're going to create a file that is only used when visiting eggxpert.com and will override the default CSS of eggxpert.com
This part unfortunately is a bit more difficult than Part A..
Step #1 Locate your FireFox profile directory.
There is a profile specific to each user login on your computer.
Start -> Run -> %APPDATA%
A window should appear, and in it are all your user specific settings.
Navigate Mozilla -> FireFox -> Profiles -> .default -> chrome
"Chrome" is only if you're using the default FireFox theme. If you're using your own theme, then you will need to be in your profile directory for that theme.
In FireFox 2.0, use the Chrome directory, no matter what FireFox theme you're currently using.
In this folder, you should see a bunch of example files.
Step #2 Creating a CSS file with an entry that overrides the CSS on eggxpert.com
Create a new CSS file named userContent.css with the following contents:
@-moz-document domain(eggxpert.com)
{
/* CSS rules here apply to:
+ Any page whose URL's host is "eggxpert.com" or ends with
".eggexpert.com"
*/
/* Modify the width tag of commonOuter */
#CommonOuter { width: 1200px !important; }
}
Note: The important tag specifies that we're going to
override the CSS that is being received from the eggxpert webserver.
This is necessary since we don't want to use the default width! Of course, change the width (in pixels) to whatever you want!! I'm using a 1280x1024 resolution monitor, and I found 1200 to be a nice choice.
Now you should have three files in the directory: userChrome-example.css, userContent.css, userContent-example.css
Step #3 Restart FireFox and visit the eggxpert.com website
Unlike the EditCSS example above, you MUST restart firefox every time you make a change to the file. This will be permanent and ONLY apply to eggxpert.com until you delete userControl.css
Step #4 Reverting back to normal
Simply delete the userContent.css file that we created and restart Firefox. And Eggxpert.com will go back to the narrow page that it has always been.