getting to grips with firebug
DESCRIPTION
Presented at the Melbourne WordPress Meetup.Quite often, in the WordPress forums and the like, people post simple questions about how they can change the colour of a link or menu item, or change the background colour of something.To new users HTML and CSS looks like voodoo. This presentation will try and demystify some of the common HTML and CSS tweaks people ask for and demonstrate how users can perform some basic site debugging and styling using the browser add-on, Firebug.It will also cover how Firebug can be used to find specific css styles as well and how to test basic changes within the browser before making those changes permanent.TRANSCRIPT
Why would I use it?✓ To find errors in your web page
✓ Experiment with and preview changes without breaking your site
✓ Make simple updates yourself without having to pay a developer
That’s not all...Log - Log events to the console
Profile - Measure site performance
Debug - Provides a powerful debugger
Analyse - Monitor network activity
Where can I get it?
http://getfirebug.com
You can also get a lite version for Chrome
http://getfirebug.com/releases/lite/chrome/
WTF is this Box Model?Every element on yourpage is a box that consists of Width, Height, Padding, Border & Margin
Your new best Friends!
Click the HTML tag and the element will be highlightedPadding is purple Margins are yellow
The Quick Info boxGives you all the important info at a quick glance
If it gets in the way, just drag it
If you don’t want it, hide it
Editing your HTMLClick the HTML attributes or text to change them
Use the Tab key to move to the next attribute
Editing your CSSClick a property to change it
When a Property is struck out, it means it’s been overridden by another style
Editing your CSS
Cycle through propertiesIncrement or decrement numbersIncrement or decrement by ten with Shift key
Use the Up/Down arrow keys to...
Adding to your CSS
Double-clicking the white areaEditing the last value and hitting TabRight-clicking and selecting "New Property..."
Add new Properties by...
Useful LinksFirebug FAQ’s - http://getfirebug.com/wiki/index.php/FAQFirebug Documentation - http://getfirebug.com/wiki/index.php/Main_Page
Handy online Color Picker - http://www.colorpicker.comThe CSS Box Model explained - http://css-tricks.com/the-css-box-modelList of CSS properties - http://reference.sitepoint.com/css/propertyrefFont families - http://line25.com/articles/semi-web-safe-fonts-to-spice-up-your-web-designs
Font sizing - http://css-tricks.com/css-font-sizeWordPress and CSS - http://codex.wordpress.org/CSS
Thank You!http://maddisondesigns.com@maddisondesigns