What is Firebug

what is firebugFirebug is a browser extension/Addon created for Firefox and other browsers which allows you to make changes to your websites Javascript, CSS & HTML in real time.

After editing & modifying your sites CSS code, you can then copy the changes to your parent themes style.css or child themes style.css so the modifications become permanent.

Firebug Web development tool

Firebug is a free tool that enables new developers and beginners to easily style their own websites & blogs without needing to be an expert in CSS coding.

Download Firebug

You can download the Firebug extension for Firefox or install a lite version for other popular browsers

Modify Your WordPress Theme Using Firebug

Using Firebug

Once you have downloaded and installed the Firebug extension, right click anywhere on your website and click Inspect Element.

Firebug - Inspect Element

The left side panel shows your HTML by default and the right panel shows your CSS.

You can use Firebug to inspect which CSS style declarations affects different elements. It also displays which style sheet contains the CSS code and what line number the code is on so you can easily locate it.

Generally your parent theme will contain one style.css file however you may have more style.css files for different plugins, built in features like shortcodes and also if you have created a child theme.

Editing CSS Styles Using Firebug

Sometimes when you inspect CSS using Firebug you’ll notice a line through some CSS. This occurs when new CSS has been added to overwrite the old code and is loaded after the original code or loaded last.

Edited CSS Code

This screen shot shows the default link color has been changed and therefore shows a line through it.

One of the best features of Firebug is available in the Style Panel on the right

Here you can edit your site in real time and view the changes in nyour browser without actually changing the style.css file

Edit Style CSS

Firebug is the best tool for new web developers and beginners who want to learn how to design their own website and modify the styling and layout of their site.

Firebug works best with the Firefox browser however lite versions are available for other browsers.

More on how to use Firebug to customize your WordPress themes styling coming soon.

Chrome Inspector

Google also offers a tool like Firebug which is worth checking out.

This tutorial & video, shows you how to use Chromes browser to change the color of all links.

Get 50% OFF the fastest WordPress hosting for the first 3 Months.

Expiration Date: Expires 1/1/15 WP Engine hosting Rules: Only valid for new customers with Personal, Professional, and Business Plans. Not intended for internal use by wpengine affiliates.

Leave a Reply

Your feedback is always appreciated.

Your feedback is always welcome & appreciated however you must be logged in to get solutions for questions asked in the comments.