Live LESS Theme Customizer v1.5.1

Features

• Live edit the visuals of a web page in a browser with the help of Less.js (colors, padding and any other CSS style)
• Edit the Less variables and see the results immediately on the actual page.
• Generates the customized CSS file.
• Provides a way to the user to freely overwrite any style by hand (use the Edit custom LESS code button to access the editor).
• Can use any web fonts (just import them in the custom LESS code - see Step 3 in the Quick example).
• Related variables - filter the variables that affects the appropriate element (see the Advanced example.
• Can import any customized less file with comment hinting - using the same comment hinting that Bootstrap's own customizer is using.
• Can save any color in the color picker and reuse them later.
• Can load multiple variables files - the recommended way to customize bootstrap, as it is much easier to upgrade to a newer Bootstrap version with possible new variables when the customized variables are all saved to an individual file
• The preview is in an iframe so any multi-paged theme can be edited without reloading the editor (the same Less variables can be used on every page, with the actual customizations applied to every page).

Preface

Please do not use Less on a deployed site, because it depends on javascript and it can be slow. Use the customized, compiled CSS instead!

Examples

• Quick DEMO (like background-color editing)
• Advanced DEMO - Customize Bootstrap's default theme (showcases the related variables feature)

Target audience

• If you want to customize the look of your site before shipping it, then this tool can greatly fasten the customization process.
• If you are a theme developer and want to provide customization ability to your customers, then this tool is for you!

Documentation

Please see the full documentation for more detailed information.