logo wide 2000x350
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.