RSS 
Email 
Twitter
iTunes
Web Developer Firefox Extension Makes CSS Editing Easy
January 13th, 2007 | Posted in Web Design, WordPress |
If you’ve ever tried to edit the style sheet on your blog, you probably find that it’s a process of trial and error, guessing which tags apply to which content, and how much your adjustment of each tag will affect the display. You modify it, then save it and view your site. Modify it some more, view it again, etc.
The Firefox Web Developer extension can make editing CSS easier. This extension installs a Web Developer menu bar into your browser.
The Web Developer extension contains more than just a CSS editor, but I’m just focusing on the CSS part for now. Click the CSS drop-down menu and look at the options.
If you choose Edit CSS, a styles pane appears on the left with style information. When you change the style information, the actual styles on your page change in real-time! For example, in the image below, I altered the color of the sidebar headers.
The style sheet isn’t actually changing your site, just the way the site appears to you right now in Firefox. After making the desired changes, you can save the style sheet and then upload it to the directory, overwriting the previous style sheet.
You can also use the CSS tools to figure out what styles are named what. For example, if you select the View Style Information option, your cursor changes into crosshairs. Use the crosshairs to highlight a particular style. After you finish highlighting your selection, click on the selection. The crosshairs read all the CSS tags applied to that style and let you know all of the values.
This might be particularly useful if you see a style on another site and want to see what tags are driving it.
Overall, if you tweak your style sheet a lot, or just want to customize your WordPress theme, you’ll definitely want the Firefox Web Developer Extension. It is one of the best extensions for Firefox and is truly impressive.
Related Posts
- Firefox and Deepest Sender are superior to IE7
- Resolving Browser Display Discrepancies Between IE and Firefox
- WordPress Themes Crash Course: Everything You Need to Know to Get Started with Themes
- Skype Firefox Exention Changes Phone Numbers into Buttons
- New WordPress Plugin Enables One-Click Installation of Plugins and Themes
January 14th, 2007 at 2:16 am
I’ll also put in praise for the Web Developer toolbar for Firefox, and well as another one that shows the structure of the document (”View Source Chart” also for Firefox): https://addons.mozilla.org/firefox/655/
For IE, I use the very useful Web Accessibility toolbar: http://www.visionaustralia.org.au/info.aspx?page=614 (similar to the Web Developer toolbar for FF, but with some slightly different features); very good for checking accessibility issues.
Lots of other useful tools are listed in the handout I did for two conference presentations I did in 2006 on “reviewing screen-based content”. See http://www.cybertext.com.au/services_edit.htm for the handouts.
April 15th, 2007 at 3:22 pm
[...] Developer extension for Firefox. You can pinpoint the name of the style you need to modify. (See this post for more [...]
January 4th, 2008 at 2:38 pm
Today I installed Firefox 2 and… *problem solved*. Firefox 2 includes a wonderful automatic spell checker that, like Microsoft Word, checks your spelling as you type and underlines any words that it deems misspelled. Just… perfect. Exactly what I was looking for
http://www.firefox-download-free.com