This way, copying the rules you need and changing the values of their properties, you will end up with a custom CSS code you can add to the theme. But if we only want the CSS code to customize it and feed it to the theme, the easiest way is simply selecting and copying the whole rule from the Style sub-tab. We can also search the theme files for that specific stylesheet, go to the mentioned line, and we will found the definition of that rule. If we want to check the whole stylesheet, we can click on the link, and Firebug would move to its CSS tab and show us the whole file (focused in the corresponding line).
Obtaining your custom CSSĪt the Style sub-tab, Firebug also tells us the stylesheet and line where it found each CSS rule (check the right-aligned link). That’s because Firebug works on the client side (your browser), and the files in your server remain untouched. Note that, if you reload the page, all your changes will be lost. This way, you can easily customize the aesthetics of your theme while checking how it looks. Then, enter the name of the rule (or keep the suggested one) and add new properties to it.Īll the changes you make will be reflected immediately on the web page. To add a new rule, right-click anywhere and choose the Add Rule option.Then, enter the name and the value of the new property. To add a new property to a rule, right-click on it (or in one of its properties) and choose the New Property option.To disable a property, hover on it and click the icon appearing to its left.To edit the value of a CSS property, click on it.
The Firebug window will open in its HTML tab: at the left, you will see the HTML code of your web page (with the element you clicked highlighted), and at the right you will see the Style sub-tab, with the CSS styles applied to that element. Right-click on the area you wish to change, and choose the Inspect Element with Firebug option. You may need to restart your browser after doing it.
You can download and install Firebug from its official website, or from your browser’s addon repository. But, first of all, an introduction from the people of Mozilla.
We’re going to go through the basics on how to install and use Firebug to add custom CSS styles to your theme. It can inspect, analyze and change your web style and layout in real time, which is a huge help when it comes to customize any WordPress theme. Firebug is a popular web development tool, available as an extension for the web browser Mozilla Firefox (and there is a Lite version for other browsers).