Customize CSS/JS of the HTML Template

Once you’ve purchased an HTML template you have to customize it before it goes online. You can change different template elements in the corresponding .html files but below will be about changing styles and scripts.

The “css” and “js” folders of a template contain regular and minified files. By default, our templates use minified css styles and scripts.

Minimized and non-minimized files in the “css” folder

To customize template styles/scripts you can use 2 ways:

First(prefered)

As an example, below are the steps to change the styles/scripts of the home page.

  • Edit the css/index.css and js/index.js files according to your needs.
  • Minify the files with any service convenient for you, like websiteplanet, minifier or any others.
  • Replace template files css/index.min.css and js/index.min.js with the new generated files.
Second

As an example, below are the steps to change the styles/scripts of the home page.

  • Edit the css/index.css and js/index.js files according to your needs
  • Change the path to the stylesheet/scripts in the index.html file to use non-minified code.
Link non-minified css code
Link non-minified script

For advanced users, we recommend using Webpack and Gulp for working with project files. These are professional tools that allow you to assemble a modular JS/CSS, optimize, minify, make replacements, change syntax, validate, and many more.

Was this article helpful to you?