Hot Themes
  • Joomla!
    • Joomla Templates
    • Sparky Page Builder
    • Sparky Framework
    • Joomla Extensions
    • Free Joomla Extensions
    • Templates Demo
  • WordPress
    • WordPress Themes
    • WordPress Plugins
    • Themes Demo
  • About
    • About Us
    • Blog
    • Affiliate Program
    • Careers
    • Web Hosting
    • Why HotThemes?
    • Custom Work
  • Help
    • How to Download?
    • Joomla Documentation
    • WordPress Documentation
    • FAQ
    • Support Forum
    • Contact Us
  • Members
    • Log In
  • Search
  • Join Now

III Layout

To access Sparky’s template options and open the Layout tab, do the following:

  1. Login to your Joomla Administration panel.
  2. Go to Extensions > Templates > sparky_framework > Layout (Joomla 3.x) or System > Templates > Site Template Styles > sparky_framework > Layout (Joomla 4.x).

1. Site Width

The first parameter in the Layout tab is Template Width and it determines the maximum width of your site. It’s maximum width because, if responsive mode is enabled, site width will decrease on smaller screens. If responsive mode is disabled, site width will be fixed regardless of the screen size.

Read more …

2. Grid System

Once we defined the width of the site, we should start defining the inside area. The first step is defining the Grid System. This parameter is a number between 1 and 24 (including these two numbers). To change the value, drag the slider to the left or to the right to decrease or increase the value.

Read more …

3. Types of Elements

There are 4 types of elements in the Sparky Framework that you can include in your layout. We will explain each element type here.

Read more …

4. Layout Builder

Layout Builder is heart of the Sparky Framework. This is something that saves most of your valuable time. When developing a Joomla template, the most complex and the most time-consuming task is to develop the layout. You need to code a bunch of nested DIV containers, then define dimensions for each of them, write CSS code that will support your layout, and finally put elements inside them (module positions, Joomla content, etc.). Even with CSS frameworks (such as Bootstrap or Foundation), you still need to manually write the code, define dimensions for each element and put elements inside them.

Read more …

5. Gutter

Gutter is a popular name for the space between two neighbor columns. In the Sparky Framework, it’s also possible to make space between two neighbor rows in the layout grid.

Read more …

6. Row Settings

Each row from your layout has a Row Settings button on the left hand side. If you click this button, a modal window will be opened with bunch of parameters that allow you to configure this row.

Read more …

7. Text Direction

This parameter allows you to select direction of your text. Default value of the Text Direction parameter is “Left-to-right”. You should not change it if you are reading text from left to right side in your language. Such languages are English, French, German, Italian and many others.

Read more …

8. Different Layout for Certain Pages

It’s possible to have different layouts on different Joomla pages. Actually, this is not a feature of the Sparky Framework, but a feature of Joomla. We’ll just briefly remind you about it.

Read more …

Documentation Menu

  • I About Sparky Framework
  • II Installation
  • III Layout
    • 1. Site Width
    • 2. Grid System
    • 3. Types of Elements
    • 4. Layout Builder
    • 5. Gutter
    • 6. Row Settings
    • 7. Text Direction
    • 8. Different Layout for Certain Pages
  • IV Style
  • V Features
  • VI Menus
  • VII Responsive
  • VIII Custom CSS and JavaScript
  • IX Export
  • X Plugins
  • XI Download
  • XII FAQs

We have 100+ templates in our collection. View all Joomla Templates

Join thousands of members who are using our products to make awesome Joomla site, blog or eCommerce. We have a big collection and publish new products regularly.

7 Days Money Back Guarantee, so all purchases are risk-free! Read terms

Sign Up Now
Get all-inclusive download access
  1. You are here:  
  2. Home
  3. Documentation
  4. III Layout

Latest Templates

  • Museum Joomla Template
  • Focus — Wedding Photography Template
  • Pub Template
  • Chiropractic Template
  • Pizzeria Template

Latest Extensions

  • Elastic Slider - Joomla 4 Compatible
  • Hot Swipe Carousel - Touch Friendly Carousel
  • Hot Counters - Countdown Joomla Module
  • Responsive Joomla Lightbox
  • Free Responsive Slider - Hot Slicebox

Connect With Us

Mailing List

© 2009-2023 Hot Themes - Joomla templates and extensions provider. All rights reserved.
hotjoomlatemplates.com and this site is not affiliated with or endorsed by The Joomla! Project™. Any products and services provided through this site are not supported or warrantied by The Joomla! Project or Open Source Matters, Inc. Use of the Joomla!® name, symbol, logo and related trademarks is permitted under a limited license granted by Open Source Matters, Inc.
Hosted by VPSServer.com | Social marketing by Combin.com | Terms of Service | Privacy Policy | Affiliate Program