Joomla! 4 is completely redesigned, rethought, and has new features. Joomla 4 Templates

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).

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.

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.

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.

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.

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.

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.