Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Andrew Murphy
Front End Web Development Techdegree Graduate 30,657 PointsWordPress Child Theme - CSS not overriding parent theme
Desperate for help! I have been following along and trying to create a WordPress blog. I have created a child theme, so I can edit the css.
The child theme is created and uploads into the themes area in the administration menu, and it activates successfully. The theme is a child of the twenty twelve theme.
When I open the style.css file (I have created), it has all the info at the beginning (importantly including the Template) and has the @import.
However, any changes I make don't seem to work. I tried something simple, such as changing the site title to blue. This didn't work. I inspected the elements and css to find the correct selectors which are .site-header h1 a
Again, after adding that css and uploading it via Filezilla, I refresh the page and no change.
I know the selectors are correct because I add that CSS into the "edit css" page in the administration menu and sure enough it changes the site title to blue.
Where am I going wrong? I have tried this on 5 themes, and none of them work! Unfortunately I'm the type of person that can't let go until I understand why.
9 Answers
Andrew Murphy
Front End Web Development Techdegree Graduate 30,657 PointsANSWER BY JESSE RICHARD:
"Although, it is a CDN which suggests that it might have some server side caching on it. That's actually likely the problem now that I think about it.
CDN's (content delivery networks) are specially design servers that turn caching on so that content delivery is far faster. The upside - static content like images, js, and css are cached and delivered at high speed to increate the overall speed of a site, and they are cached so browsers can use local resources rather than remote resources to do their work. The downside - content is cached, so when you go to update stuff your changes aren't reflected until the expiry date on the cache is reached.
Best to develop on another service that doesn't do caching. Actually, CDNs are only import for sites with huge amounts of static content in my humble opinion. I would never use one until a site was in production."
Jesse Richard
1,899 PointsHere's how I would troubleshoot it, in order:
1) Have you checked to see if the css file has actually changed on the server after you've uploaded it? It could be cached and not updating on your browser. 2) If it is changing on the server properly, are you sure the stylesheet you've changed is loading by the web page? Follow that link back to step 1. 3) Are you sure your styles aren't being overwritten by other styles in some other portion of the spreadsheet or another css. If the two above are not the problem, this is likely the problem.
I would also suggest using Chrome Developer Tools if you're not. It should help you get through the most likely culprits in a matter of minutes.
Andrew Murphy
Front End Web Development Techdegree Graduate 30,657 PointsHi Jesse, thank you for responding.
I'm very new to this, so forgive my ignorance of certain things. I upload the new style.css (with new styles on it). I checked via FTP that the file uploaded was the one with the new styling, and it is. I can't seem to find any information on the internet about clearing cache via FileZilla or GoDaddy (hosting site). I've cleared the Chrome cache and clicked on the tool at the top of the wordpress dashboard ('flush cache') and no change. I've inspected the elements (focusing on the header, which is a class .site-header. To change the color I've used this css selector .site-header h1 a and change the color value. No change again. In the dev tools, I can see the css file link next to the .site-header h1 a selector and it is not the css file from the child theme so it doesn't appear to be pulling it in. Have you any ideas what to do next?
Thank you, I appreciate the help. If I haven't explained things well, please let me know and I'll try again.
Andrew Murphy
Front End Web Development Techdegree Graduate 30,657 PointsFurther info... Looking at the main HTML page, there are a number of <link rel="stylesheets'> so before mine and some after. The one's after are for particular plug-ins like the treehouse badges plug-in. When I click that link for the style.css in the wp-content/themes/twentytwelvechild/style.css it opens up the sheet, but it is not the latest with the header style change on. So it looks like it's bringing in an older stylesheet.
Jesse Richard
1,899 PointsSo very likely you are uploading the stylesheet to the wrong directory, or the stylesheet is cached. Maybe if you can tell me the link to the stylesheet and the styles that I should see I can check to see if it's cached or not being uploaded to the correct place.
Andrew Murphy
Front End Web Development Techdegree Graduate 30,657 PointsThat would be great! Thank you.
the site is http://cd1.53b.myftpupload.com the stylesheet link in the head tag is href="http://cd1.53b.myftpupload.com/wp-content/themes/twentytwelvechild/style.css" although in the head tag it also has "?ver=3.8.1". I hope this is what you need.
In FileZilla, I'm locating where the files are saved and I'm dragging them over to the directory on the server wp-content/themes/twentytwelvechild and saying yes to override the current style.css file in there.
Do you need anything else? I really appreciate the help!
Jesse Richard
1,899 Points1) The file looks correct to me. Does it look correct to you?
http://cd1.53b.myftpupload.com/wp-content/themes/twentytwelvechild/style.css
2) So the CSS looks correct.
3) The h1 > a is rendering as blue (#0000FF). Is it rendering as blue for you?
Andrew Murphy
Front End Web Development Techdegree Graduate 30,657 PointsSorry, the only style i've added (as only testing to see if I could get it working, is .site-header h1 a {colour:blue};
Andrew Murphy
Front End Web Development Techdegree Graduate 30,657 Pointswow, it is now! Did you do anything? Although, just to check, i've just change the site description to orange (I don't have bad color taste - just checking) by selecting .site-header h2 and it is not rendering as orange when I upload and then refresh.
I'm just wondering if you cleared any kind of cache first, and if so how? Does the h2 render orange for you? I'm so sorry to be a pain, you're the closest anyone has been to solving a three day headache. Please say if I've overstayed my welcome. Do you think it is a time thing?
Jesse Richard
1,899 PointsI think you're uploading the file to the wrong directory (if I had to guess).
I don't see the changes being displayed in the file (follow the link):
http://cd1.53b.myftpupload.com/wp-content/themes/twentytwelvechild/style.css?ver=3.8.1
You should be able to clear any caching that might occur in the browser by adding a different query string to the end of the link, like this:
But nothing is updating when I do that.
That means that either the file is not being uploaded to the correct directory (most likely) or there is some sort of strange caching mechanism on the server (less likely).
Be positively sure you're uploading to the correct directory.
Jesse Richard
1,899 PointsAlthough, it is a CDN which suggests that it might have some server side caching on it. That's actually likely the problem now that I think about it.
CDN's (content delivery networks) are specially design servers that turn caching on so that content delivery is far faster. The upside - static content like images, js, and css are cached and delivered at high speed to increate the overall speed of a site, and they are cached so browsers can use local resources rather than remote resources to do their work. The downside - content is cached, so when you go to update stuff your changes aren't reflected until the expiry date on the cache is reached.
Best to develop on another service that doesn't do caching. Actually, CDNs are only import for sites with huge amounts of static content in my humble opinion. I would never use one until a site was in production.
Jesse Richard
1,899 PointsYeah - the document headers for that file say it's cached. First step, move to a more friendly development environment IMHO.
Jesse Richard
1,899 PointsI'm assuming it's a cdn based on the URL, but I could be wrong.
Andrew Murphy
Front End Web Development Techdegree Graduate 30,657 PointsI have to be uploading to the right directory (if you mean via ftp as i'm going to the folder in wp-content/themes/tewntytwelvechild and then uploading the new style.css there.
I've looked online and I believe go daddy is CDN, as you say. I will look at another alternative, perhaps I should have followed what Zac did and went with the hosting account he recommended.
Thank you so much for your help, I'm sorry if it's cost you so much time. It certainly is appreciated (and it's nice to know I'm not crazy and I am doing things correctly).
Thank you again.