How to find specific CSS rules in WP using Chrome

[pbryd]

I've been using WP lately and i'm getting used to it, but sometimes even finding and changing a simple CSS rule can be time consuming.

Here's a tip to speed it up and make it a bit easier.

Using Google Chrome you can highlight the element on the page, (page title in this case) and right click to bring up the Inspect element.

From here you can see the html code and css rules relating to which ever element you highlighted.

From here you can go to appearance/editor and find the css rule you need to alter.

Google Chrome even lets you turn specific CSS rules on and off using check boxes and shows the results in the browser as you do it.

Very handy.

I've posted some screen shots in my blog

 

[Jamie101]

Yes that's handy

I'm pretty sure this is similar to the add-on 'Firebug' if anyone prefers to use Firefox.

 

[chippyb]

That is built into Firefox 10 without addon now

 

[PoshTiger]

yep - it is...

but firebug is better...

 

[jj1]

Thanks for this - I tend to use Firefox / Firebug but will give this a try. (Wordpress seems to have a few glitches where the css doesn't quite behave the way it does elsewhere!)

 

[tifosi]

Thanks for this - I tend to use Firefox / Firebug but will give this a try. (Wordpress seems to have a few glitches where the css doesn't quite behave the way it does elsewhere!)

Doubtful. But WP's css is an archaic bag of shite where they have layered css some of which is enforced using !important. They also have a LOT of parent-child-child heirarchy css which ofter conflicts.