2. Custom Code in Files

If you prefer to write CSS and JavaScript code in your favorite code editor and then upload files by FTP, that’s also possible in the Sparky Framework.

You can safely update the Sparky Framework even if you edited custom CSS and JavaScript files because they will not be included in any update (by default, these files are empty).

Note that if you are writing CSS and/or JavaScript code in the separate files, your server will have one or two more requests because it must load the files with custom code separately. If files reserved for the custom CSS and JavaScript code are empty, they will not be loaded.

Custom CSS File

The file where you can enter your custom CSS code is:

This file will be loaded after the rest of the CSS code that’s automatically generated by the Sparky Framework. Therefore, the CSS code that you enter in this file can override parameters.

In an example, if you set the body background color to black in the Body Background sub-tab of the Style tab, and add CSS code in the custom.css file that makes the body background white, your custom code will override the value from the parameters and your site’s body background color will be white.

Similarly, you can override all other settings or add code additional CSS properties of the HTML elements. For example, if you want to add background color and border to the headings, you can’t do that from parameters (there’re no such parameters). But you can write your custom CSS code in the custom.css file and define the heading background and border there.

Custom JavaScript File

The file where you can enter your custom JavaScript code is:

You can write your custom JavaScript code in this file. It allows you to add some behavior to your site that’s not covered in the parameters.

You can also write jQuery code in this file because this library is loaded by the Sparky Framework. You can also write jQuery UI code, but make sure you enabled it in the Scripts sub-tab of the Features tab.

The file with your custom JavaScript code will be loaded before the closing tag, so keep that in mind when you are writing your code.

Sample

Adding custom CSS rules allowed us to use make a combination of text and logo image, add only top border to the menu, style the carousel differently, etc. Adding custom JavaScript code allowed us to color the first word of the headers differently. This sample is from the Plumber template. This template is available for all premium members.