Firebug: the best-spent 6 minutes.

Note : This snippet applies to Customizr version 3.1.x and below. It may not work with version 3.2+. Use with caution on 3.2+ and check the availability and type of the hooks in the Customizr hooks API.

Updated 8 June 2014, to add links to some great articles.

Many problems that are asked on the Customizr forum are very easy to solve using Firebug. For every element on your page, it quickly and easily shows you which CSS rules (and files) are responsible for the styling.

You can work out in seconds how to change the styling of any element. Simply right-click it and select Inspect Element with Firebug.

UsingFirebug

Firebug works with Firefox. Other browsers have similar tools:

  • Chrome has its Developer Tools.
  • Safari has Web Inspector (which you switch on in the menu with Safari > Preferences > Advanced > Show Develop menu in menu bar). Simply right-click and select “Inspect Element” to launch it.

But my favourite is Firebug. I find it more user-friendly and less complex for a first-time user. Once you get more confident with it, you’ll find some really great features that take you to another level.

Watch the video

Learn how to use Firebug here. This 6-minute video is getting old, but it’s one of the best-presented I’ve seen.

Read more

If you prefer reading text to watching a video, here are some really great articles on wordpress.com that go into more detail on how to use developer tools / Firebug (the principles are the same for all tools):


About ElectricFeet

ElectricFeet started using Wordpress for the first time in the summer of 2013. Customizr is such a great theme, it's hard not to get swept up in the fun of discovering new tricks for modding pages with (and for) others on the Wordpress forums. The fun continues :-)


One thought on “Firebug: the best-spent 6 minutes.

Leave a Comment

Your email address will not be published. Required fields are marked *

Please check the following point before adding your comment

  1. - Did you check that you have the latest version the theme installed ?
  2. - Did you read the documentation ?
  3. - If you think it could be useful, please check your system informations : Navigate to Appearance > About Customizr and go to the bottom of the page.
  4. - Did you check if your issue was already resolved ? Before posting a new topic, you'll want to make a quick research with our Google powered search tool below.

You may also use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">