WordPress Child Themes and The Chrome DevTools Console

One of the most common questions I get – often – from clients after I’ve helped setup a child theme is something like “Can you do something with something on this page? And can you tell me how that is hidden?”

Most of the time it ends up being a) not being able to use the Chrome Dev Tools Console and, in particular, the right click and inspect tool.

Recently I had a question about removing borders on a table and the rows in the table. The solution was right clicking, inspecting and finding why they were there.

 

Google Right Click and Inspect Console
Google Right Click and Inspect Console
Google Right Click and Inspect Console
Google Right Click and Inspect Console

 

You can see that the default CSS for tables and rows adds a border so it can be canceled in the child theme style.css with

#content tr td {
    border-top: none;
}
#content table {
    border: none;
}
Then when I want to add them elsewhere, I can create a class in the child style.css to add them specifically to any table. Strange as it may seem may messed up themes use defaults like this that are simply undesirable! And that is why child themes are so important!.

No More Borders to Cross with CSS  ?no more borders css wordpress