Firebug Add-On for Firefox Finally Fixes Frustrating Flaws of Fonts

I am having fun now! While digging deeper into CformsII I found a great link on the Styling page. Between Select a form style and Basic CSS editor is this text:

You might also want to study the PDF guide on cforms CSS & a web screencast I put together to give you a head start.

I followed the link and downloaded the pdf. Oliver Seidel, the author of the pdf and undoubtedly the plugin did a great job of outlining the different css areas of the form. It’s really nice but at the end he has a second section titled: “cforms Layout Development, Best Practices.”

He suggests using Firefox and Firebug. Firebug is a plugin for the Firefox browser. This is where the fun starts.

Firebug looks at the underling CSS, HTML, and Javascript structure and shows you where in the code individual elements are.

I’m modifying the fancy_white.css that comes with cformsII. I changed the font in an earlier post. Now I want to change the font size.

Open Firefox then go to “Tools” and select “Firebug” then open Firebug
This opens a Firebug window under your web page.
I browsed to the contact form I want to change.
Right Click on the field title “Your Name” and select “Inspect Element”
On the left bottom of your screen you should see the HTML with <span>Your Name</span> highlighted.
On the right bottom under Style you can see this is named .cform label

Here is the cool thing, change the font-size and the page shows you what your change would look like. EXCELLENT (rubbing hands together)

Now that I know that I want to change .cform label attribute font-size from 12 to 14, I go to the fancy_white.css and change it there.

Save it and check it. Sweet.