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.
All 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:
- To start, click "ADD ROW" button to make some rows.
- Drag a module block into the row and adjust its width (click on its right edge and move left).
- Drag the second module block into the remaining space and so on...
- If you need to move a module block left/right, click on the arrows in the blocks lower left corner.
- 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.
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
- Installation of Sparky Framework generic template
- How Layout Builder makes the skeleton of your website
- Set text styles and use Google Web Fonts
- Configuration of top menu with drop-downs and classic menu
- Adding some cool features to the website
- Check how Sparky works on mobile devices
- Exporting template