User Tools

Site Tools


how_to_change_the_look_of_your_store

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revision Previous revision
Next revision
Previous revision
how_to_change_the_look_of_your_store [2020/05/20 21:47]
admin [How do I Compile LESS?]
how_to_change_the_look_of_your_store [2020/08/08 07:15] (current)
A User Not Logged in old revision restored (2018/03/13 15:54)
Line 21: Line 21:
 ===== How do I Compile LESS? ===== ===== How do I Compile LESS? =====
  
-Our [[https://www.github.com/litecart/litecart|Github repository]] have a preconfigured LESS compiler based on Grunt for Node.js (See Gruntfile.js). If you don't work with development tools like Node.js and Grunt you can install the standalone web based LESS compiler provided in our [[https://www.litecart.net/addons/163/developer-kit|Developer Kit]]. You are not recommend to use the web based LESS compiler in a production environment due to performance drain.+Our Github repository have a preconfigured LESS compiler based on Grunt for Node.js. If you don't work with industry standard development tools like Node.js and Grunt you can install the standalone web based LESS compiler provided in our [[https://www.litecart.net/addons/163/developer-kit|Developer Kit]]. You are not recommend to use LESS compiler in a production environment due to performance.
  
 ===== Can I Skip LESS and Just Use CSS Like Old Days? ===== ===== Can I Skip LESS and Just Use CSS Like Old Days? =====
  
-Yes you can. If you don't intend to use a LESS compiler you can delete those .less and .css.map files. For your convenience you can uncompress/beautify the CSS content, making it human readable to the eye again, using an online tools e.g. [[https://codebeautify.org/css-beautify-minify|CSS-Beautify-Minify]]. Beautifying will cause a slight performance decrease.+Yes you can. If you don't intend to use a LESS compiler you can delete those .less and .css.map files. For your convenience you can uncompress/beautify the CSS content, making it human readable to the eye again, using an online tools e.g. [[https://codebeautify.org/css-beautify-minify|CSS-Beautify-Minify]]. This will have slight performance decreasement.
  
-===== How Do I Know Which CSS/LESS File To Edit? =====+===== How Do I Know Which File To Edit? =====
  
-Right click an element and select **Inspect Element**. The built-in developer tools in your browser will show you the current stylings of an element and in which .less file and line number it can be found. This is translated by the browser using the .map files found in the css/ folder. The map files are simply cross references and are important to be updated when generating new .css files. The web based Developer Kit add-on does that for you as well.+Right click an element and select **Inspect Element**. The built-in developer tools if your browser will show you the current stylings of an element and in which .less file and row number it can be found. This is translated by the browser using the .map files found in the css/ folder. The map files are simply cross references and are important to be updated when generating new .css files. The Developer Kit add-on does that for you as well.
how_to_change_the_look_of_your_store.1590004028.txt.gz ยท Last modified: 2020/05/20 21:47 by admin