logo wide 2000x350
Layout refers to how the articles are structured on your home page. Layouts typically refer to the number of rows and columns on the Home page – in particular to the number of columns in the main body of content on the Home page. The main body is the area where “Featured” articles are displayed.

Example of a three-column layout with the Joomla default content.

01

In the past, 3 column layouts – with side bar menus on both sides of the main content - were common. But three column layouts are very difficult to read. If the computer screen is 9 inches or 900 pixels wide, then each column is only 3 inches wide.


Benefit of a Single Column Layout
If you really want to convey information, you are better off with a one column layout with all the menu items at the top of the HOME page. This is how most books are written. At most, you should have two columns on your home page with a single side menu.

Example of a one column main body lay out

02
From the top down, it has a header, a main menu, a slide show and three modules in the Featured position above the main body. It is called a single column layout because there is only one column for the main body content. Note that just because you should use a single column layout for the main content area, this does not mean that all of the sections of your home page should be a single column. It is quite common to have “feature boxes” at the top and bottom of your HOME page to highlight particular sections of your website. The Design Control template offers incredible flexibility and ease in terms of setting and changing your page layout. It is simply a matter of clicking a couple of buttons – and then creating and placing modules or boxes wherever you want.

Two and Three Column Layouts have Empty Space
The Joomla Demo site main body takes up the right column which is three times the width of the left column. The main body has four articles set in what Joomla calls a blog layout. There is one full width lead article with three secondary articles. All four articles have been set as “Featured” articles to display on the Home page. One of the problems with the layout of articles on the Joomla Demo Site Home page is that there is a bunch of empty space below the featured articles. In addition to not looking very good, this is not a very effective way to communicate information.
03

Sidebar Menus instead of Horizontal Top Menus can also result in wasted space.

04

Sidebar Menus also make it more difficult to read content as the width of articles must be reduced to accommodate the side space.

Sparky Template Layout Tools
Go the Template Manager, and double click on the Sparky template to open it. Then click on the Layout tab. Our current template has three rows each with one column. We have a header row for our header image, a top row for our main menu and a red row for our Joomla content.


05

But what if we wanted two more rows of modules above our Joomla Content and two more rows of modules below our Joomla Content? And what if we wanted each of these four new rows to have three columns with a side bar column to the right of our Joomla content? With Sparky, we can create any layout we want in a matter of minutes just by clicking on the Add Row button and then dragging gray boxes into these rows. Here is how it is done.

First, click on the Add Row button four times to add our four new rows.

06

Second, drag the red content row from the third row to the seventh row. Then drag the the User 1, 2 , 3 and 4 gray boxes into the sixth row and the Top 3, 4 and 5 boxes to the fifth row. Next drag the Top 2 and Top 3 boxes to the fourth row. Finally, drag the Header 1, Header 2 and Top 1 boxes into the first three rows. Then drag the right edge of each box to the right to space them evenly with each box taking up one third of each row. Finally, drag the right edge of the red Joomla CONTENT box to the left so that it only takes up two thirds of its row. Then drag the “right” gray box to the rest of the space in that row. Here is our final layout.

07

We could use the Row Settings buttons to give each row a unique color. In a later chapter, we will explain how to create custom Joomla modules to place in each of these content boxes. For now click Save.

How to Add Even More Rows to our Sparky Template

By default, the Sparky template comes with 34 gray boxes (called module positions). So far, we have used up 15 of the Sparky gray boxes to create our layout. There are still 19 Gray boxes left.

08

This may seem like a lot of boxes as we could still add 4 more rows of modules with four module positions in each row. But imagine if you have an online store with 11 categories of products and with 4 products in each category – for a total of 44 products. Each category will need one rows for a total of 11 rows – with each product needing its own module position – for a total of 44 module positions.

This is not at all unusual. I once ran a small store that sold more than 1,000 different products divided into 20 different categories. We also need rows for our header and a main menu and a slide show of featured items and a row for our videos and feature boxes. Then a row for our main Joomla content plus a row for contact information at the bottom of the page. That is 10 more rows for a grand total of 20 rows. There is no other template system on the market that will provide this kind of customization in a matter of minutes. But with Sparky, it is no problem. This is because Sparky allows us to add as many gray boxes as we want. We are not limited to merely the gray boxes that come with the Sparky template. Let’s say we wanted to add 11 more rows of modules each with four module positions for a total of 44 more module positions (for a grand total of 78 module positions). There are basically three quick steps to this process. First, create a template layout plan. Here it is:


Step 1 Create our Template Layout Plan

Sparky Row 1 Header 1 Existing

Sparky Row 2 Header 2 Existing

Sparky Row 3 Top 1 Existing

Sparky Row 4 Slideshow Top 2 and 3 Existing

Sparky Row 5 Videos (Top 4 through 6 Existing)

Sparky Row 6 Feature Boxes (User 1 through 4 Existing)

Sparky Row 7 Joomla Content comes with above and below content modules positions (Existing)

Sparky Row 8 Product category 1 (four positions needed)

Sparky Row 9 Product category 2 (four positions needed)

Sparky Row 10 Product category 3 (four positions needed)

Sparky Row 11 Product category 4 (four positions needed)

Sparky Row 12 Product category 5 (four positions needed)

Sparky Row 13 Product category 6 (four positions needed)

Sparky Row 14 Product category 7 (four positions needed)

Sparky Row 15 Product category 8 (four positions needed)

Sparky Row 16 Product category 9 (four positions needed)

Sparky Row 17 Product category 10 (four positions needed)

Sparky Row 18 Product category 11 (four positions needed)

Sparky Row 19 Bottom 1 through 4 Existing

Sparky Row 20 Footer Existing


So besides the module positions we already have, we need 11 new rows each with four module positions.


Step 2 Create an HTML version of our new module positions
We will review HTML in a later book. For now, simply open the original sparky framework template (not one of the copies). Then copy the following into the XML file:

<position>row8a</position>

<position>row8b</position>

<position>row8c</position>

<position>row8d</position>

<position>row9a</position>

<position>row9b</position>

<position>row9c</position>

<position>row9d</position>

<position>row10a</position>

<position>row10b</position>

<position>row10c</position>

<position>row10d</position>

<position>row11a</position>

<position>row11b</position>

<position>row11c</position>

<position>row11d</position>

<position>row12a</position>

<position>row12b</position>

<position>row12c</position>

<position>row12d</position>

<position>row13a</position>

<position>row13b</position>

<position>row13c</position>

<position>row13d</position>

<position>row14a</position>

<position>row14b</position>

<position>row14c</position>

<position>row14d</position>

<position>row15a</position>

<position>row15b</position>

<position>row15c</position>

<position>row15d</position>

<position>row16a</position>

<position>row16b</position>

<position>row16c</position>

<position>row16d</position>

<position>row17a</position>

<position>row17b</position>

<position>row17c</position>

<position>row17d</position>

<position>row18a</position>

<position>row18b</position>

<position>row18c</position>

<position>row18d</position>


Step 3 Paste these 44 module positions into the Sparky XML file
Click on Extensions, Templates, Templates. Then scroll down and click on the Sparky Framework Details and Files to open them.

09
Then click on the templateDetails.xml file to open it. Then scroll down to line 75 and make a new line after line 75.

10

Then copy our 44 new module positions and paste them beginning at line 76:

11

Then click Save and Close to close the file. Then click Close. Then click on Template Styles.


Step 4 Create our new layout
Click on the Sparky template to edit it. Then click on the Layout tab.

12

We now have 44 more module positions. To make our layout, click Add Row 10 times. We will drag the first 10 rows of module positions into place. Click Save.

13

Click on Add Row 10 more times. Then drag the remaining module positions into place. Click Save again.

14
When we are done setting all of our module positions, we can add unique background colors to each row. In order to use a dark font for our text, you should use light colors for your backgrounds. You can pick out your own background colors by opening a Libre Writer document and selecting Fill Color, then selecting Custom Color.

15

You can also pick out your own background colors online using a Hexadecimal Color Generator like http://www.w3schools.com/colors/colors_picker.asp

Below is a table of hexadecimal values for light background colors.


Rainbow Template Website Background Colors

Sparky Row #

Color Name

Hexadecimal #

Background Color

1

Light Purple

#eeccff




2

Light Blue

#eeeeff




3

Light Sky

#bbeeff




4

Light Cyan

#66ffff




5

Light Green

#ccffcc




6

Light Forest

#99ff99




7 Content

Light Gray

#eeeeee




8

Light Yellow

#ffffaa




9

Light Orange

#ffee99




10

Light Pink

#ffccff




11

Medium Purple

#cc99ff




12

Medium Blue

#ccccff




13

Medium Sky

#99bbff




14

Medium Cyan

#00bbff




15

Medium Green

#00ff00




16

Medium Forest

#33eeaa




17

Medium Gray

#dddddd




18

Medium Yellow

#ffff33




19

Medium Orange

#ffdd00




20

Medium Pink

#ff99ff







These colors can be used for Sparky Row background colors and also for individual menu item background colors. In general, the light colors work best for Row backgrounds and the Medium Colors work best for Menu Item Backgrounds.

16

Remember to make the Header 1 row full width. Also remember to click on the green Save button after clicking on the blue Save Settings button in order to save your background color settings to the server. We can then set the font and link styles with the Sparky Style tab.

17


Reduce the Font Size for H1 from 60 px to 32 px and change the font color to dark blue (#333399). Then click on the Links tab and change the links color to dark blue also. Then click Save.

Then click on the Menus tab. As we have previously shown, we can also set the menu styles with the Menu tab. Then click on the Responsive tab and reduce the screen width for the ICON mobile men from 992px to 792px.

18


Finally, add our custom CSS with the custom tab. But rather than doing all of this work, because we have already done it and because the Sparky framework as an Export function, all you really need to do is go to our website Downloads page and download our free Rainbow template! Here is how you can export your own template layout creations.


Export our Custom 20 row 20 color Rainbow template
It is worthwhile doing all of this work just for the practice in better understanding the Sparky template framework. However, if you have 20 websites, rather than repeating all of these steps 20 times, we can simply create one custom template and then click on the Export tab.

19

We call our template the Rainbow template. Then click Export. It downloads as a zipped folder. You can then install it on any other Joomla website by going to Extensions, Manage, Install. You will then find the new custom template in your list of templates.

20

This also allows us to offer our template as a free download. The file size is only 1 MB which is pretty amazing for such a powerful template system. We will describe how to create your own Downloads system in a later chapter. You can also create and market your own commercial templates very rapidly using the Sparky framework.

To see what our new Rainbow template layout looks like in the front end, after we download it with Sparky and then install it with the Joomla Extensions, Install, we will make it the default template and then go to Extensions, Modules and make one or more custom modules for each of our Sparky row. The easiest way to do this is to make one Custom Module called Sparky Row 3 and assign it to the Top1 position. Then click Save and Close and make copies of this module. Then open each copy and change its name and position assignment. We can assign our modules to these new module positions from the module edit screen.

21

Here is what our front end now looks like:

22

In a later chapter, we will show you how to use module classes so that each module can have its own background just like each menu item can have its own background color. This concludes our chapter on Site Appearance. In the next chapter, we will explain how to organize your Site Content including creating categories and posting articles.