The browser inspector is a browser feature that allows you to view specific snippets of a webpage element’s HTML and CSS.  You can isolate specific elements or tags and view the corresponding CSS styles to easily test changes and copy the code for customization. All webkit browsers come with an inspector built in. For best results, do not use IE to build or test customizations.

The Solution

Using a Plugin

If you want to adjust the styling of your site without having to physically change any code, consider using CSS Hero! They used to be a competitor of Obox when we built a tool called DevKit, but we realised that they do easy site customisation better than we could have dreamed of.

CSS Hero allows you to easily edit, preview and control how your site displays on desktop and handheld devices, you can just click on the element you want to adjust, and start editing the styling right away.

Get CSS Hero Now

PS. Use the OBOXHERO coupon code to save $10 – $250!

Using Inspect Element In the Browser

If you have a webkit browser such as Chrome, Firefox, Safari or Opera, Inspect Element is available from the context menu and will popop a panel in your browser showing you the markup on the left and styles on the right (shown here in Chrome). You may also access additional enhanced inspectors via Extensions for Chrome, or via the Firebug plugin for Firefox.


Selecting a specific element (each shown on their own row) in the HTML window on the left, such as the <li>, will highlight the element in the preview to assist you in determining what is what:


To select specific elements, you can either right-click them in the preview pane, or left-click the code in the left-hand inspector window.

The CSS styles for each element are shown on the right side, with the most dominant selector (the .class-name or #id-name) shown first.

Testing Changes

You can edit specific styles in the sidebar, or view the stylesheet to see all relates syles by clicking the link to the far right:


Changes you make will take effect immediately to help you test and preview them. This also helps you grab the correct style selector.

To make permanent changes, copy the new/edited styles into your theme’s Custom CSS box  in Theme Options.

Grabbing Page-Specific selectors

If you want to restyle a common element on a specific page, such as links, borders or fonts,  you will need to target the page by its unique ID so the browser knows to apply your styles to just that page.  Thankfully, WordPress assigns a unique “class” to the body element of your pages to make this easier.

If you right-click the page and choose “View Source” or use the Inspector to view the HTML/source code area, locate the <body> element to view its class names:


In this example, the selector for this page is “page-id-82”. We could also use “page-template-fullwidth-php” to affect ALL pages using the full-width page template, but we want ONLY this page.

Using the selector in Custom CSS

Say you wanted to hide the title banner element on just this page. Using the above selector in combination with the normal style for the title banner, you can do that:

.page-id-82 #title-container{display: none;}

If you wanted to make the background/content area a different color on just this page:

.page-id-82 #content-container{background: #666699;}

More Info

Check out the following resources for further help on using the Inspector, the basics of CSS structure, or what property names to use in your styles.

Where can I get help with modifications or advanced Custom CSS?

Get Firebug, Enhanced Element Inspection Addon

Google Developers Article on Elements

Firebug Tips & Tricks