Top Tip: Easily Learn CSS with FireBug FireBox and Thesis

[yancey]

While learning WordPress, Thesis and plugins I ran across cformsII. In the programmers documentation, which was awesome, he suggested using FireBug to learn how to change the CSS in cformsII. Firebug is what he uses to identify CSS that he wants to change.

FireBug helped me learn the CSS of Thesis.

FireBug is a plugin for the Firefox browser.

Here is an example of it in use.

I have different colored blogs and on some of them the left border of the Subscribe button did not have a line color that I needed. I wanted to change the left border of the Subscribe button.

Having FireBug installed, I right-click on the Subscribe Button and choose "Inspect Element." A panel opens at the bottom of the browser window.

On the left is the selected HTML and on the right it shows the CSS page and line number.



In this situation, I want to change the left line on the Subscribe button. Now that I can see how the CSS is written I added this to my custom.css page:

.custom ul#tabs li.rss { border-left: 1px solid #45883f; }

FireBug allows you to look behind the scenes at the CSS which makes identifying the correct code easy. You can use it to inspect any element that you might want to change.

Firebug + Forums + custom.css = FUN

If you found this helpful, please reply with a "thank you". That will bump this post back up to the top where someone else might benefit from it.

I thought I would share the secret.

Enjoy - Yancey

[ryanm]

Thanks for the post. I spent a good 60 mins last night trying to find a specifc tag, and this should help me get to it quickly.

[kingdomgeek]

Firebug is amazing, Yancey, and I'm glad you posted about it!

I couldn't begin to count how many support questions I've already answered here with the aid of Firebug. As a troubleshooter & tweaker, I couldn't live without it!

[yancey]

Thanks Rick, I've read a LOT of your postings. I'm a lurker fan of yours.

[jaymyers]

Another FF tool very similar is Web Developer I have used it for quite a while and have become pretty efficicient with the hot-keys.

[kingdomgeek]

yancey: Ha! Looking at your various blogs, though, it looks like you know Thesis quite a bit better than I do, so that you would respect my posts is a bit humbling.

Have a great day!

[welshgirl]

Thank you!

[yancey]

You are welcome. You have a great purple themed site so I reviewed it because you took the time to post.

Shrink Rap by Kathy James - Purple Website

The Shrink Rap blog is another great example of the Thesis theme in action.

[kneff]

Apart from a basic course in html I did back in high school, I am about as knowledgeable about coding as your average rock. But I'm learning, and the FireBug tool certainly has helped me identify the elements within the scary .css-code that I might want to adapt, but I wonder:

When editing code in custom.css, can/should I do so directly throught FireBug, or download the file from my server and open it as text, as I have done previously? Any enlightenment would be most appreciated, thank you

[yancey]

When you are editing with Firebug you are not editing, you are seeing what the page would look like IF you made those changes to your css.

You can use Firebug to go to CNN.com and play around with the css for that site but you are NOT changing the css for that site.

Use Firebug to determine the changes you want to make then use your text editor to make the changes.