on 6 Jan, 2014 by mosaicpro2 comments 9 months ago
CORAL: How to change the skin
To change the skin, or create new skins, you have to use the provided LESS files.
The page's main LESS file
Identify and open the page's main LESS file, the one that imports all the styling components used on the page, e.g. for the index page, fluid layout and sidebar fusion type, you have the following file:
Now you have to compile the LESS file into a new minified CSS. For that, you have two options:
1. use the less.min.js (that is commented out in each html demo page within the package) – its basically a browser compiler for LESS – you don’t have to do anything for this to work, just have it loaded correctly, AFTER the LESS file.
2. use a compiler APP (like WinLESS on windows or LESS.App on MAC), select the modified LESS file that has all the imports (and you just modified with the colors) and regenerate a min.css file (its really just a matter of hitting a Compile button) – you can also set these Apps to recompile the CSS automatically when it detects any change in the LESS files – with this option you don’t need less.min.js anymore.
For development, we recommend the 1st option and for production the 2nd option – but really, there are many ways to automate and improve the workflow – this is just an example.
Important: you have to do this for every page you want the skin applied to, as every page used different resources and as such has it’s own import file.
Another way would be to create a custom less file to place the skin variables, for example assets/less/admin/myskin.less and then import that file in assets/less/admin/module.admin.page.index.sidebar_type.fusion.less (and every other main LESS pages) so when you want to change the variables you’ll be able to to that for all the pages from one place.