Ok, so the title sounds horrendously unappealing, but I promise, it’s not that bad. Google Chrome has a feature that might occasionally come in handy, so that’s what we’re going to talk about.
Developer Tools cam be found in Chrome by going to the View menu, and then going down to Developer at the bottom of the list of menu items. That pops out a little side menu, and what we’re interested in is “Inspect Elements.”
Once you’ve done that, when you hover you mouse over something, extra info pops up. This is the detail that a website gives your browser so that it knows what to display.
Identify a font
So, what’s all this nonsense? This is from my home page, hovering over a paragraph of text. Let’s say you want to know what font I’m using because you’d like to try it on your blog. This tells you that I’m using PT Serif font.
Identify a colour
This is an Inspector screenshot of me hovering over the pale blue background that was shown in the screenshot above. Do you like that colour and want to use it? Feel free. This shows you that the background colour is hex code #F0FFFE.
Identify a block type
Let’s say you see something on someone’s site that you might want to try, but you don’t know what kind of block it is. The Inspector can tell you, although not really in the prettiest way. In this screenshot, I’m hovering over the top block. The “div” is html and not relevant for our purposes. But the next part is. Wp-block is the WordPress block type, which in this case is a media+text block, displayed as media-text. So, if you want to create something like this, you can use a media+text block.
Check out the CSS
This part gets fancier. Cascading style sheets (CSS) is something you can use on the WordPress premium plan or above, or on self-hosted blogs. In the media+text blocks in the previous screenshots, there’s blue shadowing, which a basic media+text block doesn’t do.
If you want to find out how that happens, instead of just hovering over a block, click on it. All the way along, there’s been this scary code-y mess on the right hand side of the screen; now w’er going to actually look at it. The top part is html, which we’re going to ignore. The bottom part, under the Styles tab, is what we’re interested in.
The third bit down you’ll see “.media-text-box”, and in grey to the right of that it’s marked as custom-CSS. This is the CSS code I’ve created to apply to blocks marked with the CSS class I’ve called “media-text-box.” I’ve added padding around my block, and then I’ve used the box-shadow CSS property to create the shadowing effect. If you want, you can then use these bits of code, or go look up on a site like W3Schools to see what you can do with box shadows. That’s how I discovered them in the first place; I saw it on someone’s blog, found out what it was using the Inspector, and then mucked around on my own.
For most of you, the last bit about CSS is probably completely irrelevant, but there may come a time when you might want to know what font, colour, or block type someone is using, and now you can. There’s a whole lot more that Chrome developer tools can do that are far beyond my understanding, but the inspector bit is less scary.
Do you ever get your geek on and mess around with stuff like this, or do you mostly stick to more sensible activities, like actually blogging?