Stylesheet_Directory doesn't work with child theme

[roots]

Stylesheet_Directory doesn't work with child theme

[retlehs]

roots is not meant to be used as a parent theme/framework for child themes but instead as a starting point (like html5 boilerplate)

i'll see what we can do, might be a few days

[swartsr]

Okay, no problem! I appreciate it. I just thought it would be helpful to work it this way so as you make updates down the line, I can just drop them in. I see what you're saying though. Thanks!

[rgbk]

I'd just like to second that request, thanks!

[mcgordon]

+1 for child-theme support. Thanks.

[johnraz]

Its true that it would be easier to do custom changes while keeping the theme up to date through the use of a child theme. I think this should be put on the todo list.

[bicho44]

+1 for child-theme support too, Thanks

[mirenbz]

+1 for child theme support here! Thanks.

[swalkinshaw]

Read this for more information: https://github.com/retlehs/roots/wiki/Child-theme

Pull from master or get 3.2.1 to have these changes.

[davekonopka]

Is there a specific reason not to use get_template_directory_uri in place of get_stylesheet_directory_uri in functions.php get_roots_stylesheets() and inside header.php? That function will return the parent theme path when a child theme is loaded, and the regular theme path when the Roots theme is loaded without a child.

I did a quick test and it worked for me with Roots loaded directly and with a child theme loaded.

That would seem to prevent having to hack the header.php file to correct pathing with a child theme.

[swalkinshaw]

@davekonopka thanks for the suggestion. Works just as you said.

I'll update the wiki with details as well.

[LoveAndMoreLove]

Hi! I hope this is the right place to post this comment! My child theme worked fine with the retlehs-roots-3.2.1-0-g533c3bb install, but as soon as I upgraded to 3.2.2 the css files from the child theme were no longer loaded. For example, wp-content/themes/roots/css/style.css was loaded instead of wp-content/themes/roots-child/css/style.css.

So I reverted functions.php from 3.2.2 to the one from 3.2.1-0-g533c3bb and the css files were loaded correctly again.

I'm not familiar with codes so I hope I'm providing enough information! Thanks :)

[swalkinshaw]

@LoveAndMoreLove Check out the wiki about how child themes work now. It was changed in the latest tag (3.2.2) https://github.com/retlehs/roots/wiki/Child-theme

Basically, all the default CSS and JS files included in roots (in header.php) will always point to /wp-content/themes/roots/. In order to get your child theme working, you'll need to make changes to header.php. Mainly just adding your style.css which should be done with:

<?php echo get_stylesheet_directory_uri() ?>/style.css

There's a trade off with how we implemented child theme support. The first way we did it, the child theme's style.css would be loaded automatically, but the default CSS and JS files from roots would be broken. The new way, all the default files work, but the child theme's style.css isn't loaded automatically.

I hope that makes sense.

[LoveAndMoreLove]

@swalkinshaw Thanks for your response! Right now my /wp-content/themes/roots-child/header.php looks like this:

(Sorry, I don't know how to insert those codes into the comment correctly.)

So it ends up using both css files from /wp-content/themes/roots/css/style.css and /wp-content/themes/roots-child/style.css, instead of the child theme's css replacing the parent theme's css. Um, I hope I'm making sense?

What should I modify so that only /wp-content/themes/roots-child/style.css is used, and NOT /wp-content/themes/roots/css/style.css?

Thanks a lot!

[johnraz]

If I'm not mistaken, this is not actually possible without modifying roots directly.
I think we could turn it into an option (Load roots default stylesheet or something...)

For now, if you want to override the style into css/style, you have to directly edit the file and remove its content or change the get_roots_stylesheets() function definition into functions.php or redefine the style you don't like/need in your childtheme style.css.
The style.css from the child theme being loaded at last, its css definition override every other definitions.

Hope it helps!

ps: miss clicked the reopen button...

[swalkinshaw]

@LoveAndMoreLove Yep, you're making sense. That's exactly what happens by default. Read johnraz's reply about possible workarounds since he's correct as well.

Keep in that mind that if you're using roots, one of the reasons you should be doing so is to benefit from the default style.css. If you want to change or overwrite something, I see two options:

• Use the cascading feature of CSS and just redeclare CSS definitions in the child theme's style.css
• Directly edit the default style.css to remove/change whatever you want, then use your style.css to augment it

roots is meant to be "delete key friendly" just like html5 boilerplate.

[LoveAndMoreLove]

Thanks @johnraz and @swalkinshaw! I was a bit confused at first because child themes are supposed to override the parent's css, so that when I make changes to the child's css file, I don't have to worry about future theme upgrades.

For example, if I wanna change the colors of varies elements or where the menu is positioned, I could do so in the child css. If I change the parent css or any other files (such as functions.php or header.php) directly, I'll have to find out what has been changed every time the theme is upgraded, and put all my modifications back in again, which, kinda defeats the purpose of having a child theme.

I'm not complaining though, I'm really happy y'all made this theme and I'm having fun playing around with it :)

One quick css question that I'm pretty sure should not be asked here but I'll give it a shot anyway...

I've commented out the utility menu and logo, but there is still some spacing between the blue menu bar and the top of the page. What should I change so that there is no space at all?

I'll totally understand if you can't answer me here, in that case, could you please point me to a place where I can discuss root-specific modifications with others?

Thanks a lot!

[swalkinshaw]

@LoveAndMoreLove if you want to overwrite the default roots' style.css, just comment it out from L61 of functions.php. That way you can keep it up to date but it just won't be included in the HTML at all.

Re: header spacing, just remove the top margin on #banner (it's set to 16px right now). If you aren't using Firebug or Web Inspector, I would recommend those. You'll be able to quickly tell what element has styles applied to it.

[LoveAndMoreLove]

Thanks so much @swalkinshaw! I've always used Web Inspector but for some reason it's not working for me this time... when I uncheck #banner's styles, the spacing is still there... :(

[LoveAndMoreLove]

Sorry I probably wasn't clear in my last comment, I meant to say that removing the 16px top margin didn't work... Thanks!

[johnraz]

Are you using 960gs? Because i noticed that if you don't put an empty div with class 'clearfix' right before closing the header tag you Will get this space from the #content... I need to talk with retlehs about this because i initially put the div when I first integrated 960gs. we may need to get it back!
Envoyé par mon BlackBerry Wireless Handheld.

[LoveAndMoreLove]

@johnraz Yes I am and yes it worked! OMG THANK YOU SO MUCH! I was starting to tear my hair out! LOL

[WebMaestroFr]

Hi ! Nice work.

But... hum well, I'm a bit confused. About a child theme, the documentation is telling me to modify the "roots_get_stylesheets" function in "themes/roots/inc/roots-action.php", but none of this actually exist. Is it possible for you to update those instructions ? Or could you tell me where about I'm supposed to hack... ?

Cheers !