Comments (22)
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
from sage.
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!
from sage.
I'd just like to second that request, thanks!
from sage.
+1 for child-theme support. Thanks.
from sage.
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.
from sage.
+1 for child-theme support too, Thanks
from sage.
+1 for child theme support here! Thanks.
from sage.
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.
from sage.
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.
from sage.
@davekonopka thanks for the suggestion. Works just as you said.
I'll update the wiki with details as well.
from sage.
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 :)
from sage.
@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.
from sage.
@swalkinshaw Thanks for your response! Right now my /wp-content/themes/roots-child/header.php
looks like this:
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!
from sage.
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...
from sage.
@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 yourstyle.css
to augment it
roots is meant to be "delete key friendly" just like html5 boilerplate.
from sage.
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!
from sage.
@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.
from sage.
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... :(
from sage.
Sorry I probably wasn't clear in my last comment, I meant to say that removing the 16px top margin didn't work... Thanks!
from sage.
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.
from sage.
@johnraz Yes I am and yes it worked! OMG THANK YOU SO MUCH! I was starting to tear my hair out! LOL
from sage.
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 !
from sage.
Related Issues (20)
- Method ReflectionParameter::getClass() is deprecated Bug: HOT 1
- Bug: > cache/acorn/framework/cache directory must be present and writable HOT 1
- ❤️ Feature Request: static analysis of blade templates HOT 1
- Sage is incompatible with symbolic links : Unrecognized file extension HOT 1
- Replace single line PHP statements HOT 1
- Sage 9 + Wordpress 6.3 : Notice: Error when decoding a JSON file at path... HOT 3
- Can Sage 10 integrate React and use shadcn/ui? HOT 1
- Hot reload not working (Redirecting to base URL when front page is set) HOT 1
- @import tailwind syntax is not supported and can cause issues with bud cache
- Unable to use @import on css files HOT 1
- Use modern Yarn install
- [sage 9] page-template not working on wordpress 6.4 HOT 1
- Sage 10 tailwind css is not working without small addition to tailwind.config.js HOT 5
- Sage 9 + Wordpress 6.4 and 6.4.1 create broken Gutenberg layout HOT 3
- Admin bar breaking error pages HOT 1
- Seems eslint --fix doesn't apply prettier changes HOT 1
- do_action('get_header') should occur before wp_head() HOT 13
- "editor.css" not included when Gutenberg (block) editor is in the new iframe mode
- Tailwind logical properties classes does not work as expected HOT 1
- When will there be a new version available? HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from sage.