You’ll need to start learning CSS and how to use a browser tool like Firebug – it will show you the CSS for an element on your site – then you COPY just that piece of CSS to the child theme and make the change there.
Good resources:
http://getfirebug.com
http://www.w3schools.com/css/
https://developer.mozilla.org/en-US/learn/css
For specific CSS help with your site, you need to post a link to it.
Yes, I’ve started reading on CSS. The problem I’ve found so far is that quite a few assumptions are made about a readers base knowledge. I’ll soldier on.
RE; Firebug, do I have to download Firefox first then Firebug or is Firebug a stand alone?
Cheers,
Craig
Yes, Firebug is an addon for Firefox. But Chrome developer tools do basically the same thing so if you use Chrome, that’s a good option as well.
Yeah, it’s a bit of new stuff, but CSS isn’t too bad (compared to PHP, for example) once you get the hang of it. And feel free to post a link to your site if you want some specific help or examples :).
Yes I use Chrome. Really sorry, but how does that help me with changing my child theme?
As for my site link, I’ve got it hidden at the moment and am working on it at dev.mysitename.com
Using “Inspect Element” you can see what CSS is being applied to an element on the page. You then copy that CSS to the child theme style.css file – and change the code there.
I have no way to know if your child theme is set up correctly or working correctly without seeing it. (I also have not used a plugin for creating one so not sure how that works – might be fine, just no experience there.) Have you activated the child theme? Once it’s active, is there a style.css file visible under Appearance > Editor?
Assuming so, I looked at Pachyderm on a test site – this is the CSS for the site title (via Inspect Element)
.site-title {
clear: both;
color: #49352F;
font-family: "Berkshire Swash","Times New Roman",serif;
font-size: 4.8rem;
line-height: normal;
margin: 0;
}
So you can copy all or part of that to the child theme style.css file and change it there. IT will then override the CSS code in the parent theme.
Excellent. That’s a great start. Thanks!
So how do I access Chrome’s Inspect Element? Is it a download?
Cheers, amte. I’l get to it.
Thanks.
Craig 🙂
Just curious if there is a resource that will walk me through CSS/Child Themes in a logical way from the VERY first step so I can begin to mater what seems to be a voluminous subject?
I ask that because I accessed the Web developer tools and looked, but couldn’t find the Pachyderm site title code that you supplied. That suggests to me that I’ve got knowledge gaps that need to be filled.
Cheers, Craig
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
I just had a look at your instructions, Andrew, and on the face of it they look like EXACTLY the thing I need; step by step.
I’ll let you know how I go! 🙂
Cheers mate.
Craig
Hi Andrew,
I followed your instructions (many thanks BTW) and was able to make at least some of the changes I wanted to make. The part of you instructions that I’m not clear on is,
“… You’d then transfer this CSS into your Child Theme stylesheet…”
At the risk of exposing my lack of knowledge, where is the style sheet and how do I access so I can past the changes?
Cheers,
Craig
