Chrome Inspect Tool

posted in: Tutorials | 0

The Google Chrome Inspect Tool (or DevTools) are a brilliant tool for editing/adding css on your site. It essentially gives you a sneak peak of what is going on in the back-end and allows you to test out changes without actually making changes. The DevTools consist of eight main groups of tools, but this tutorial will only focus on the Elements tools.

Opening the DevTools

  • From the Chrome browser right click the area you want to edit.
  • Click Inspect Element.
  • A box should open displaying the DevTools.

 

 

Hiding a Div

Let’s say you want to hide your logo from your site, but you’re unsure of the css selector. You can find out the correct selector/class/div from the DevTools and test it out before actually adding the css to your site.

  • First right click on your logo and click “Inspect Element.” Ensure the Elements tab is open.
  • Find the logo selector and type in “display: none;”

  • Ensure that you have the look you want (in this instance, that the logo is hidden).
  • Copy the code and paste it in your custom css box in Theme Options.

*You do not need to add the code that was already there. In this case the “margin-right: 0px;” All you would need is this:

#logo {

display: none;

}

New to CSS? Here’s a good tutorial to help get you started with the basics:

http://www.w3schools.com/css/css_intro.asp

Text Align

  • Right click the text you want to align and click Inspect Element
  • Find the text selector and type “text-align: left;” or whichever way you want it aligned.

 

  • Copy and paste that into your custom css box in Theme Options.

Media Queries

If you want css to only take effect in responsive mode you can add a media query to your css. For instance, if you want the above example to only take effect when in desktop version and not in mobile you could add css like this:

@media (min-width: 992px) {

.hometitle {

text-align: left;

}

}

If you want something to have effect only in mobile, not in desktop than you can change the “min-width” to “max-width.”

You can read more on media queries here: http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

Identify Errors

The DevTools are also an excellent way to check for errors. If something is not working properly more than likely you have an error on your site. You can use the DevTools to find our what error[s] your have.