I get a lot of questions in the WordPress forums about how to edit or change small parts of a theme’s design. If you use the Chrome developer tools (or something like Firebug for Firefox), it makes really easy to track down those styles and know what to change.
Here’s a quick video showing how it works:
Written by
on
Related to
Thanks, Devin. Very helpful video. Especially good screen composition and narration.
Just to want to let you know:
There is a very similar tool in the Opera Browser (where Chrome probably copied it from ;-)
It is (on Windows) under: Opera -> Page -> Developer tools -> Opera Dragonfly
(or CTRL + Shift + I)
Thanks for the nice Video!
[…] Take the time to learn how to use Firebug or the Chrome developer tools. Both are very handy tools that will help you make edits and small changes to your theme. Have a look at Siobhan’s excellent tutorial on how to use Firebug or check out Devin’s video about Chrome’s developer tools. […]
Developer Tools had a steeper learning curve than Firebug in my opinion, but now I would never go back. Aside from Chrome being hands down my browser of choice, Developer Tools has less fluff and more of the meat.
Thanks for this Devin, I only use Chrome as well now so this will definitely come in very handy.
Sweetness itself!
Thanks Devin for this post. Very helpful.
I’m ‘dangerously (in)competent’ – ie I know enough to get into trouble…
Love Portfolio + (had been using Thesis 1.8.5)
Thank you for sharing!
A thousand thanks. Exactly what I needed to make sense of the various styles that are overlapping, superseding and overriding each other.
