Customizing WordPress #2 – Using Chrome Developers Tools 11:33
LevelUpTuts
Published on Feb 27, 2014
The 2nd video in the new Customizing WordPress video series. Here we show you how user Chrome Developers Tools to find and modify your components with CSS.
To find and activate Chrome Developer Tools, go to your website and in the upper right hand corner of your browser click on the arrow. This opens a menu and go to more tools and in that submenu is Chrome Developer Tools. Click to activate.
If you need a refresher or a good introduction to CSS, see EJ Media’s YouTube channel series beginning with CSS Tutorial for Beginners – 01. If you want a good quick review of HTML see LevelUpTutorials HTML 5 Tutorials.
For more information on using Chrome Development Tools, search YouTube Using Chrome Development Tools for a list of useful videos.
0:30 CSS is used to layout the site and set the font styles, colors, etc.
0:40 The actual output is via the php via html. Almost everything interactive is javascript.
1:10 In the last video I put the above in my child theme style.css but the color didn’t change to blue–it stayed white.
1:50 So to find out what to do, we need to go to visit our site in Chrome Developer Tools.
So let’s say we want to change the size of all of our post text titles–
2:00 We want the above text to be bigger. So we’re going to right click on that. And then click on inspect [a little different from video–Tools is newer version but functionality is the same.]
2:30 – 6:10 The author goes over how to change an element by writing new code in your child style sheet. There are two ways of doing it and he goes over both.
6:10 So we’re going to make a modification here (above). So we see the div and in the style section we see the relevant style. If I click around above we find the relevant div and style.
6:20 So we want to change the color to off-white and so here’s what we do. So just like we did before, we type below. And now the background color is an off white-a shade of grey.:
6:50 And when we refresh our site div now gives us a background of grey:
7:00 But I don’t know why there are these white boxes but we can find out. So we can right-click anywhere in the white.
7:00 – The author clicks around and explains how to find what we need to change in our style sheet. He has to click all around and then
9:10 He explains why he has to set up the child style.css the way he does.
The reason we have to do it like this on lines 15 through 20 is because that is the way it is in the parent style.css that we are over-riding.
9:50 And when I refresh the color is now what we want – the lighter grey background:
So this is something you want to get used to because you’re going to be using Chrome Developer Tools every day. It helps you understand what is going on and it makes you much better at CSS and your coding languages.
10:20 And you can go to any site you want to see how people are doing things by simply right clicking and inspecting it and look at the corresponding CSS. It will teach you a lot about how other people make websites.
