logo wide 2000x350

4 Appearance

Chapter Four... Site Appearance includes the following four sections:

4.1 How to Select a Flexible Joomla Template

4.2 Download and Set Up your Custom Template

4.3 Create your own Custom Header

4.4 Template Layout Tips

Section 4.1 reviews several important factors you should consider when selecting a template for your online business or social organization. Templates are premade structures which help you control the appearance of your Joomla website.

Section 4.2 explains how to download, install and set up the Sparky Framework template.

Section 4.3 describes how to make your own custom header. A header includes the logo, image(s) and/or text at the top of your website.

In Section 4.4, we cover the advantages and drawbacks of various layout options. Layout refers to how the images and text on each of your web pages is displayed.  

00
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.
This article explains how to create a custom responsive header for your website. The header consists of a background image and a foreground title and slogan. The header logo image and text are important because they are the first thing your website visitors will notice. The header logo and text will be on every page of your website and will shape the viewer’s impression of your site. You want to take some time to create and install a good image which reflects the goal of your website. Remember that a picture is worth a thousand words – and images are everything!

In the past, the standard method of changing the header on Joomla websites involved going in to the CSS and or HTML sheets from the Template – Edit screen and finding the old header image and replacing it with the new header image. This was quite difficult as the images generally needed to be the same size and even have the same file name as the default header which came with the template. In addition, it was even more difficult to add text or a slogan to your header and/or change the layout and position of the images and text. The goal of this article is to offer you a simpler and more adjustable method for creating a custom header for your website.

7 Steps to Create your own Header
There are basically 7 steps in creating and installing your own custom header:

First, design your custom header
Second, find and/or create your own header background image
Third, modify the height and width of your image to match your website
Fourth add foreground text over the background image.
Fifth, set the image size and optimize the file size of your image for the web
Sixth, upload the image to the Images folder of your Joomla website
Seventh, create an HTML Custom Header Module and assign it to the Design Control Template logo position.

This is one example of the finished product:

01

Now let’s review these 7 steps to see how you can create and install your own header image and text.

Step One: Design your custom header
Your custom header will consist of two parts, a background image and a slogan consisting of foreground text. For this exercise, we will create a full width background image that is 2000 pixels wide and about 300 pixels high.


As for the height of the background image, consider that a typical computer monitor is only 700 to 900 pixels high. Assuming 40 pixels for the main horizontal menu and 300 pixels for the height of the front page slider show (something important, interesting and dynamic for viewers to see without scrolling), and another 60 pixels for the browser window menu and tabs leaves only about 300 pixels left for the height of the header.

02

This particular header is about 300 pixels high with 50 pixels for the main menu and 300 pixels for the Slideshow. If the header or the slideshow were much taller, the viewer would not be able to see the feature boxes without scrolling.

There are several ways to combine slogans and images. One is placing the slogan over the top of the image. This requires an image with a space where a slogan can be read.

03

The second option is placing the slogan to the right of the image:

04

A third option is to place the slogan above the logo image:

05



Step Two: Find or Create Your Own Header Image

Example: Header image for createyourowninteractivewebsite.com

When we began to build this website, we wanted a header image that would reflect a “new beginning” for website construction. We also wanted a scene from nature to reflect our goal of making web design a more natural process. Because small businesses are moving to the cloud, we decided to use a simple picture of being above the clouds. We did a search for “blue sky over clouds image” and found the following image to download:

06

The first thing to look for in a header background image is a very wide but not very tall image. The dimensions of a typical header image are 2000 pixels wide by 300 pixels high. It is okay if the image is a little too big because you can always crop it down using an Image Editor.

If you will be adding text to your image, you want a space to add the text to without blocking the rest of the image. We modified the image slightly using a free Linux program called Pinta. We then stretched the image to make it wider:

07

How to make a transparent image
A free open source tool called Pinta is ideal for creating transparent images. Any area in the image which is set to transparent will show the background color behind it. To create a transparent image, simply save an image as a PNG. Then open it with Pinta.


08

Select the black palette square in the lower right corner. Then slide the Opacity bar all the way to the left. Note the gray checkered squares in the lower left corner indicate it is now transparent. Then click OK.

09

Then click on the paint bucket and set the Tolerance bar for 30%.

10



Then left click on any part of the black area in the image with the paint bucket.

11


Then click File, Save As and save the image as a logo_transparent.png image.

This image can then be set as an overlay to your header background image:

12


You can then use text boxes with the background and border set for “None” to add your website name and slogan to the image.

Step Three A: Modify the height and width of your Image
You can use any of several free image editor tools to stretch or crop an image. A good cropping tool for Linux is Fotoxx. A good painting tool for changing the colors on an image is Pinta. Nearly every Image Editor has a Resize option which can be used to stretch an image. First blow it up to the width you need. A good width is 2000 pixels. Then crop off the excess height. A reasonable height is 300 pixels.


Step Four: Add text over the image
Responsive websites automatically reduce the size of the header background image to match the screen size of the device being used to view your website. But they typically do not reduce the text if the text is in the foreground and the image is in the background.


The way to have the text shrink with the image is to also have the text in the background image and leave the foreground empty. To add text over an image, open a new Libre Draw document and set the orientation to Landscape view with Format, Page, Page. Then copy the background image and paste it into the workspace. Then use the text insertion tool to place and style text in the foreground.

13


Then capture a screen shot of the text over image with a free Linux tool called Shutter.

Step Five: Optimize your header image file size for the web
The next step is to reduce the file size (optimize the picture) so that the header will load more quickly on the web. The general rule is that web image sizes should be under 200 KB. But since this is the header, this image can be a little bigger if needed. Using a free program called Libre Writer, you can quickly optimize all of your images by right clicking on them and then selecting Compress Graphic.


Step Six: Add your header image to the Joomla images folder
Now that we have our image with text, go back into the Joomla Administrator Control Panel and click on CONTENT > Media Manager. Then click on the big green Upload button to upload your image. To insert your image into your custom header module,. you will need to know the exact file name. Clicking on Detail View will help you find the file name. In this case, it is images/logo1900x300.jpg


Step Seven: Create a Custom Header Module and assign it to the Design Control Template logo position
Click on Extensions, Modules, New and select Custom module. Then call it Custom Header, hide the title and assign it to the Design Control template logo position. Use the JCE editor to insert our header image into the workspace.


14

Then click Save and view your website. Note that as you make the viewing window narrower, the image adjusts to fit the width of the window and takes up the full size of the header box.

Getting the color of the rest of your website to match you custom header
Once you have your header box looking the way you want, if you want, you can make some changes to the template itself to get it to better match your header image. Thankfully, there are also color pickers to create even more options. But first we should understand how colors work on websites. What if you had an exact color scheme you were trying to match? To exactly match colors requires knowledge of Hexadecimal Color Coding. That is our next subject.


Hexadecimal Color Coding Tips
A more precise way to set the colors on your website is to use the 6 digit codes for colors, called a Hexadecimal Color Code.


How websites display colors: Introduction to hexadecimal system
Colors are the way our eyes interprets electromagnetic radiation of wave lengths between 350 and 750 nanometers. Different wavelengths are seen as different colors. Electromagnetic radiation with a wavelength of 730 is seen as red, while radiation above 750 is invisible to the human eye and is called infra-red. Radiation with a wave length of 380 is seen as the color blue while radiation under 350 nm is invisible to the human eye and is called ultra-violet. If all wavelengths in the spectrum are represented, the human eye combines them altogether and interprets the color as “white.” We also call this daytime. If none of the colors are present (no light), the human eye interprets this color as “black.”


A computer monitor is made up of millions of tiny little red, green and blue dots which are lumped together in groups of three (one red, blue and green dot per group). These little three-dot groups are close together-- so close that we don't really see them as dots, but rather our eyes mix them up to form one homogeneous color.

15

A typical computer screen can have a thousand or more of these tiny dots in every inch. All colors in the spectrum can be generated with this system of dots. For instance, if all of the red and green dots are shining at 100% of their strength, while the blue dots are not lit at all, you will see the result as a pure yellow color. Each of the three dots can have any intensity value from 0 to 255. This means that the total number of possible colors is 256*256*256 = 16,777,216 or over 16 million color options. Any color can be represented by a specific combination of three numbers. The yellow mentioned before would have the number 255, 255, 0. Yellow equals Maximum Red, Maximum Green and Zero Blue. The first number represents the red dot, the second represents the green dot, and the last represents the blue dot. White is produced by the combination of the highest amount of all three colors, so the code for white is 255, 255, 255. Black, on the other hand, is produced by a lack of other colors, so the code for black is 0, 0, 0. Now to complicate things a bit more, on the web you don't write these numbers just as they are, but instead you must convert them from their normal decimal value (0 to 255) into what is called their “hexadecimal” values. The more you know about hexadecimal color coding, the easier it will be for you to precisely set the colors for your website.

Hexadecimal number convention (HEX) (BASE 16 Numbering System)
In our ordinary system of using numbers the base is ten. That is, whenever you reach ten, you add one more digit to your number. And since everything is based in ten, we only need ten digits to represent every possible number. The ten digits are 0, 1, 2, 3, 4, 5, 6, 7, 8 and 9. Base ten goes back to when the system was first developed, and it is based on the fact that humans have ten fingers. You can say that the hexadecimal system is what our numbers would look like if we had 16 fingers instead of 10. That is, the hexadecimal system uses 16 as the base instead of ten. The digits in the hexadecimal system are 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E and F. The digits in the hexadecimal system are 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E and F. It has only recently been agreed that the letters A to F should be used to represent those last six digits. So, let us count from the beginning, and see where we end up. The BLACK rows are the ordinary decimal number, and the BLUE rows are the corresponding hexadecimal number. Let's look again at dark blue. It had the DECIMAL values of 0, 0, 100. In the hexadecimal system, this would be 0, 0, 64. Usually a zero is added before one-digit numbers (including 0).


Examples of HTML color codes

16

You can use any of several free “color picker” tools to determine the hexadecimal code for any color on your website.


Replacing 6 digit color codes with 3 digit color codes
The six digit code #FAFAFA can be seen as #RED, red, GREEN, green, BLUE, blue. There is simply a Selector, called a HASH mark, followed by two RED digits, then two GREEN digits then two BLUE digits. A color which is all red and some green and no blue would be written: #ff9900. However, the first number in each of the three groups is the controlling number and the second number is almost meaningless. Therefore the above color could also be written as #f90. Thankfully, web browsers can read this shorthand code making it much easier to write in color codes. Sky blue would be #aaf meaning a large amount of red and green and the maximum amount of blue.


Test your knowledge
Name the shorthand code and colors for the following hexadecimal codes:


Hexadecimal Code

3 Digit Code

Color

ffffff







999999







FF0005







1234ff








Set the background colors of your website areas
The Sparky template allows you to set different colors for different rows of your web page. Using different colors makes it easier for your readers to see and understand the organization of your web pages. To set these colors, go to Extensions, Template Manager and click on the Sparky template to open it. Then click on the Layout tab. Then click on Row Settings for the Header 1 row. Then scroll down and select the color you want for that row. You can repeat this process for every row you create with the Sparky Layout tool. Changing the background colors of your website Home page areas gives your readers visual clues that help them better understand the layout of your website.


Next Up: Website Layout
Thus far, we have been focusing on the HEADER and COLOR combinations for your website. In the next article, we will review how to change the LAYOUT or structure of the way articles appear in your website. In general, three column layouts are difficult to read. We will therefore focus on one and two column lay outs – using 3 column layouts only to create “Feature Boxes” at the Top and Bottom of the HOME page.
In the previous section, we discussed several benefits of the Sparky template framework. In this article, we will cover how to download, install and configure the Sparky template on your Joomla website.

Download the Sparky Template Framework to your Home Computer
To get the free Sparky template framework, go to

https://www.hotjoomlatemplates.com/sparky-joomla

Then scroll down the page and click on the Downloads link. Then transfer the folder to your Joomla website extensions folder. Then upload the zipped folder with your Extension Manager. (Extensions, Manage, Install, Upload Package File, Choose File). Next, go to Extensions, Templates, Styles and click on Sparky Framework to open it. Then click on the Layout tab. Change the template width from 960 pixels to 96%. Then click Add Row three times. Drag the gray header1 box to the first row. Drag the gray top1 box to the second row and the red Joomla Content to the third row. Drag the right edge of all three to the right to make them full width.

01

Set the Width for the header row and the Background colors for all three rows. To change the settings for the header row, click on Row Settings. Because we want the header to take the full width of the screen, change Full Width from No to Yes. Then add the background color #eeeeee (light gray).

02

Then click Save Settings. Then click the green Save button to save this change to the server.

Then click on the top1 Row Settings. Change the Row Background color to #eeeeff (light blue). Click Save Settings, then Save. Then click the CONTENT Row Settings. Add the background color #eeeeee (light gray). Click Save Settings, then Save and Close.

Then set Sparky as our default template. To see what this template looks like in the front end of our site, we will need to create a Welcome article for the Home page. Go to Content, Articles and click New. Call the article, Welcome to our Interactive Website! Type in a one sentence description and change Featured to Yes.


03

Then click Save and Close and view site.


04
To hide the author, category, published date and hits, go to Content, Articles, Options. Here is what the front end of our site now looks like:

05

Add a New Header Image
We are now ready to replace the current header image with our own custom header image. In the next section, we will explain in more detail how to make your header. For now, we will assume you have a header image that is about 2000 pixels wide and about 300 pixels high. Here is an example:

06

Make sure the file size is optimized to be under 100KB. Make sure the file name is all lower case with no spaces. For example, header_2000x300.jpg. The image should have the website name, slogan and a background image. Then upload this image to your website by going to Content, Media Manager, Upload, Choose File. Upload the image to the top level of the Media Manager.


Create an HTML Module called Custom Header
Go to Extensions, Modules. Then click New. Then click Custom. For title, type in Custom Header. For Show Title, click Hide. For Position, select the Sparky Header1 position. In the JCE Editor, click on the Image button and select the header image we just loaded into the Media Manager.

07

Then click Save and Close. Clear the browser cache. Then view the front end of our website.

08

Make the browser window narrower and wider and you will see that this header image is fully responsive in that it takes the full width of the screen regardless of the width of the browser window.


Create two sample categories and three sample articles.
We will create our real categories in a later chapter after talking more about how to structure our website. For now, because we would like to see what our Main Menu looks like, we will create two sample categories and three sample articles. We will then make menu items for each in our main menu. To make a new category, click on Content, Categories. There is only one initial category (called Uncategorised). Click on the green New button. For the title, type My First Category. Give it a description.

09

Click Save and new. For the title, type My Second Category. Give it a description. Then click Save and Close. We now have three categories:

10

To create a new article, click on Content, Articles, Add New Article. For title, call it My First Article. Give it a description. Assign the Article to My First Category.

11

Then click Save and New. For title, type My Second Article. Give it a description and assign it to My Second Category. Then click Save and New. Call it My Third Article. Give it a description and assign it to My Second Category. Then click Save and Close. We now have four articles (including our welcome article):

12

Create Two Category Blog Menu Items
Now that we have some content, we can create menu items for this content so we can see it on the front end of our website. To create a new menu item, go to Menus, Main Menu. There is only one menu item called Home. Click on the green new button to reach the Menus, New Item screen.

13

The first step in creating any new menu item is selecting the menu item type. We do this by clicking on the big blue Select button.

14


Joomla offers many categories of menu item types. Click on the Articles category.

15

There are seven menu item types in the Articles category. We will explain all of these in more detail in a later chapter. For now, click on Category Blog. This will return us to the Menus, New Item screen. There will now be an option to Choose a Category. Choose My First Category.

16

For Menu Title, type in My First Category. Then click Save and New. Repeat this process to create the menu item, My Second Category. Then click Save and Close. We now have three menu items in the Main Menu.

17


Create Three Single Article Menu Items
Click New to create another menu item. Click Select. Then Articles, then Single Article. This will give us the option to select a single article. Use the drop down arrow to select our first article.

18


For Menu Title, type My First Article. Then for Parent Item, select My First Category.

19

Click Save and New. Repeat this process to create a Single Article Menu item called My Second Article. Assign it to the Parent Menu item My Second Category. Then repeat this process again to create a Single Article Menu Item called My Third Article. Assign it to My Second Category. We now have six menu items.

20

Note that the articles are indented under their categories to show that they are children of their parent categories. To display the main menu, we will need to put the main menu module in a position recognized by the Sparky template. Go to Extensions, Modules. Then click on the Main Menu module to open it. Change the Title from Show to Hide. Then change the position from Protostar Position 7 to Sparky Position Top1.

21

Then click Save and Close. Then view the front end of our site.

22


The default option is to display the Main Menu as a simple list. To change this, go to Extensions, Templates, Styles and click on the Sparky template to edit it. Click on the Menus tab. Then click on the Main Menu.

23


By default, the Main Menu is set for None meaning no style is applied to the main menu. Click on the drop down arrow and your will see there are seven options including Accordion, Classic, Drop Down, Horizontal, Mega and Off Canvas. Select the Accordion Menu.

24

Scroll down to Font Settings. Click on Systems Fonts and change the font weight from normal to Bold. Then click Select Font to close the window. Increase the font size from 12 px to 18 px. Also change the link colors from #ffffff (white) to #000000 (black). Then click the Green Save button. Then view the front end to see what this menu looks like.

25


Improve the Appearance of the Main Menu
The Accordion Menu is still a simple list. Click on the Menus tab again and select the Main Menu. This time choose the Classic Menu. Then click the green save button and view the front end. You will see that this looks almost the same as no styling at all. Click on the Menus tab again and select the Main Menu. This time choose the Horizontal Menu. Then click the green save button and view the front end. Hover over the Second Category Menu item.


26


The horizontal menu displays sub menu items in a line below the parent items. But it also displays the main menu in a list (by mistake). We will therefore not use this menu style. Click on the Menus tab again and select the Main Menu. This time choose the Drop Down Menu. Then click the green save button and view the front end. Hover over the Second Category Menu item.

27

This is the most common menu type. Go back to Menus, Main Menu, Drop Down Menu to edit this menu style. We will increase the Drop Down pane width to 360 px to allow for longer menu item titles. Then click on System Fonts and change the font weight from normal to bold. Then increase the font size from 14 px to 18 px. Change the link color from #666666 (gray) to #000000 (black). The hover color on the main menu is too light. It is dddddd. Make it 666666. For sub level font settings, change the font size from 12 to 16 and the link color from #666666 to #000000. Change the button color from #dddddd (Gray) to #ddddff (blue). Then click Save and View Site.

28

We will review the Mega Menu option in a later chapter. For now, we will add some CSS code to the Template Custom section to help us set individual colors for each top level menu item. Click on the Custom tab. If you are using our free Rainbow template, you will see the following color options. If you have not downloaded our Rainbow template yet, copy and paste the following CSS code into the Sparky custom box. (Use can also paste this code into the Custom file of any Joomla template):

.lightpurple{background-color:#eeccff !important;}

.lightblue{background-color:#eeeeff !important;}

.lightsky{background-color:#bbeeff !important;}

.lightcyan{background-color:#66ffff !important;}

.lightgreen{background-color:#ccffcc !important;}

.lightforest{background-color:#99ff99 !important;}

.lightgray{background-color:#eeeeee !important;}

.lightyellow{background-color:#ffffaa !important;}

.lightorange{background-color:#ffee99 !important;}

.lightpink{background-color:#ffccff !important;}

.mediumpurple{background-color:#cc99ff !important;}

.mediumblue{background-color:#ccccff !important;}

.mediumsky{background-color:#99bbff !important;}

.mediumcyan{background-color:#00bbff !important;}

.mediumgreen{background-color:#00ff00 !important;}

.mediumforest{background-color:#33eeaa !important;}

.mediumgray{background-color:#dddddd !important;}

.mediumyellow{background-color:#ffff33 !important;}

.mediumorange{background-color:#ffdd00 !important;}

.mediumpink{background-color:#ff99ff !important;}


Here is a screen shot of the Sparky Custom CSS tab after copying in the above CSS:

29


This code adds style “classes” which we can then use to set the background color of individual menu items. To see what this looks like, click Save and Close. Then click Menus, Main Menu and select My First Category. Click on the Link Type tab. Then for Link CSS style, type in greenstyle.

30


Click Save and Close. Then open My Second Category, click the Link Type tab and type in bluestyle. Then click Save and Close and View Site.

31


Being able to control the background color (and every other aspect of) each menu item is a huge feature that is not present on most Joomla templates and menus – even the most popular commercial Joomla menus lack this ability.


Hide the giant “Home” above the Welcome Article Title
There is a giant HOME title above the Welcome article title. To hide this, go to the Menus, Main Menu and double click on the Home Menu Item to open it. Click on the Page Display tab. Then type in a Browser page title and set show page heading to No.

32

Then Save and Close and view site.

33

There are a couple of minor problems with the Sparky menu. When you have a lot of menu items in the Main Menu, they do not drop down and form a new line.

34

This is solved by adding the following line to the Sparky custom tab:

ul.mnu_mainmenu .hjt-megamenu-dropdown-panel {width: auto !important;}

35

A second problem is that the background colors are not completely picked up in the individual menu items. This is solved by adding the following lines to the Sparky custom tab:

.menu.navv.mnu_mainmenu {white-space: normal !important;}

ul.hjt-megamenu-menubar.mnu_mainmenu {white-space: normal !important;}


Here is the final result:

36


Change our Template Favicon
When we made the switch to the Sparky template, an ugly black icon appeared in our web browser tab. We could try to replace this icon by finding it in our template images folder. But an easier option is to add a free Joomla tool that will replace this icon and allow us more control over the icons on every page of our website. Here is a direct link to this free tool:
https://extensions.joomla.org/extensions/extension/style-a-design/design/favicon

Click Download. Then transfer this tool to our website Extensions folder. Then install it with Extensions, Manage, Install.

This tool does preserve transparency in png and ico images. But it will not resize our images. So we first need to create our 16x16 ico images – We can even have different ico images on each page. To add our icon, first enable the favicon plugin. Then go to Components, Favicon. Then click Create.

37

Then click Choose Icon and select the icon from your home computer. Then click Add Image. Then click the Saving tab. Select the icon. Then click the Save button.

38

Click Edit. Then click Publish.

39

Then click Replace Template Favicon.

40

This will cause the favicon to change to our custom favicon in the Firefox browser. But the Sparky favicon will still show in the Chrome browser. To fix this problem, click on Not Assigned.

41

We could place different icons for different menu items here by selecting menu items. Then clicking Assign to assign our custom icon to all pages. Then clear your browser and view the front end of your site.

42


Our custom favicon should now replace the Sparky template icon with all browsers. This completes our initial configuration of the Sparky template. In the next section, we will look a little closer at one of the most important tasks of building your own website... how to create your own custom header.
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.