Custom Code in Panes - Custom CSS/JavaScript - Sparky Docs - HotThemes

Search Form and Social Buttons

HotThemes Logo and Top Menu

If you know how to code CSS and/or JavaScript, you can write your custom code here. The panes where you enter your code are simplified code editors with line numbers. CSS and JavaScript code that you are entering in these panes will be colored, similarly to the popular code editors.

CSS

There are two panes for the custom CSS code.

The code from the CSS pane is added to the end of all other CSS code that Sparky Framework generates automatically, according to the values in many parameters. So, the CSS code entered here will override automatically generated CSS code.

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

Similarly, you can override all other settings or code additional CSS properties of the HTML elements. In example, if want to add background color or border to the headings, you can’t do that from there parameters (there’re no such parameters). However, you can write your custom CSS code here.

Pane for Custom CSS Code

The code from the “CSS (RTL)” pane is applied only when the “Right-to-left” option is selected for “Text Direction” parameter in the Layout tab. So, this CSS code is only for the right-to-left (RTL) languages.

JavaScript

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

Do not enter opening and closing <script> tag in this tab. Enter your JavaScript code only.

You can also write jQuery code here 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.

Pane for Custom JavaScript Code

The code you enter here will be added to the end of the automatically generated JavaScript file. This file is loading before the closing tag, so keep that in mind when you write your code.

Sample

Custom CSS 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.

Links, Partners and Social Media