New to Colorzilla? Try the WordPress Center .net Colorzilla Format String. Note: Please read the instructions (below the string) before you modify your default settings!
Cursor@ %rel-pos% in <%element%> || Box@ %box-size% | Css@ %css-size% | Color@ %hex% in >> %dom-path-reversed%
Try this Statusbar Format string: Just copy & paste the line above into ColorZilla > Options > Statusbar. A window will pop-up, showing the current Statusbar Format string. Highlight the existing string and paste this in its place. The default string should remain as part of the drop-down selector menu of Colorzilla. If you’re concerned about losing the default values, then copy it into a text file before modifying it.
Have you created the ultimate Colorzilla StatusbarFormat String? Want to share it with the rest of the world? Please use the comments section of this page to submit your own Statusbar Format String. Thank you! (note: you are welcome to add explanation in addition to your string, if you feel it’s necessary.)
Colorzilla is a Mozilla browser add-on extension compatible with Firefox and Chrome. It provides extensive DOM node details in the browser statusbar, and is capable of sampling any color on the current page– including colors from images. When I first discovered it a couple of years ago, I was amazed at the capabilities of Colorzilla. It’s color sampling eyedropper tool seemed to be the answer to my prayers.
At the time of first using it, I had only recently begun coding XHTML by hand, and using CSS regularly. Weening myself off of Web Design IDE’s– wishing to become more knowledgeable– I found myself using MS Paint’s color picker to determine color values for copying into my CSS declarations. Before Colorzilla, when I really wanted to match a color i liked from a web site, I would go as far as to make a screen capture of a web site, then open it in Photoshop so I could sample the colors I liked– all just to get the corresponding RGB or Hexadecimal values so I could use that color in my own stylesheet. Talk about using a crane to crush a fly!
[click : enlarge]
Being able to use Colorzilla to sample colors in real time from any web page must have literally cut hours off of my production times! Not only does it increase productivity, it helps with learning Hexadecimal color value declarations– because in two clicks, the user can learn precisely what are the color values of anything in the browser view port. Since Colorzilla provides both Hexadecimal color values, and RGB values, it can even act as a sort of learning tool for understanding the translation of RGB values to Hex values!
The beauty of Colorzilla, however, does not lie in the color sampling eyedropper alone. Another key feature of Colorzilla is its mouseover DOM inspector. Just as the user might activate its eyedropper / pointer tool for sampling color, so might he use it to determine what element of the HTML markup is used for rendering any point on the viewed page. Colorzilla provide a wealth of useful information, based on the DOM Node Tree.
By default, Colorzilla provides a stock set of reports in the browser statusbar. The reported details can be customized by the user so he or she might see a particular set of attributes at any given time. Right-click on the Colorzilla eyedropper icon, and select Statusbar Format to bring up a dialogue window for customizing what information is returned in the statusbar. The various options are listed above the user-customizable area, so it’s easy to try the many different Statusbar Format output variables (identifiable by a % symbol on either end of their names).
The thumbnail above links to a brief tutorial (embedded in the image). Learn to make the most of the Colorzilla statusbar format string variables. Once you get used to the idea of customizing your own Statusbar Format, try experimenting with it to see what works best for you! To save you the time of typing it into your own settings, just copy and paste the following line into Notepad (save it so you don’t lose it), then transfer it to your own Colorzilla settings when you’re ready.
ELEMENT --> %dom-path-reversed% || %css-size% (as rendered) | %box-size% (selector val) | %rel-pos% (browser sees) | %hex% Be sure to copy & paste the entire string into ColorZilla Statusbar Format String. Modify it later to suit your own preferences if you wish.
Another useful Statusbar Format String: shows the following items…
X, Y (in pixels) of cursor position relative to the hovered element
Box size: the actual size of the hovered element, as shown in the viewport
CSS size: the Stylesheet declaration block for this element. (e.g. I find it useful to compare the results from this parameter with those of the previous– as often, they are the same, but sometimes they are not.)
Color: the color of the selected element (or that which is currently under the cursor)
The path from the HTML element to the current element, according to the DOM tree
Cursor@ %rel-pos% in <%element%> || Box@ %box-size% | Css@ %css-size% | Color@ %hex% in >> %dom-path-reversed%
I hope someone find this to be useful! If you have your own string you’d like to submit here for sharing, just e-mail learnatWordPress Center .netdotcom. thanks!
Leave a Reply