Style Variants - Style - Sparky Docs - HotThemes

Search Form and Social Buttons

HotThemes Logo and Top Menu

To be able to use this efficiently, you will need some knowledge about CSS.

Style Variants

The Select Style sub tab of Style tab has just one parameter. It’s a drop-down menu that allows you to select one of five offered template styles. This option is useful if you want to showcase the site in multiple color schemes.

If Style 1 is selected, your site will load just the main color scheme. All color options of the main scheme are in the Sparky’s template settings. Basically, if Style 1 option is selected, your site will take only the values you defined in the Sparky’s template parameters. Nothing interesting happens now.

But, if you select, in example, Style 2 option, beside everything else, one additional CSS file will be loaded. This file allows you to override default values set in the Sparky’s template parameters. This CSS file is located in


The remaining CSS files for other style variants are in the same folder. You can edit this file in your text editor and add some CSS properties inside.

Let’s show it in a simple example. Imagine you want to present a site developed with Sparky Framework to your client, but you are not sure which of two options for the background color and the heading font your client will like more. In the Sparky’s template parameters you set the first variant. Then you edit CSS file style2.css and add CSS code that changes background color of the body. You also add code that changes the heading font. This will be the second variant.

Now, you have two style variants ready for presentation. You can easily switch to Style 2 option, save template settings and refresh the front-end of your site. Your site will now load the additional CSS file style2.css and show different body background color and heading font.

You can switch the style option “on-the-fly”, without saving the Sparky’s template parameters. In the front-end of your site, you can add a style parameter directly in link. In example, if address of your site is, to activate the Style 2, use this link:

Your site will use the Style 2 option now. This option will be also saved in a cookie. Even if you refresh browser or navigate to the other page, it will use the same style variant. To get back to the first (default) variant, either clear cookies or activate the Style 1, using this link:

Links, Partners and Social Media