How to edit CSS with Concrete 5.7
Permalink
Hi
Could someone tell me the best way of editing CSS in 5.7 nearly all the themes us .less which I'm not a big fan of as I try to spot the class I need using FIrebug and then update the CSS in the normal way. With .less it seems to put the .main.less into files/cache and then you can't update it.
Not sure if I'm missing something here but could someone help me understand the new workflow please? If the core file is main.less how do I edit this so it shows on the page and is there a way of using a Firebug equivalent for .less so I can see what line to update in the CSS.
Could someone tell me the best way of editing CSS in 5.7 nearly all the themes us .less which I'm not a big fan of as I try to spot the class I need using FIrebug and then update the CSS in the normal way. With .less it seems to put the .main.less into files/cache and then you can't update it.
Not sure if I'm missing something here but could someone help me understand the new workflow please? If the core file is main.less how do I edit this so it shows on the page and is there a way of using a Firebug equivalent for .less so I can see what line to update in the CSS.
I agree with WillemAnchor, once you learn more about Less, you will come to appreciate what can be done with it.
Less is a compiled preprocessor. The main.less file is compiled into main.css. The main.css file you see in the cache is not something you should edit (any changes made to it will be lost when the cache is cleared or rebuilt). If you want CSS changes to be permanent, you will want to change main.less.
To make CSS debugging easier when using Less, there is an additional resource called a source map that can be generated. It allows you to see where a style originates in a Less file. Currently concrete5 doesn't support source maps, but it is possible this feature could be added.
Here is an article about source maps:
http://robdodson.me/debug-less-with-chrome-developer-tools/...
Less is a compiled preprocessor. The main.less file is compiled into main.css. The main.css file you see in the cache is not something you should edit (any changes made to it will be lost when the cache is cleared or rebuilt). If you want CSS changes to be permanent, you will want to change main.less.
To make CSS debugging easier when using Less, there is an additional resource called a source map that can be generated. It allows you to see where a style originates in a Less file. Currently concrete5 doesn't support source maps, but it is possible this feature could be added.
Here is an article about source maps:
http://robdodson.me/debug-less-with-chrome-developer-tools/...
Thanks for your help when you say C5 doesn't support source maps does this mean that they won't be recognised? This would help find my way to find the correct CSS to update which is the key issue.
When the Less files are compiled to CSS, source maps are not created.
Update:
I posted a GitHub issue feature request for source maps this morning. Within hours core contributor mlocati had enabled Less source map creation and created a checkbox control to enable it during development.
Feature Request - Less source maps #2862
https://github.com/concrete5/concrete5/issues/2862...
Screenshot of the control to enable source map creation:
https://cloud.githubusercontent.com/assets/928116/9064322/4a438bee-3...
The feature should be available in the upcoming 5.7.5 release.
This is a great example of the hard work and time put in, not just by the core team, but also all the core contributors. These core contributors are vital to the success of concrete5. Remember that as an open source project - "many hands make light work". The more people who find time to contribute, even if it is something small, it helps make concrete5 that much better.
I posted a GitHub issue feature request for source maps this morning. Within hours core contributor mlocati had enabled Less source map creation and created a checkbox control to enable it during development.
Feature Request - Less source maps #2862
https://github.com/concrete5/concrete5/issues/2862...
Screenshot of the control to enable source map creation:
https://cloud.githubusercontent.com/assets/928116/9064322/4a438bee-3...
The feature should be available in the upcoming 5.7.5 release.
This is a great example of the hard work and time put in, not just by the core team, but also all the core contributors. These core contributors are vital to the success of concrete5. Remember that as an open source project - "many hands make light work". The more people who find time to contribute, even if it is something small, it helps make concrete5 that much better.
You can always put your theme specific css at the end of main.less
Maybe you can't see the line number, but you can still search for classnames and indexes.
Remember to turn of cache for css and less when developing, or clear your cache after a change.