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

WordPress Build a Website with WordPress Customizing WordPress Themes Customizing WordPress Theme Files

Karina Gaulin
Karina Gaulin
790 Points

Making style changes messes entire site up.

Hi, can someone please take a look at my site and help me figure out why changing the color of the footer messes the whole thing up? I tried getting rid of the change that I made but it's still messed up. Thanks!

karinafarina.com

In the console error message saying it cant find the style.css try setting the correct path

Karina Gaulin
Karina Gaulin
790 Points

thank you izzy goldman. But how? And why did it link before I made changes? I tried adding <link rel=stylesheet href="twentyfifteen-child/style.css"> to the html page but it didn't help.

5 Answers

Tim Knight
Tim Knight
28,888 Points

I know I'm jumping into this conversation a little late so perhaps there has been a few decisions made that aren't within these notes but I did happen to notice something within your CSS request.

If you happen to look at the HTML that requests the theme's CSS file, you'll see this:

<link rel='stylesheet' id='twentyfifteen-style-css' href='http://karinafarina.com/wp-content/themes/twentyfifteen-child/twentyfifteen-child/style.css' type='text/css' media='all' />

Opening up that file you'll see

@import "../twentyfifteen/style.css";

Okay so... take a look at that link closely... notice anything interesting? You're referencing a folder called twentyfifteen-child within the folder twentyfifteen-child Like your theme folder is within your theme folder. But then in you're CSS you're calling for ../twentyfifteen/style.css (which only goes up one level) which would try to get http://karinafarina.com/wp-content/themes/twentyfifteen-child/twentyfifteen/style.css — which isn't a valid location (so it returns the HTML 404 error page).

Now http://karinafarina.com/wp-content/themes/twentyfifteen/style.css is a valid location so you might consider adding another ../ to your import statement (@import "../../twentyfifteen/style.css";) or seeing if you can put that twentyfifteen-child folder right into the themes folder and not a theme folder in a theme folder (if that makes sense).

Karina Gaulin
Karina Gaulin
790 Points

Thank you Tim! I got rid of the extra child folder and made sure the files are in the correct folder. But when I inspect the site, it does not reflect that the extra child folder is gone. I tried refreshing, logging out and clearing the cookies and data but it is still the same. Can you help me figure out what I am doing wrong?

Tim Knight
Tim Knight
28,888 Points

Okay excellent. Now check your functions.php to check the path of how you're loading that CSS file into the head. You also might need to reselect the theme within the WP admin theme selector since the folder structure changed.

Karina Gaulin
Karina Gaulin
790 Points

And shouldn't I need the html file from the parent theme copied and pasted into the child theme?

Karina Gaulin
Karina Gaulin
790 Points

Does this have anything to do with the fact that I am using twenty thirteen stylesheet for twenty fifteen child?

Jennifer Nordell
seal-mask
STAFF
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

Hi there, Karina! You've stated that you linked the 'style.css' from the twenty-fifteen folder. When I look at that CSS file, this is what I see:

/*
Theme Name: Twenty Thirteen Child
Theme URI: http://http://wordpresstreehouse.com//
Description: Child theme for the Twenty Thirteen theme
Author: Zac Gordon
Author URI: http://wp.zacgordon.com/
Template: twentythirteen
Version: 1.0
*/

@import "../twentythirteen/style.css";

This is trying to import for you the style.css file from the twentythirteen folder, but either the file doesn't exist, or doesn't exist at that location. That is why there's a failure to load resource there.

Try clearing up this error and then we'll see if we can't help with the footer! :sparkles:

Karina Gaulin
Karina Gaulin
790 Points

Thank you so much for responding. I understand what you are saying and tried to make the changes but it still won't work. When I look at the console, I can see that it is not linking to style.css which for some reason is empty, but to style.css?ver=4.7.5. Which does not reflect the changes that I made. Can you help?

Karina Gaulin
Karina Gaulin
790 Points

And I am making my changes in my localwp.com/wp-content/themes/twentyfifteen-child folder, does that seem right? Or should it be right to the unzipped downloaded wp folder?

Jennifer Nordell
seal-mask
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

Hi Karina! I took a look at the site again, and this time I get a different error stating that the reason the CSS is not being loaded is because the file is of the incorrect MIME type. I found this post where they suggest specifically adding the MIME type to the server configuration. You might give that a try. It seems like you're coding in CSS, but what the server is returning is plain text/HTML which means nothing is getting styled. Let me know if this helps! (or not) :sparkles:

Karina Gaulin
Karina Gaulin
790 Points

Thank you so much Tim Knight!!! reselecting the correct theme worked!!!