Tutorial: How to Use Your Browser's Inspect Tool

[Doug]

Thanks, Victor (sorry for the delay. got hit with the flu.)

That was very helpful and I fixed it. I was going to the code section

.genesis-nav-menu,
.site-description,
.site-header .title-area,
.site-header .widget-area,
.site-title {
text-align: center;

... instead of ...

.site-description {

So got that figured out.

Two questions.
1. I've been through the Genesis manual, but haven't seen any references to what CSS points to what section of the page. Do you know a good reference for that? The W3 schools on CSS? In the above example, I didn't understand the difference between ".site-description {" and ".genesis-nav-menu,.site-description,".

2. When you reference the code lines, where can I see that? I'm looking in the wordpress editor and in Inspector, but not seeing them either place. I've been looking for an option to turn on, or a box to check to display the code lines, but haven't found anything.

Thank you for your help
doug

[Victor Font]

Doug,

1. The best thing to do is learn how to use your browser's inspect tool and learn CSS through https://www.w3schools.com/css/. The link to the inspection tool tutorial is the first post in this thread.

The difference between ".site-description {" and ".genesis-nav-menu,.site-description," is that any CSS in the first item applies only to that item. The second has two elements ".genesis-nav-menu AND .site-description". The comma separating the two elements should be read as an "AND". The CSS applies to both.

2. Line numbers are shown in the browser inspect tool, as well as the file in which the code may be found. You won't see line numbers in any of the WordPress editors. You should be editing your files in a code editor on your local machine. The file is uploaded and downloaded through FTP.

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[Doug]

Thanks, Victor.

The W3 schools are great, so appreciate you commenting on that.

Regarding the line numbers, I'm not seeing them in Inspector in either the HTML or CSS windows. Here's a screen grab.
https://drive.google.com/file/d/0B4FBN-hZ6_4ud0hpLWtIRUZOcDA/view?usp=sharing

Is there a place I need to make those visible in the Inspector?

doug

[Victor Font]

The line numbers are in the CSS side. For example, .entry is on line 1260 of style.css.

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[Doug]

Victor

Per my screen grab, the CSS side is the right-most box with the Styles menu highlighted at top, correct?

If so, can you elaborate on where you're seeing the line numbers? You're seeing them on my screen grab?

thanks
doug

[Victor Font]

Doug,

Yes, the line numbers are on your screen grab.

style.css?ver=2_0&nocache=1:1260

You have the filename, query string, and line number. The 1260 is the line number.

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[Doug]

I see what you're referencing. Thanks, Victor!

[bmcminn]

Can someone help me use inspector to locate this file in the file tree?

Thanks!

Here's the site...

http://wipsite.jsbmac.com

---

Learning front-end development, aspire to learn more.

[Victor Font]

@bmcminn, the highlighted code is not a file. It is custom CSS possibly added by a customizer or helper plugin.

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[BlogAuto]

Thx It is brilliant, that simplifies all my approach of bugs, I did not know

[Beverley Allman]

Thanks for the nice post!
Hope that the link to the tutorial video will be helpful.
EssayServiceWriter

[maria-rodriguez]

Gran aporte, gracias.

[brisbanepd1]

Thanks for sharing this Victor! It's a big help. Cheers!

[rianjebret]

Thk you.

---

http://www.apponsel.com

[Avaneeshkumar]

Thank you for sharing

[vitarock]

Pressing f12 on keyboard will give access to web inspect tool, its an easy way to understand and make dynamic design changes i use this technique to our website vitarock.com to fix design issues

[facemask88]

Thanks for sharing

---

มาร์คหน้าขาว หน้าใสปิ๊ง สู?•รมาร์คหน้า

[MissKitty]

That's great, Victor!

[Author]

Posts