Building the Smiley Ice Cream...

Building the Smiley Ice Cream Website using Joomla 1.5

About this tutorial

I've written this tutorial for the purpose of guiding you through the steps in building a Joomla! 1.5 custom template for a fictitious company, Smiley Ice Cream. We'll explore how to write the CSS for the custom template and see how we can use a calendar component to keep track of events. Lastly, we'll add a poll for our browsers to cast their votes.

At the end of the tutorial, we should have created a website that more or less looks like the one below:

Assumptions

This tutorial will assume that you have some basic knowledge in Joomla! and familiar with trems such as Sections, Categories, Components, etc. For a quick tour, please visit the online PDF tutorial provided by Joomla! at http://help.joomla.org/ghop/feb2008/task048/joomla_15_quickstart.pdf .

This tutorial will likewise assume that you have a web-server installed in your computer. For Windows-users, you may opt to install WAMP or XAMP, while for Macintosh users, you will need to install MAMP. Just use Google to search for their websites and follow the instructions in setting up.

With that, we can now get started in creating our Joomla! based website.

Setting up the site:

The first thing we need to do is to download Joomla! 1.5. Just to to the website http://www.joomla.org/ to download the lastest 1.5 version. Download the zip format and extract in your PC. A folder joomla_15 will appear. Let's rename the folder, to "Smiley_Ice_Cream", which is the name of our fictitious company.

Copy the folder to the root directory of your web server. For those who have installed WAMP, this will be the "C:\wamp\www" directory. Start-up your webserver and open a browser. I'm recommending that you use Firefox. Type in "localhost" and look for the name name of our folder. Click on it and follow the procedures in setting up our Joomla! based website.

At the end of the installation, open click the site icon. Open a new tab on your browser and run the administator of your Joomla! website. Enter "admin" on the Username and the password you provided on the installation of Joomla! 1.5.

With Joomla! 1.5 installed as our website CMS, we move on to the next topic.

Creating the Joomla! 1.5 Template Files

Swicth to the desktop of your computer and open the root directory of your web-server. For WAMP installation, this is the "C:\wamp\www" directory. Look for the "Smiley_Ice_Cream" folder and open it. Open the "templates" folder. You will now see the directory of templates for your Joomla! 1.5 website.

We will now create our own template. We start by creating a folder and renaming it with our preferred name. I renamed the folder to "MyTemp". My screen shot below shows "MyTemp" inside the "templates" directory.

Inside the "MyTemp", or whatever folder name you provided, create two more folders: "css" and "images". Download the thumbnail from my website to "Mytemp" from this URL: http://jundconsultancy.com/learningresourcse/Joomla/template_thumbnail.png.

Using an editor, created "index.php" and "templateDetails.xml". For now, they will have blank contents, we'll fill them up in a while.

Switch back to your browser, and go to the Joomla! website at "http://www.joomla.org". We'll be clicking a series of links: "Documentation", "Web Designers", "Joomla 1.5 Template Tutorial", and "Creating a basic Joomla! Template". This should take you you this URL: http://docs.joomla.org/Tutorial:Creating_a_basic_Joomla!_template .

Copy/ paste the codes provided for the "index.php" and "templateDetails.xml" files. Make the necessary customization for the "templateDetails.xml" file.

Using your editor once more, create the files "style.css" and "layout.css" inside the "css" folder. For now, they will have blank contents, we'll fill them up later.

Download the images files from my website to the "images" folder at these URLS: http://jundconsultancy.com/learningresourcse/Joomla/flavor_menu_background.png , http://jundconsultancy.com/learningresourcse/Joomla/smiley_banner.png , and http://jundconsultancy.com/learningresourcse/Joomla/top_menu.png .

The directories of your template should ressemble as follows:

With the files and folders in place, we can now use the admin of Joomla! 1.5 to continue our template-layout customise.

Creating the contents

Lets switch back to our browser and go to the admin tab of our Joomla! 1.5 website. If the tab is not yet open, open it now and go to the admin of our Joomla website. Login if not yet inside the administration.

Create the section "Company". This will be the only section. Next, create the categories "Info", "Flavors", and "Promo". All three will be under the "Company" section.

For "Info" category, create the articles "About Us", "Our Products", and "Sign Up". Do NOT click "Yes" button for Front Page.

For "Flavors" category, create the articles "Chocolate", "Vanilla", "Strawberry", "Mango", and "Ube". Do NOT click "Yes" button for Front Page.

For "Promo" category, create the articles "Now Available in Other Countries", "Summer Pinoy Promo", "UST Campus Tour", and "Putting a smile in our flavors". This time click "Yes" button for Front Page.

Setting MyTemp to default

After creating the contents, pull down the "Extensions" menu and select "Template Manager". Set "MyTemp" template as the default. Open/ go to the Site tab of the Joomla! 1.5 website and refresh/ reload. For now, the template does not show much except the contents. Take note that the menus are not in display. We'll fix that as we go along.

View the page source of the site, and you will see that the layout is in <table format>. We'll fix that so that the layout will be in <div> format. Close the page source view and switch to the desktop. Open the root directory of your Joomla! 1.5 website, open the "templates" folder. Next, open the "beez" folder, and copy the "html" folder. Paste it inside the "MyTemp" folder.

The directory should be as follows:

Switch back to your browser, and make sure you're in the site tab. Refresh/ reload the page and view the page source. You'll now see the page in <div> layout format. We'll now write the css to layout the page.

Writing the initial CSS

Switch to the admin tab and login if necessary. Pull down the "Extensions" menu, and select "Template Manager". Edit the custom "Smiley_Ice_Cream" template. Click "Edit CSS" on the panel, and then edit "layout.css". Enter the CSS as shown below:

Save the changes you made. The control panel for the template is displayed, click "Edit CSS" and then edit "style.css". Enter the CSS as shown below:

Save the changes. With the first set of CSS completed, we now proceed to editing the HTML.

Editing the HTML

With the control panel for the template displayed, click "Edit HTML". Edit the code as shown below:

Take note of the link to the "layout.css", <div> tags to update.

Click "Apply" button to save the changes you made but keep the edit HTML open.

Adjust the <jdoc:include elements /> as shown below:

Save the changes you made. Click "Save" on the template control panel.

Switch to the site tab and refresh/ reload the page.

Switch back to the admin tab. Edit the custom template, and then click "Edit HTML". Adjust the <div id="banner"> tag as shown below:

Save changes to the HTML and save the custom template.

Switch to the site tab and refresh/ reload the page.

Creating the top menu

With the custom template saved, pull down the "Menus" menu and select "Main Menu". Add the menus "About Us", "Our Products", and "Sign Up". Each menu will have "Article Layout" type and be assigned articles of the same name.

Pull down the "Extensions" menu, and select "Modules Manager". Click "Main Menu" and set the position to "top". Save the changes.

Switch to the site tab and refresh/ reload the page. We'll need to make some adjustment to display the menu in horizontal orientation. View the page source and take note of the CSS leading to the menu. We'll write the CSS for that.

Switch back to the admin tab. Edit the custom template, and then click "Edit CSS". Edit the "syle.css" and add the CSS as shown below:

Save the changes, and save the template.

Editing the Middle Content

We'll have the front page contents to have the leading article at the top and the remaining displayed in three column format below.

Pull down the "Menus" menu and select "Main Menu". Click "Home". On Parameters-Basic, set column to three. Save changes.

Switch to the site tab and refresh/ reload the page. We can still see that the articles after the leading are still in one-column format. View the page source and take note of the <div> class on the remainder articles. We'll write the CSS to adjust. Close the page source.

Switch back to the admin tab. Edit the custom template, and then click "Edit CSS". Edit the "syle.css" and add the CSS as shown below:

Save the changes, and save the template.

Switch to the site tab and refresh/ reload the page. Although the remainder of the articles display in three-columns, their titles are not aligned. We need to write the CSS to correct that.

Switch back to the admin tab. Edit the custom template, and then click "Edit CSS". Edit the "syle.css" and add the CSS as shown below:

We now have the contents displaying properly. We proceed to creating the left side contents.

Creating the "Our Flavors" menu

Make sure that you are in the admin tab and have saved the template. Pull down the "Menus" menu and select "Menu Manager". Click Add to create "Our Flavors" menu. Fill in the info as required and save the menu.

Pull down the "Menus" menu and you will now see "Our Flavors" on the menu list. Select the menu and add the items "Chocolate", "Vanilla", "Strawberry", "Mango", and "Ube". Each menu will have "Article Layout" type and be assigned articles of the same name.

Pull down the "Extensions" menu and select "Module Manager". Edit the "Our Flavors" menu and assign it to the left position. Save the changes.

We now need to create a <jdoc /> element for the left module.

Pull down the "Extensions" menu and select "Template Manager". Edit the custom template, and then click "Edit HTML" and edit the <div id="left"> element as shown below:

Save the HTML, and save the template.

Switch to the site tab and refresh/ reload the page. We now see the "Our Flavors" menu on the left side. We'll make adjustments to improve the apperance. View the page source and take note of the <div> class applied.

Switch back to the admin tab. Edit the custom template, and then click "Edit CSS". Edit the "syle.css" and add the CSS as shown below:

Save the changes, and save the template.

Switch to the site tab and refresh/ reload the page. Experiment by clicking any of the menu item.

We now have the menu working. We are now ready to add a calendar component to the our Joomla! 1.5 site.

Adjusting the php.ini

We will install the jEvents calendar. However, we must adjust some of the settings as jEvents require resources to make it run on our local machine.

From the taskbar, look for the WAMP icon:

Click the icon, move the mouse to Config files and select "php.ini".

The file is displayed in notepad. Use Find to search for "max_execution_time". Increase the setting as shown below:

Save and close the file.

Click the WAMP icon and select "Restart All Services".

We are now ready to install the JEvents calendar.

Downloading JEvents Calendar

On your browser, open a new tab and go to "http://ww.joomla.org". Click "Extensions" link, scroll down to "Events" and look for "JEvents". Click download button.

This takes you to the downloads for JEvents. Look for JEvents 1.5:

Download the component "jevents_rc_b1378.zip" file.

Switch back to the admin tab. Pull down "Extensions" menu and select "Install/Uninstall". Install the downloaded component.

As soon as you are prompted that the install is successful, pull down the "Components" menu and select "JEvents MVC". Follow the instructuctions and save the changes. We now install the modules.

Switch to the JEvents tab and download "mod_jevents_cal", "mod_jevents_switch_view" and "mod_jevents_latest". Switch back to the admin tab, pull down "Extensions" menu and select "Install/Uninstall". Install the modules downloaded.

Pull down the "Extensions" menu, select "Module Manager". Set the "mod_jevents_cal" and "mod_jevents_switch_view" to left module position. Set the "mod_jevents_latest" to right position.

We now need to edit HTML to display the "right" module. Pull down "Extensions" menu and select "Template Manager". Edit the custom template. Click "Edit HTML" and edit the <div id="right_content"> as shown below:

Save the changes to the HTML, and save the template.

We now set the titles for the modules. Pull down "Extensions" menu and change the module titles as shown below:

You can add events by pulling down the "Components" menu, and selecting "JEvents MVC". Click "Manage Events" to add your events to the calendar.