If you’ve been using the Roots theme, you might be in for a surprise if you upgrade to the latest version (6.5.0+). The familiar base CSS files (bootstrap.css and bootstrap-responsive.css) and blank custom file (app.css) have been replaced with a single compressed file, main.min.css. The newest version of Roots is designed for developers with access to install tools like LESS and Grunt.
However, if you’re on a shared host without the ability to install these, or aren’t comfortable working with them yet, you can add your own custom stylesheet to override the default Bootstrap styles.
First, create your own css file in assets/css. We’ll call ours app.css.
Then we have to tell WordPress to load it up.
Edit lib/custom.php and add the following code:
function custom_scripts() {
wp_enqueue_style('roots_custom', get_template_directory_uri() . '/assets/css/app.css');
}
add_action('wp_enqueue_scripts', 'custom_scripts', 200);
This adds your app.css after all the other styles so they override previously declared styles.
Now edit your app.css file to your heart’s content!
5 replies on “Who moved my app.css? (Roots Theme)”
Do you know if it’s possible to turn off the responsive elements now?
Hi, very helpful for this first-time LESS/CodeKit user, so many thanks.
One issue, however, is that the entire Bootstrap CSS is included twice. If I check my page’s source code in-browser, I see…
…but app.less contains the line…
@import “bootstrap/bootstrap.less”;
…which I can’t remove or that less file won’t compile (because some variables used at the bottom for media queries are now undeclared).
So I’m looking for a solution that will allow me to work with the LESS files, and compile using CodeKit into main.min.css — any pointers?
TIA
There is already an app.less file in Roots – assets/less/app.less. Just use that and compile to main.min.css with code kit. For javascript I had to create a new file which I called _scripts.js. I then I import all bootstrap’s js files into that, followed by roots’ _main.js folder at the end. Works fine.
I should add I compile my _script.js to Roots – assets/js/script.js
Would you like to explain step by step. richard
I have try but not working to me, and i dont know what’s wrong?
thanks