How to implement LESS on to your Drupal sites with Omega theme (Responsive HTML5 Base Theme)
1) First of a will need to download and upload/install the following theme, modules and libraries. In these order:
Omega – Responsive HTML5 Base Theme
These files will need to be dropped in: ‘\sites\all\themes’
Omega tool
These files will need to be dropped in: ‘\sites\all\modules’
Chaos tool suite (ctools)
These files will need to be dropped in: ‘\sites\all\modules’
Libraries API
These files will need to be dropped in: ‘\sites\all\modules’
lessphp
These files will need to be dropped in: ‘\sites\all\libraries’
LESS CSS Preprocessor
These files will need to be dropped in: ‘\sites\all\modules’
2) Under Modules enable all of the above modules
3) Next create an Omega subtheme Click here to find out how of here
4) You should now see your new theme located here ‘\sites\all\themes\YOUR-NEW-THEME\’.
Within your new theme you should see a folder called ‘CSS’. In this folder you will create a file called ‘global.less’.
5) For your new theme to pick up your new less file, you need to go back to ‘Appearance'(admin/appearance/settings/your_new_theme) and click on ‘setting’ of your new theme. On the left hand nav click on Toggle styles. you should see all css used bout you should also see your new ‘global.less’ file. Make sure you tick this box to enable new style sheet.
6) Finally, to see your changes on the fly, you need to enable ‘LESS developer mode. To do this go to: ‘admin/config/development/less’
Comments are closed