The best way to work with CSS is by using a browser tool such as Firebug or Chrome Developer Tools. They’ll show you the CSS that is setting the styles for any specific element or area of a page. Then you can use that information to add or change styles in your CSS. So for example, the borders on posts – Firebug shows this CSS:
.entry-container {
margin: 0;
padding: 2.9%;
}
So you copy the selector to the child CSS and add the border:
.entry-container {
border: 2px solid black;
}
BTW, your child theme does not look typical – it should only have changes to your CSS, not the entire style.css of the parent. Your file structure looks atypical as well, so perhaps review:
http://codex.wordpress.org/Child_Themes
Superb.
Thank you, will spend some time having a play!
Have installed Firebug and can see what you mean.
Looked at the link and the child theme now makes more sense, I, as you probably guessed, simply copied the parent theme and modified it. I am a newbie, so hey, we all make mistakes 😉
Many thanks for your time and excellent reply. Most helpful.
John
WPyogi,
Just a follow up regarding your reply.
I fully understand your comment regarding the child them, I now know how to create a child theme correctly. The issue I have now is what is the best way to do this? Do I have to start from scratch or is there an easy way to extract from my modified parent CSS the changes I have made?
Starting from scratch would be a bit of a pain, but hey, it’s a learning experience!
Picking up on your other comment regarding my file structure looking atypical, would you mind expanding on this, as I am not quite sure what you mean?
Many thanks, yet again.
John
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
Get hold of the theme’s original style.css file and compare it against your modified style.css file using a relevant tool.
Then transfer all mismatches into your Child Theme style.css file.
This link shows that you have an extra directory (or entire theme?) inside the child theme folder:
http://johnpsmyth.co.uk/wordpressblog/wp-content/themes/PinBoard-Child/pinboard/style.css'
It should look like this:
http://johnpsmyth.co.uk/wordpressblog/wp-content/themes/PinBoard-Child/style.css'
There are file comparison tools – so that would be useful in dealing with CSS changes you have made.
Thank you all.
Had a good play with Firebug now, really useful, can see I will be using this a lot.
Will look at my file structure again now I know what the correct structure should be, one of those simple things that you only know when you know it!
Diff checker will be a real help too, couldn’t for the life of me think how to do it otherwise.
Many thanks, once again for all the help, advice and guidance.
John
Sure, glad to help – and now you are (or soon will be) on a much better track with that Child Theme :). Firebug is indeed a very cool thing – not just for your own site, but you can easily look at the code of any other site you might happen to like.
