• Skip to primary navigation
  • Skip to content
  • Skip to primary sidebar
  • Skip to footer

WP SuperGeek

WordPress Design, Help & Training

Main navigation

  • Portfolio
  • Services
  • Learn WordPress
  • About
  • Contact
  • Blog

Using Inspect Element or Firebug to peek behind the scenes of your WordPress website

inspectelementHave you ever been frustrated by the way something appears on your website? Perhaps you thought some text was going to be green, but it actually looks red. Or perhaps you formatted text to be aligned to the left, but it’s actually centred. Maybe an image has an ugly-coloured border around it that you didn’t intend.

“Code” is not a dirty word!

Websites are made up of files. Sometimes, a lot of files. And those files are filled with code. Sometimes, a lot of code. And if you don’t know what the code means, it can be really difficult to understand why sometimes things just don’t look right on your website.

Without knowing exactly how your browser is getting the information to display a website, it’s impossible to know how to fix the way it appears. That’s where Inspect Element (or Firebug) comes in.

Webkit browsers, such as Apple’s Safari and Google’s Chrome, have built-in “developer mode” tools that are very useful for inspecting the different elements making up your site. For Firefox, there’s a free add-on called Firebug which will do essentially the same thing. A simple right-click on the page item you want to check reveals much about that item’s formatting, allowing you to troubleshoot problems.

I made this video to walk you through the steps of using Inspect Element or Firebug to see behind the scenes of your website. See below the video for some step-by-step instructions.

Instructions:

1. If using Safari, go to Safari>Preferences>Advanced then check the “Show Develop menu in menu bar” checkbox. If using Firefox, download and install the Firebug plugin.
2. Right-click on the element you want to inspect, and choose “Inspect Element” from the menu.
3. A new pane will open at the bottom of the browser window, showing the page’s HTML code (on the left-hand side) and relevant CSS code (on the right-hand side).
Choose any HTML tag, then make changes to the CSS code to preview the changes you want to make.
If you choose, you can then apply these changes to your stylesheet.

This post originally appeared on Grassroots Internet Strategy.

Share this:

  • Facebook
  • Twitter
  • Pinterest
  • LinkedIn
  • Email
  • More
  • Print

More on WP SuperGeek:

How to remove borders from an image in WordPress Ask a SuperGeek: What is HTML? Ask a SuperGeek: What is CSS? Use browser testing to see what your website looks like for different visitors

Reader Interactions

Leave a Reply Cancel reply

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

Primary Sidebar

Learn WordPress

WordPress Design

Categories

  • Ask a SuperGeek
  • Blogging
  • Coding
  • Design
  • General web help
  • Inspiration
  • Maintenance
  • Software
  • Troubleshooting
  • Uncategorized
  • WordCamp
  • WordPress Plugins

Search

Footer

Connect

  • Facebook
  • Instagram
  • LinkedIn
  • Pinterest
  • Twitter
WordCamp US Speaker

Latest blog posts

Ask a SuperGeek: Understanding domain names and web hosting

How Dubsado has changed the way I do business

How to create responsive tables in WordPress

Ask a SuperGeek: How to redesign your WordPress website with no downtime

Why the Procreate app is the coolest thing ever

Search

Copyright © 2023 · Digital Pro on Genesis Framework · WordPress · Log in