Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

WordPress

Andrew Murphy
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Andrew Murphy
Front End Web Development Techdegree Graduate 30,657 Points

WordPress 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
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Andrew Murphy
Front End Web Development Techdegree Graduate 30,657 Points

ANSWER 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."

Here'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
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Andrew Murphy
Front End Web Development Techdegree Graduate 30,657 Points

Hi 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
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Andrew Murphy
Front End Web Development Techdegree Graduate 30,657 Points

Further 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.

So 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
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Andrew Murphy
Front End Web Development Techdegree Graduate 30,657 Points

That 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!

1) 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
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Andrew Murphy
Front End Web Development Techdegree Graduate 30,657 Points

wow, 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?

I 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:

http://cd1.53b.myftpupload.com/wp-content/themes/twentytwelvechild/style.css?ver=239439284092384903284

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.

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.

Yeah - the document headers for that file say it's cached. First step, move to a more friendly development environment IMHO.

I'm assuming it's a cdn based on the URL, but I could be wrong.

Andrew Murphy
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Andrew Murphy
Front End Web Development Techdegree Graduate 30,657 Points

I 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.