Joomla Templates, WordPress Themes - HotThemes

How Sparky Demo Site (Joomla Version) Is Made

Since Mart 2012 when we published Hot Blankie clean Joomla template, all following Joomla templates are developed using Sparky Framework. This is a piece of software that we are making and tweaking since then. All our experience in development of premium Joomla templates is embedded in this framework.

We are finally ready to release it as a stable version 1.0. For this purpose, we created a simple demo site based on Joomla 3 and Sparky Framework. In addition, we would like to explain how to make simple responsive site with Sparky and to make you convinced how easy development with Sparky actually is.

The following are several steps that you need to make to replicate our demo in your environment.

1. Installation

Download and install Sparky Framework as you usually install any other template.

2. Joomla work

Prepare your modules and menus. In our demo, we have sample textual modules in positions Advert1, User1, User2, User3 and Right. Menu module is published in position Topmenu. Search module is in position Top1. Make sure you have at least one menu with some menu items in your Joomla for top menu. Joomla work is done!

You can open Sparky Framework as you usually opening any other template's parameters. Go to Extensions > Template Manager and click Sparky Framework link. Sparky's admin area will opened. To save what you created, click "Save" or "Save and Close" button.

3. Making layout

In Layout Builder, set site width using slider. Then make 4 rows and drag module positions into them. Set module positions' widths by dragging their edges. Enter class names for the first two rows as they have different styling. Layout completed!

sparky layout editor

4. Style

In Style Designer, you can fine-tyne font parameters (color, size, family...).

sparky style designer

5. Differentiate some rows

Some rows need different styling, so we added class names "fullblack" and "bigadvert" in previous step. You can add any CSS in file /sparky_framework/css/template_css.css. To make the first row black enter this:

.fullblack {
  background: #1B1B16;
}

To define the second row's module container color, padding, margin, border radius and font size, add this:

.bigadvert .cell_pad {
  background: #eee;
  padding: 60px;
  margin-top: 15px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  font-size: 120%;
}

6. Logo

Under Features > Logo, you can enter textual logo or pick a logo image.

sparky features

7. Menus

In Menu Settings, you will see all menus listed. Click on the menu name, select Drop-down Menu and set fonts and colors parameters.

sparky menus

We haven't explained all features of Sparky here, but just the most important things. Now, when you know the basics, you can experiment and develop your Joomla template per your design. Check the finished Sparky demo page.