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 the 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 a simple responsive site with Sparky and to make you convinced how easy development with Sparky 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. The menu module is published in position Topmenu. The search module is in position Top1. Make sure you have at least one menu with some menu items in your Joomla for the top menu. Joomla work is done!
You can open Sparky Framework as you usually open any other template's parameters. Go to Extensions > Template Manager and click the Sparky Framework link. Sparky's admin area will be opened. To save what you created, click the "Save" or "Save and Close" button.
3. Making layout
In Layout Builder, set site width using the 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!
4. Style
In Style Designer, you can fine-tyne font parameters (color, size, family...).
5. Differentiate some rows
Some rows need different styling, so we added class names "fullblack" and "bigadvert" in the previous step. You can add any CSS in the 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 a textual logo or pick a logo image.
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.
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.