Need to know how to quickly implement a theme using FireBug to Problem Solve WordPress Designs?  This video tutorial should help you design much faster. While this video was specifically made for WordPress designs, its content extends past the realm of WP Theme building. The information and methods used in this video should improve web design implementation for any CMS or site for that matter. This video will not show you how to install any of these Firefox plugins, or how to use an FTP client. Those should be done prior to watching this video.

Before you get started, go over this list and make sure you have the following tools.

What You Need

1. FireFox
2. FireBug
3. FTP Client (I use FireFTP in this demonstration, but FileZilla is another non-browser option)
4. Text Editor (I use Notepad++ in this demonstration, but Mac users should try Coda)
5. Remember to turn off all plugins that may minify or combine CSS (Caching plugins or WP Minify do this)

What You Will Learn in FireBug

1. Understand How to turn on and off FireBug.
2. Edit a site in a sandbox/mask oriented way.
3. Right Click to Inspect Element.
4. FireBug Workflow and arrangements.
5. Left click on element to view associated styles.
6. Find the document name and exact line in which styles are declared.
7. Use the basic find function to locate specific styles in the style.css.
8. Design on-the-fly.
9. “Copy-paste-save styles” method to update live site.
10. Copy CSS Paths for proper style declarations and inheritance.
11. CSS hierarchy  and organization.
12. And more.

The Video

The Video turned out to be a bit longer than I anticipated (26 mins), and unfortunately, I do say “um…” a lot. It’s all good content though, promise! Let me know what you think and if you have any cool Firebug tricks!