WordPress Themes - HotThemes

Search Form and Social Buttons

HotThemes Logo and Top Menu

This is the unique feature that only Sparky Framework has! The Export tab has only one parameter. But, you'll love it because it allows you to export your work into the new installable Joomla template based on Sparky, with all parameters and options kept.

Sparky will do automatically all that dirty work that you need to do yourself if you want to change template name. Sparky's Export feature automatically updates all template files to match new template name that you selected. It will even change language tags. Your new template exported from Sparky can be installed as any other template Joomla template. So, once you create one template with Sparky, you can easily install it on several Joomlas with the same or different names.

You're only one click away from the new template for your website or your client's website.

Video Demonstration

This video demonstrates how to export your work that you created within Sparky into a new template package. It also shows how new template works seamlessly in another Joomla.

 

 

 

Read other tutorials for Sparky Framework for Joomla

  1. Installation of Sparky Framework generic template
  2. How Layout Builder makes the skeleton of your website
  3. Set text styles and use Google Web Fonts
  4. Configuration of top menu with drop-downs and classic menu
  5. Adding some cool features to the website
  6. Check how Sparky works on mobile devices
  7. Exporting template

ResponsiveAs the percent of people who access the Internet using the mobile devices grows, we are making our websites "mobile friendly" more and more. Sparky is responsive, but this feature can also be disabled if you want all users to see the identical version of your website. Sparky can also convert your top menu with drop-down submenu into a selectbox, if it can't fit the screen size. Users who access your site using a mobile device will interact with selectbox much easier than with classic drop-down menu. This feature can be enabled and disabled.

Video Demonstration

The following video demonstrate how our sample site that we created behave on different screen sizes. This video also shows you where to enable and disable the responsive features of Sparky.

 

 

 

Read other tutorials for Sparky Framework for Joomla

  1. Installation of Sparky Framework generic template
  2. How Layout Builder makes the skeleton of your website
  3. Set text styles and use Google Web Fonts
  4. Configuration of top menu with drop-downs and classic menu
  5. Adding some cool features to the website
  6. Check how Sparky works on mobile devices
  7. Exporting template

Cool FeaturesThis is a collection of "toys" for your site that you might (or might not) find useful. In some occasions, they can save a lot of time.

Logo and Slogan

Type your textual logo and slogan and control font's appearance or select a logo image. Logo image should be uploaded into the "images" folder of Sparky template. Click on the logo leads to the home page. Don't forget to drop the Logo element into any row using Layout Builder.

Top Panel

Top panel converts the first row from Layout Builder into a button. Click on that button will show the content of the first row. You can edit text Open/Close that will be shown on the button. Also, you have full control of appearance of the top panel.

Font Resize

Font resize feature allows users to change font size on website in real time. To enable this feature, drag "fontresize" box into any row in Layout Builder. The font resizer is "intelligent" and it will remember the user's selection for later visits (in cookie). Click on the reset link, resets the font size adjustments.

Google Analytics

Google Analytics can be activated just by entering your account's ID. This is the ID that you would get from Google Analytics's website. It's usually in form of UA-123456-1. If you're using Sparky, all you need to do to integrate Analytics in your site is to enter the ID.

Google Web Fonts

Google Web Fonts tab is where you paste code snippets if you'd like to use specific non-standard fonts provided by Google. After you paste the @import code here, you can use that font anywhere in Sparky where you should pick a font-family. For more details how to use this feature, please check Style Designer tutorial.

Scroll To Top Button

Scroll To Top button appears when user is in the lower part of your website. It's shown in a form of a clickable button (you can select the button image) and it can be positioned in any corner of your site. Click on that button scrolls your site to the top smoothly.

Equal Heights

The Equal Heights feature equalize heights of all modules within the selected rows using JavaScript. When you have several modules in a row and they contain different amount of content, in some occasions you may want to equalize their heights. In example, if you have added borders or background on the module's container, you may wish to equalize their heights in order to make your site cleaner.

Video Tutorial

The following video explains all additional cool features of Sparky Framework and what impact they have on your site. This video also shows what you have to do to enable or disable some of these features.

 

 

 

Read other tutorials for Sparky Framework for Joomla

  1. Installation of Sparky Framework generic template
  2. How Layout Builder makes the skeleton of your website
  3. Set text styles and use Google Web Fonts
  4. Configuration of top menu with drop-downs and classic menu
  5. Adding some cool features to the website
  6. Check how Sparky works on mobile devices
  7. Exporting template

Sparky "knows" what menus you created within Joomla Menu Manager. For each of them, you can assign various menu systems and then control the menu system's parameters for this menu.

Menu SettingsMenus are collections of links used as navigation throughout your website. Sparky helps you to make your navigation better. It lists all of the menus available in your Joomla. For each menu, you can select whether to control its appearance through Sparky or not.

It's possible to select several menu types, such as drop-down menu, classic menu (aligned vertically or horizontally), accordion menu and horizontal menu. Each of those menu types has its own settings, so you can control everything under the Menus tab of Sparky Framework.

You can also control your menus yourself by writing custom CSS code, and in this case simply select None for any menu type which will tell Sparky not to handle layout of that menu. This option is selected by default after initial installation of Sparky.

Another interesting option regarding menus is under the Responsive tab. If you have drop-down menu in your site, Sparky can convert it into the selectbox which is appropriate layout for users who access your site with mobile devices.

Video Tutorial

The following video tutorial explains how to control menus within Sparky. It's assumed that you have a Joomla menu (with submenu items) and a module assigned to this menu. The module position of this menu module is available in the site skeleton (Layout Builder).

 

 

 

Read other tutorials for Sparky Framework for Joomla

  1. Installation of Sparky Framework generic template
  2. How Layout Builder makes the skeleton of your website
  3. Set text styles and use Google Web Fonts
  4. Configuration of top menu with drop-downs and classic menu
  5. Adding some cool features to the website
  6. Check how Sparky works on mobile devices
  7. Exporting template

Background

Background color or image of your website is something that you'd probably need to define. Sparky allows you to pick solid background color as well as background image. If you are about to use an image, several parameters such as repeating and centering can be controlled through the Style Designer. Watch the video tutorial to see how to add a color or image background through Sparky.

Text Styles

CSS has hundreds of commands, so don't expect you can control everything within Sparky, without altering CSS stylesheets manually. However, if you need to make the most common settings (such as color, font-size...) in the most common tags (such as H1, H2, H3, H4, p...), you can do it entirely through Sparky's Style Designer. Watch the video tutorial to see how to change some text and how to use some non-standard fonts from Google's Web Fonts collection.

Since Sparky Framework v2.2.0, you can browse, preview and select Google Fonts with one click.

System and Google Fonts Direct Selection With Preview

Style Designer Features And Additional Google Fonts

 

 

Read other tutorials for Sparky Framework for Joomla

  1. Installation of Sparky Framework generic template
  2. How Layout Builder makes the skeleton of your website
  3. Set text styles and use Google Web Fonts
  4. Configuration of top menu with drop-downs and classic menu
  5. Adding some cool features to the website
  6. Check how Sparky works on mobile devices
  7. Exporting template

Set Template Width

Use the slider to set overall template width. It's possible to select only numbers divisible with 12. Sparky uses 12-grid flexible system, so width must be divisible with 12, because we can't divide pixels.

By default, Sparky uses fixed width, but you can also enable fluid width. If you are using the fluid width, fixed width parameter is ignored and your site always uses the entire available screen space. If fluid width is set to ON, Sparky will still use 12-grid system, but in this case grid widths are represented in percents, not in pixels as in fixed width case.

Make Site's Skeleton

Entire layout that you create will be wrapped inside DIV with class .sparky_home on home page or with class .sparky_inner on all inner pages. This allows you to make different styling for home page and inner pages easier, if you need to.

Layout BuilderAll module positions are shown as module blocks (small rectangles). What module positions will be shown here, it's defined in file templateDetails.xml. You can alter Sparky's default module positions by editing this file. Layout has rows and each row can hold one or more columns. Number of columns in layout can be from 1 to 24 and it can be set by moving the grid system slider left or right.

To make a skeleton of your new site, do the following:

  1. To start, click "ADD ROW" button to make some rows.
  2. Drag a module block into the row and adjust its width (click on its right edge and move left).
  3. Drag the second module block into the remaining space and so on...
  4. If you need to move a module block left/right, click on the arrows in the blocks lower left corner.
  5. If you need to remove a module block from the row, drag it back to the un-assigned modules block.

Each row that you create will be a DIV element with full screen width with class .sparky_full. To add ID or class or of the row, enter it in the left side of the row.

Inside DIV.sparky_full, there's DIV.sparky_main which has the width of the template.

Inside DIV.sparky_main, there're DIVs with module positions. Each of those DIVs has class .cell and class .mp_positionname. So, you can style each module position by using this unique class. Inside DIV.cell.mp_positionname, there's DIV.cell_pad which allows you to add desired padding for each module position.

Set Paddings and Margins

The last four options represent the global settings for paddings and margins. This can be overridden for certain rows if you add class to those rows and then set different paddings and margins in layout.css file.

Special Classes (from Sparky 2.0)

In Sparky 2.0, we added some special classes that fulfil some features that we often need. Now, you can enter more than one class for each row. Just separate them with blank space. Here's the list of the special classes:

  • one - Add this class to the rows where you do not want elements to collapse on smaller screens. All elements will be in one row, even on the smallest screens. It's usually needed for the row with top menu.
  • two - Add this class to the rows where you want elements to collapse, but instead of using 100% of screen space, they will use only 50%. So, you will have two elements in each row. If you have thin elements in some rows, this might be useful for better organization on smaller screens.
  • full - If you add this class to any row, this row will use 100% of the screen space (it will ignore overall site width). Elements' widths will be calculated per overall screen width, not per site width.
  • floating - This is useful if you like a row to appear from the top of the screen when user scrolls down. This is often used for the row where top menu is located and it's especially useful for long pages.

Video Tutorials

The first video explains how to create a simple website layout using Sparky's Layout Builder. We will make the header area with logo, the content area with and without left and right column, the bottom area with 3 modules in a row and the footer section with some copyright text. This video also explains how easy the site width can be changed and how easy the parts of the layout can be added or removed. Furthermore, it explains how to style some rows differently than the others.

 

 

 

Sparky allows us to style module positions differently and make them stand out. In the next video, we will show how easy it is to add background color and some other properties to the block that contains main Joomla content. Also, we will add border to the footer module position and align the top module position to the right.

 

 

 

Read other tutorials for Sparky Framework for Joomla

  1. Installation of Sparky Framework generic template
  2. How Layout Builder makes the skeleton of your website
  3. Set text styles and use Google Web Fonts
  4. Configuration of top menu with drop-downs and classic menu
  5. Adding some cool features to the website
  6. Check how Sparky works on mobile devices
  7. Exporting template

The installation process of the generic Sparky Framework template is straightforward. It's identical to the installation process of any standard Joomla template. All code of Sparky Framework is integrated into the template files. There's no need to install any additional plugins or components. Sparky will not alter your standard Joomla environment at all. Sparky will not load your Joomla with any additional pieces of software that may slow down the website.

To install Sparky on Joomla, please do the following:

  1. Download Sparky to your computer.
  2. Open your Joomla Administration and go to Extensions → Extension Manager.
  3. Under "Upload Package File" click "Choose File" button and select file sparky.zip that you downloaded from our site. Click the "Upload & Install" button.
  4. You will get confirmation about successful template installation. You are done!

To access the Sparky's Control Panel, please do the following:

  1. Open your Joomla Administration and go to Extensions → Template Manager.
  2. You see the list of all templates installed in your Joomla. Click "sparky - Default" link and Sparky's Control Panel will open.

The following video (available in HD) will help you to install Sparky.

 

 

 

Read other tutorials for Sparky Framework for Joomla

  1. Installation of Sparky Framework generic template
  2. How Layout Builder makes the skeleton of your website
  3. Set text styles and use Google Web Fonts
  4. Configuration of top menu with drop-downs and classic menu
  5. Adding some cool features to the website
  6. Check how Sparky works on mobile devices
  7. Exporting template

SPARKY is Joomla template framework created by HotThemes for making websites without programming skills through the easy-to-use drag'n'drop interface.

This is the only framework in the market which will not make you feel framed!

Sparky will help you to work faster, but it won't take your FREEDOM to create any site you like!

Download Sparky for Joomla!
and read documentation.
Check demos of the templates based on Sparky Framework.

building your site
flexible
styling
responsive
menus
features
optimized
export

 

Layout Builder

Use drag'n'drop technology to make your new layout in less than a minute!

Layout BuilderSparky's Layout Builder is where you create layout for your new website in few simple steps.

  1. Click "Add Row" button to make some rows.
  2. All module positions, menus and special elements are represented as cells. Drag and drop some of them into the rows.
  3. To resize the cells horizontally, drag their edges left and right. To move them within the row, use left and right arrow buttons.
  4. Remove cells from the rows by dragging them back to the container.
  5. Change order of the rows by dragging the entire row up or down.
  6. Add specific name and/or class to any row to select it and style it through CSS.
  7. Delete rows by clicking the X buttons.

In the background, Sparky creates layout fully automatically according to the settings from the Layout Builder.

back to top

Flexible System

No predefined layout! Your site can have strict or unusual layout. You can set custom fixed width or use fluid width! You can set gutter value. Absolutely no restrictions!

Width SettingsSparky is different from other frameworks because it doesn't limit you in any way. It's based on 12 columns grid, but you can select width of your website according to your needs. You can also select gutter size (margins between cells) as well as padding of the cells. This grid can also be flexible, if you are working on a website that has a fluid width (100% width).

Sparky also doesn't have a predefined layout like many other frameworks. Using the Layout Builder, you can create your own layout according to your design in less than a minute. This brings you freedom, but doesn't make things too complicated. If you use Sparky, your website won't look similar as all other Sparky users' websites. Sparky can follow your design guidelines in full.

back to top

Style Designer

Control of the most important graphic and text elements is integrated in Sparky.

Layout Builder

CSS has hundreds of commands, so don't expect that you can control everything without writing the CSS stylesheets manually. However, if you need to edit the most common properties (such as color, font-size...) of the most common tags (such as H1, H2, H3, H4, p...), you can do it entirely through the Sparky's Style Designer.

Website's background is something that you'd probably need to define. Sparky allows you to pick a solid background color as well as background image. If you are about to use an image, several parameters such as repeating and centering can be controlled through the Style Designer.

System fonts and Google fonts can be selected with one click. You will see a preview text for the selected font family, weight and style. Browse 700+ free fonts and include them in your site easily!

back to top

Responsive And Mobile First

Sparky can create responsive websites. But you can also disable this feature.

ResponsiveAs the percent of the mobile Internet users grows, you should consider making your website mobile friendly. Sparky is responsive, but this feature can also be disabled, if you want all users to see the identical version of your website. The layout script loads mobile layout first. It enhance performances on mobile devices.

The menu can be converted into the select list button if user screen width is less than parameter given here.

back to top

Menu Control

Sparky "knows" what menus your site has. You can drag and drop them into the layout. For each of them, you can assign various menu systems and then control the menu system's parameters for this menu.

Menu SettingsMenus are collections of links used as a navigation throughout the website. Sparky helps you to make your navigation. It lists all the menus available in Joomla allowing you to drag and drop them into the layout. For each menu, you can select whether to control its appearance through Sparky or not.

It's possible to select several menu types, such as drop-down, classic, accordion and horizontal menu. Each of those menu types has its own settings, so you can control everything under the Menus tab.

You can also control your menus yourself by writing custom CSS code. In this case simply select None for menu type. This option is selected by default after installation of Sparky.

If you have drop-down menu in your site, Sparky can convert it into the button for mobile users (if it can't fit the screen size).

back to top

Cool Features

A handful of some interesting and useful features that you might need. Sparky doesn't need any supporting extensions. Install template and you have Sparky Framework 100% ready!

Cool FeaturesThis is a collection of "toys" for your site that you might (or might not) find useful. In some occasions, they can save a lot of time.

  • Type your textual logo and slogan and control font's appearance or select a logo image.
  • Top panel converts the first row from Layout Builder into a button. Click on that button will show the content of the first row.
  • Font resize allows users to change font size on website. To enable this feature, drag "fontresize" box into any row in Layout Builder.
  • Google Analytics can be activated just by entering your account's id.
  • Google Web Fonts: You can pick Google fonts directly from Style Designer. However, if you want to load some specific font collection, you can paste code snippets in this tab.
  • Scroll To Top button appears when user is in the lower part of your website.
  • Equal Heights equalize heights of all modules within selected rows using JavaScript.
  • Parallax Scroll allows you to select rows where background will be scrolling with parallax effect.
  • Image Animation can be added to some of the images. The animation starts when image first appear on the screen.
  • Scripts is a collection of useful features, such as jQueryUI, Fonts Awesome and Lazy Loading. You can enable or disable them here.
  • Undo/Redo Buttons will remember what changes you made in Sparky and allow you to restore old parameters, even after you save them. Your actions are stored in database.
back to top

Valid, Optimized, Fast

Websites based on Sparky would have a valid code and would load fast.

The parts of the code that Sparky produces is valid, according to the W3C. Keeping your code valid is recommended for better indexing by search engines and consistent look of your website in all browsers.

Sparky loads only the features that you really use, not everything. CSS code that's dynamically generated has not been written on the page (inline). It's loaded from the dynamically generated CSS file. This file doesn't contain everything, but only the pieces of code that your site really uses.

back to top

Export Your Work as a Branded Template

Another unique feature! Just think out the name of your new template... Sparky does the rest and creates the template for you! You can name this template however you like (per company or website name).

Export

This is the unique feature that only Sparky has! The Export tab has only one parameter. But, you'll love it because it allows you to export your work into the new installable Joomla template powered by Sparky, with all parameters and options kept.

You're just one click away from the new template for your website or your client's website.

back to top

Get Sparky for Free!

It's open source and licensed under GNU/GPL. It'll change the way you create!

Download
Version 2.7.10

Professional support and many Joomla templates based on Sparky
included with Joomla template club membership.

back to top

Documentation & Tutorials

Learn how to create websites using the Sparky Framework

We prepared some online documentation and video tutorials that will guide you through the development of your website with Sparky. Everything is covered, from the installation of Sparky to the export of your new site.

The main aim of these documentation series is to show off the most functions of Sparky to you. After you accomplish this fast course, you would be able to create your own websites. Please keep in mind, it's assumed that you already understand Joomla and how it works, and that you have at least beginner knowledge of CSS.

 

Documentation
Read online

back to top

Sample Websites & Testimonials

Sample Joomla templates powered by Sparky Framework.

Music Band
Clinic
Gaming Zone
BookStore
Cinema
Sailing
Wine
Blankie

Sparky in literature

Joomla 3 template essentials book coverThe Sparky Framework is included in book Joomla 3 Template Essentials as one of the most useful Joomla template frameworks available.
The book is written by Pawel Frankowski and published by Packt Publishing.

 

What users of Sparky say about it

A wonderful tool! I haven't found such clarity and straightforwardness in the other frameworks, not even close (!) - your product keeps saving me a lot of time and nerves (I need for other unpleasant stuff in life)! How many people out there are torturing themselves with Gantry, TA 3, JV etc. before they find your product or even worse: never find it? Maybe they need such torturing (as unconscious compensation or even punishment), because so many things in their lives have become too comfortable and uncomplicated ... ;-) ?

Robin

back to top

In the Sparky Framework, you can use all CSS units that’s used in the modern web design practices. Each option in the Sparky’s template options page which is dimension type, allow you to select an appropriate unit. Default unit for all dimension type parameters is pixel (px). Feel free to use the units you are comfortable with and these you understand well.

Subcategories

Welcome to the Sparky Framework documentation!

We did our best to document all features of our framework. If you find any errors in text or want to propose a new feature, please don't hesitate to contact us. The developers of the Sparky Framework will be happy to consider your feedback.

This documentation is also available as a downloadable and printable PDF file, exclusively for the premium members of our site. Professional support, as well as a large collection of Joomla templates based on this framework is also available for all premium members. Please consider joining our template club today to support our future development of the Sparky Framework!

Download the Sparky Framework for free if you haven't already. Start reading the documentation by clicking on names of the Sections from the Documentation menu on the right side.

Happy reading and happy development with Sparky!

Links, Partners and Social Media