View Single Post
  #1 (permalink)  
Old 07-25-2008, 05:30 PM
yancey yancey is offline
Junior Member
 
Join Date: Jun 2008
Posts: 29
Lightbulb Top Tip: Easily Learn CSS with FireBug FireBox and Thesis

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
__________________
Yancey Grantham
Top Color Blogs What is your favorite color?
Blue Green Orange Purple Red Yellow
Reply With Quote