[mmfgamer5]

Tips and Tricks

Finding colour StyleVars quickly: there is a small trick to help you find specific StyleVar colours. It basically uses Firebug to search in the CSS for the hex code of the colour you want to find. This can help if you are struggling to find a colour.

Step 1: Download Firebug here, and then install, restarting Firefox if required.

Step 2: Okay, first things first, click on the Firebug button in your browser (after going to the webpage of your choice, where you want to find the StyleVar). For me, it's up in the top right of the Firefox window. This will open the Firebug window without actually inspecting anything via the right click menu.





Step 3: Now, click on the CSS tab in Firebug. This will bring up the whole webpage's CSS.


Click here for larger image.



Step 4: Next, take a screenshot of the webpage, and paste it in Paint, Photoshop, Fireworks etc. Using the Pipette tool, click on the colour which you wish to find. Zoom right the way in, so you can be sure to select the lightest or darkest colour (in a gradient). If you're using a program such as Photoshop or Fireworks, which give you the hex code directly, copy that hex code. If you are using Paint, or something which does not give you the hex code directly, make note of the RGB code, then go here to convert it to a hex code. To find the RGB code in Paint, click on the "Edit Colours" button after selecting the colour, then get the Red, Green and Blue values from the text boxes.


Click here for larger image.



Step 5: After copying the hex code, paste it into the search box, and press the Enter/Return key.


Click here for larger image.



Step 6: Now it's time to check if you have the right code. Change the hex code to #FFFFFF (white) if it is a dark colour, or #000000 (black) if it is a dark colour. If it changes the colour of the element you're trying to find, awesome, if not, just try step's 5 and 6 again. I'll change the hex code to #000000.


Click here for larger image.



Step 7: If the colour changes, copy the black element text above the variables in the CSS. Some of the elements will be separated by a comma - just copy one of these elements.


Click here for larger image.



Step 8: Do steps 6 to 10 in the main tutorial.



If you have any questions, suggestions, feedback etc, please do not hesitate to post below.

Last update: 10th of August 2011 at 18:54 GMT

• Minor layout changes.