logo wide 2000x350
A template is a predesigned set of forms that help you control the appearance of your website – including the layout and color of your website content. A template is one of the most important parts of your website. A good template should allow you to place any content text, images or video into any position on your website. In addition, a good template should allow you to quickly change the colors of any section of your website with just the click of a button.

01r

One of the biggest challenges with any website is getting your website to look the way you want it to look. This is especially difficult if you are not very good at computer programming and do not have the time to learn the four main programming languages used to control and display websites (HTML, CSS, PHP and Javascript). In theory, one of the primary benefits of using a Content Management System such as Joomla is that you should not have to learn these languages to build your website. Instead, you merely click on buttons and Joomla should make all of the needed coding changes for you. In practice however, if you have a poorly designed Joomla template, you will need to learn and use a lot of computer programming to get your website to look the way you want. With some templates, even simple changes – such as changing the header of your document – can turn into a nightmare. It is therefore worth the time to learn about templates and how to tell an easy to use flexible Joomla template from a difficult to use inflexible template. In this article, we will review a few of the most important factors in choosing a good Joomla template.

02r

Sadly, there are people who teach online courses in Joomla who fail to do even a few minutes of basic research into template options before recommending a particular template to their students. There are Youtube videos with more than 100,000 views where the “instructor” recommends a template that is nearly impossible to use. Even a basic amount of research, such as going to the Template category of the Joomla Forum or going to the Forum of the maker of the template, would reveal thousands of complaints from folks trying to get the template to work. Each of these 100,000 students are likely to blame Joomla for their problems rather than blaming the irresponsible instructor or template designer. If a person is going to claim to be a Joomla instructor, they should do at least a few minutes of basic research before posting videos on Youtube.

Because of the abundance of poorly made Joomla templates and bad advice given by some online instructors, we will review how to choose a template using a set of objective factors. After defining these factors, we will briefly describe why they are important and present a table of some of the current leading template options followed by a brief review of the advantages and drawbacks of each template. Our assumption is that the template will be used by a small business owner who has little or no knowledge of computer programming languages – but wants to have complete control over the appearance of their website so that they can make changes to the website easily as their business grows over time.

Joomla Templates Comparing 10 Essential Features

03r


See Below for Comments on each of the 10 Essential Factors

#1 Why do we need a fully functional Free Version?
I realize that template makers have to make money. But it is important to offer at least one fully functional free template for several reasons. First, it is the best way for users to test out a particular template framework to see if it will work well with the particular layout and extensions being used on any given Joomla website. Second, for teachers such as myself, it is important to work with a free template so that students taking my courses do not have to make a major investment to learn how a template framework works. Finally, some unemployed folks who want to start a small business website simply cannot afford hundreds of dollars for commercial templates and extensions.


#2 Why do we need a Grid Framework?
The benefit of a grid system is that it allows for a variety of different layouts while still using the same template. Some businesses may want to display 4 products per row while others want to display three. Some rows such as the header row and slide show row might need an entire row, while other modules might take one half or one third of a row. Therefore a template should be able to set different rows to different configurations with just the click of a button.



#3. Why do we need an Adjustable Number of Module Position Rows?
The space above the main content on your HOME page is the most important space on your website. It is what every viewer sees first when they visit your website. This space needs to be interesting and informative. A typical viewing screen will only be about 7 inches high meaning that your top 700 pixels are extremely important. The first thing a person sees should be a full width header that is between 100 to 160 pixels high. Think of your website header as being like the cover of a book. Underneath the header should be a full width horizontal menu about 40 pixels high displaying the main categories of your website and allowing readers to click on drop down menus for products and articles on other pages of your website. Below this should be a full width slide show which explains what is unique about your website and why readers should take the time to continue reading your website. This will be about 300 pixels high. This leaves about 200 pixels high for feature boxes with links to the most important pages on your website. Then after this comes your main content.


This means you need at least four fully configurable rows above the main content area. Sadly, because web developers typically place all kinds of rigid coding in the highest row (to format logos, search boxes, registration boxes, top menus and other stuff), the quickest way to take control of your website is to simply turn off the top row – if it is possible and place your header into the second highest row. This means you may need at least five rows above the main content. More rows also make it easier to place more modules above the main content. There is no real drawback to having an abundance of rows and positions as any unused rows will not be shown.


The default Protostar template has only a few module positions
Sadly, the two default templates that come with Joomla 3 have just a couple of positions above the main content. This makes them unusable for a small business website. The default Joomla template, called Protostar comes with exactly 8 positions or places you can put the content on your web pages. This includes 3 rows above the Joomla content, 1 column to the left and right of the Joomla content and 2 rows below the Joomla content. Here is what these options look like with their module position names:

Position 0

Position 1

Banner

Position 8

Position 3

(Joomla Content)

Position 7

Position 2

Footer



There are several problems with this arrangement. First, it is extremely limiting. What if we have four rows of products or feature boxes we want above our Joomla articles and four rows below our Joomla articles? What if we want three or four columns in some of these rows? Equally important, when we create custom content, which Joomla calls custom modules, we need to remember that Position 1 is above the Joomla content, Position 7 is to the right of it and Position 2 is below it. This problem is not limited to the default Joomla template. With nearly all Joomla templates, we are stuck with whatever module positions the maker of the template was willing to add and we need to remember their naming convention in order to place our custom content where we want it on the page.

Sparky Template Framework allows us to create any number of rows.
A huge benefit of the Sparky template framework is that it allows us to easily create our own module positions and assign them to wherever we want in our template. The process is extremely simple. In a matter of minutes, we can create the following template structure which gives us 20 or more rows with 4 or more columns each. This is in addition to positions directly beside, above and below the content.


Example of Rows and Columns Needed for an Online Store

Row 1 Header 1

Row 2 Header 2

Row 3 Top 1

Row 4 Top 2

Row 4 Top 3

Row 5 Top 3

Row 5 Top 4

Row 5 Top 5

Row 6 User 1

Row 6 User 2

Row 6 User 3

Row 6 User 4

Above Content (still uses Sparky Row 7 settings)

Left

Row 7 Joomla Content

Right

Below Content (still uses Sparky Row 7 settings)

Row 8a

Row 8a

Row 8a

Row 8a

Row 9a

Row 9b

Row 9c

Row 9d

Row 10a

Row 10b

Row 10c

Row 10d

Row 11a

Row 11b

Row 11c

Row 11d

Row 12a

Row 12b

Row 12c

Row 12d

Row 13a

Row 13b

Row 13c

Row 13d

Row 14a

Row 14b

Row 14c

Row 14d

Row 15a

Row 15b

Row 15c

Row 15d

Row 16a

Row 16b

Row 16c

Row 16d

Row 17a

Row 17b

Row 17c

Row 17d

Row 18a

Row 18b

Row 18c

Row 18d

Bottom 1

Bottom 2

Bottom 3

Bottom 4

Footer



Any unused positions are simply not shown. Moreover, you are not limited to this arrangement. You can create whatever arrangement you need for your online store or social organization. You can even create different arrangements for different pages of your website. Finally, with the click of a button, you can customize the appearance of each of these rows. Here is an example of our Demo News website using different row colors to help separate the various news subject categories (each of which displays the three latest articles in that subject).

4r

Here is what these module positions look like in the Sparky template edit screen:

5r

#4. Why do we need a simple framework system?
There are other Joomla template frameworks besides Sparky that allow us to create our own module rows and columns. The problem with all of them is that they are extremely complex. They seem to be written by computer programmers for other computer programmers. The average website owner simply does not have the time to learn the complex processes involved in complex template frameworks. One of the most important features of Sparky is its simplicity.


#5 Why do we need simple Custom CSS?

In the past, folks often used CSS coding in the CSS style sheets to change the background colors of various parts of their website. Sadly, with the complexity of Joomla 3 Responsive templates, it is becoming increasingly difficult to even find the location in the coding where you can change the color of a particular section of your website.

Many Joomla templates, including those by Rocket Themes, Joomlart and Shaper have a huge number of CSS sheets – as many as 30 CSS sheets with some CSS sheets running over 3000 lines. Finding where to make a change in these sheets is like looking for a needle in a haystack. In the past, we could use a free tool called Firebug in conjunction with a free web browser called Firefox to locate the exact sheet and the exact line in a sheet where a change in coding needs to be made. Thus, if you knew CSS, you could customize your website in a few minutes. But now even a basic template like the default Joomla template Protostar uses LESS sheets which hide the location of CSS elements. While Protostar has only three CSS sheets, one of the sheets is over 7,000 lines long!

For example, to locate the background color of the Our Team module in the Purity III template, you would need to go to Extensions, Template Manager. Then click on Templates in the upper left corner. Then select the Purity III Template Files. Then open the CSS folder. Then select and open the Template.css file. Then scroll down to line 3119. Sadly, as we explain below, you will need to go to or create a different file to actually change the background color!

6r

The Rocket Themes Gantry templates suffer from a similar problem. This combined with the unique terminology and processes of the Gantry system makes Gantry simply too difficult for the average user to learn.

Thankfully, we have an alternative to this CSS and template complexity madness. Sparky keeps their template CSS files much shorter and fewer in number and it is generally possible to use Firebug to analyze this template. They are still able to make the template responsive so that images get smaller as the screen width gets smaller. Having a custom.css file is important because not all changes can be accomplished with color pickers and module position clickers. Sometimes you need to make a change in the CSS. With a Sparky template, you will not have to spend all day reading through thousands of lines of coding just to make a simple change in the appearance of your website.


#5 Why do we need to be able to adjust the Header?
Because the header is the first thing your customers will see, it is essential that it tell a story about your business. This means you need to have full control over the text and images used in your header. In Joomla, full control of a particular spot on your web page is best gained by using an HTML custom box. This in turn requires turning off anything else that is in this top module position. Sadly, with many templates, it is very difficult to turn off the existing content in the top of the website. A huge benefit of the Sparky template is that it uses simple custom modules for each row. This makes it very easy for us to place a custom header in the highest row without any modifications of the template.


06

#6 Why do we need Color Pickers?
Using different colors on different places of your website not only looks good and makes your website more interesting to look at, but it also offers readers a visual clue that different parts of your website are featuring different content and being used for different purposes. It is therefore important that each row of your template have a color picker which allows you to easily change the color of that section. Even subtle changes in color can make your website more readable and understandable to your viewers. Sadly, very few free templates offer this feature. Thankfully, one of the few that does is the Sparky template. In fact, each row has several customizable appearance settings as shown below.


7r

Thankfully, we have an alternative to this CSS madness. The Shape 5 keeps their CSS files much shorter and fewer in number and it is generally possible to use Firebug to analyze this template. They are still able to make the template responsive by using a different process to create a series of different adjustments as the screen width gets smaller. This is important because not all changes can be accomplished with color pickers and module position clickers. Sometimes you need to make a change in the CSS. With a Shape 5 template, you will not have to spend all day reading through thousands of lines of coding just to make a simple change.

#7 Why do we need to be able to turn off template maker branding?
I understand that with a free template that the template manufacturer might want you to leave their brand on the template as a form of advertising. Some in fact legally require that you leave their brand turned on. But such a policy is extremely shortsighted as it makes it difficult to impossible for an instructor like me to recommend or teach about such a template during a course at a public college or University. Private logos are not allowed in many courses. In addition, many of my students are public school teachers. Promoting private logos is certainly not allowed in most public school districts. Finally, many non-profits do not allow promoting private logos. For all of these reasons, it is essential to be legally allowed to turn off any branding – and also that turning off such branding can be done without a huge amount of time and effort. With the Sparky template, because we will be using our own modules for the content, there is no problem creating an unbranded template. Sparky even allows us to export templates we design and put our own brand on the template!


#8 Why do we need complete Template Customization Documentation?
It is not possible for me to cover every single feature of a template that might be needed by a small business owner. It is therefore important that the template maker offer complete instructions on how to use their templates. Sadly, it seems that the more complex templates become, the less information is provided on how to use them. This can be extremely frustrating if you are trying to get your business website up and running and there is no information available about how to make a simple change to your template.


#9 Why do we need a template forum with a knowledgeable helpful staff?
Ideally, it would be nice if the answers to how to customize a template were provided in the documentation for the template. But there are always going to be some problems that remain even with the most carefully designed templates. This is why it is important to have access to a forum where you can read about how other people solved similar problems and if a particular question has not been answered, where you can register and ask the question yourself. But having a forum is not enough. We also need the person who answers the question to be able to present answers in a clear step by step fashion. Sadly, the people who oversee most forums know more about computer programming than they know about education. Their answers are often incomprehensible. On some forums, thousands of very important questions are not even answered at all!


Even the most knowledgeable forum staff often give very incomplete answers. They often fail to provide directions to the exact file that needs changing and the exact steps needed to change a file. Other times, they refer the reader to an entire manual to read. Often, these manuals also fail to explain how to solve a particular problem. The real problem is that the forum staff are better at computer programming than they are at explaining precisely how to solve problems.


#10 Why do we need custom export?

Sparky offers a unique feature of being able to rename and export the template in a package that can then be sold, given away and/or reloaded to another website using the standard Joomla installation process. Thus, if you have 20 different websites, you can make the changes you want to just one of them and then export the customized Sparky template and then install it on the other 19 websites. You can even offer it as a free download to your students if you are teaching a class. In fact, you can make several Sparky templates and offer all of them to your students as a way to learn about how to make templates. You can even start your own template club or business and sell your customized Sparky templates on the open market.

Sparky Template Framework also includes several customizable menus
In addition to the simplest and most flexible template framework in existence, and being able to create and export your own branded templates, Sparky also offers a series of fully customizable menu types including horizontal menus and mega menus (mega menus allow you to put boxes of content right inside of your menu items and have menu items magically expand as needed). Here is an example of two modules in the drop down of a mega menu item:


08



You can create multiple menus and easily assign different styles for each menu and have complete control over which pages on your website display which menus.

09

We add the Rainbow Template System to make Sparky the perfect template
One drawback of the Sparky Template Framework is that it comes with almost no preset styles for our modules. Sparky assumes that you know how to make your own module styles using CSS (Cascading Style Sheets). But many people have no idea how to create or use CSS.


We have addressed this problem by creating the Rainbow Template System – which comes with 10 Preset Round Module colors and 10 Preset Square Module colors.

10

The Rainbow Template System also comes with 20 preset colors which allow us to use different colors for each menu item in our main menu.

11

The Sparky Template Framework allows us to easily set the background color for each row to whatever we want. Here are the preset colors for our Rainbow template. But it is very easy to change these colors to whatever you want. You can even use images for backgrounds for any row.

12

In the next section, we will review how to download, install and configure the Sparky template and how to download our free Rainbow Template System.