Hi,
How can I add custom css code , are you using child themes ?
Roots is intended to be used as a starter theme, not as a parent or theme framework. In almost all instances I would recommend you just hack away and customise Roots itself.
To add custom CSS you need to edit the LESS files (assets/less/app.less being the most important) and recompile. There’s a guide to using Grunt to do this for you, but you could also use Codekit or something similar (there’s plenty of discussion if you search).
haven’t got my head around less yet. ive altered the variables file but ill be honest i’ve just been building a css file and enqueuing it, and not messing with the main css file
LESS supports CSS. Are you having issues with Grunt? You don’t need to be doing anything crazy in LESS but you should be using Grunt so that you’re only loading one CSS file for your theme.
personally i dont know how to write in LESS yet. don’t fully understand the syntax of it. - learning though. i have used grunt and variables.less to alter a few things - but i learn something new each time so hopefully i will be able to go back and fix that for the couple of roots sites I have made so far
Any valid CSS will also be valid LESS. You have the option to use nesting, variables, mixins and functions; but it doesn’t force you to use them.
This means you could copy paste an old app.css stylesheet into app.less without the need to rewrite anything.
1 Like
so, and sorry for hijacking the thread @Foxaii but if i just took my created stylesheet and pasted it all into app.less it would work fine? - including any styles i have invented too?
Yeah, put it with the other CSS in app.less and It will work as soon as you recompile main.min.css with Grunt.
having a go of that now, and its worked fine, - the only problem I have is that i have to type grunt every time i want to see a change - i thought typing grunt watch would fix that but it doesnt?
Make sure that you are saving the file; unsaved changes are not watched. Also make sure you keep the tab/window where you typed grunt watch open; by default the watch process terminates with it.
yes ive done both of those things and i do save the file - it just doesnt do anything. first time I used it, it worked and it hasn’t since. its a bit of a mystery
Is the grunt task configured to actually pick up that css (or less file) to compile?