10 Great, Mobile-Ready Joomla Templates

You probably know that Joomla has made great progress in becoming mobile-ready.

Joomla 3 was the first major CMS to be completely mobile-ready for visitors and administrators.

Joomla template designers are also making great progress in preparing for mobile use.

Here are 10 of the best mobile-ready Joomla templates:

Read more: 10 Great, Mobile-Ready Joomla Templates

Magic Quotes Error With Joomla 3 Installation

We've had a few members report a problem when installing Joomla 3.

Basically their hosting service is out-of-date or incorrectly set up. During the installation they get an error message saying that something called "Magic Quotes" needs to be turned off.

Here's an explanation of that problem and how you can fix it.

Read more: Magic Quotes Error With Joomla 3 Installation

How to Update from Joomla 3.0.0 to Joomla 3.0.1

This tutorial will show you how to update from Joomla 3.0.0 to 3.0.1, which is a bit different than normal.

Read more: How to Update from Joomla 3.0.0 to Joomla 3.0.1

JFusion Integrates Joomla With Other Software

jfusion logojFusion is one of the best and most reliable ways to share users between Joomla and other software.

jFusion allows you to share Joomla user accounts with a long list of other software including WordPress, Magento, Mediawiki, Moodle, Os Commerce, PHBB, SMF, Vbulletin, Docuwiki, Efront, Gallery2 and more.

Read more: JFusion Integrates Joomla With Other Software

How to Make A Joomla Module

Modules are one of Joomla's greatest features. It's amazing how simple it is to make one. We're going to show you how to get started making the simplest basic module. In subsequent lessons, we'll be adding functionality to this basic module and help you master all the steps.

Step 1: Create a directory structure.

tutuploadsmedia_1348601205600.png

Use FTP or a file manager and create these directories inside the module directory of your Joomla Site. /public_html/modules/mod_firstmodule /public_html/modules/mod_firstmodule/templ /public_html/modules/mod_firstmodule/language /public_html/modules/mod_firstmodule/language/en-GB

Note that the directory starts with mod_ followed by the name of the module. It's easy to see that all the directories follow this naming convention. The most important files also follow this convention. This is an important part of making the module work.

Step 2: Make a blank index.html file for each directory.

tutuploadsmedia_1348602040736.png

This is a security feature and good practice any time you create a directory on the server.

Next create the actual first file that will start to define your module. There are two all important files the .php file and the .xml file.

Both of them have similar names that follow the same naming convention as the folders. Maintaining the names throughout the module is very important.

  • mod_modulename.php
  • mod_modlulename.xml

Step 3: Create mod_firstmodule.php

tutuploadsmedia_1348613638396.png

Use the naming convention and create a file called mod_firstmodule.php Include these items.

  1. PHP opening tag
  2. A doc bloc with an ID
  3. Access restriction
  4. An include directive
  5. Closing PHP tag
  6. Some content in an html tag

The access directive limits access to the rest of the file from any non-joomla scripts. In other words, if it's not from Joomla, "die" or stop all further action.

The include is going to require that the contents of the helper.php file are read into this file at run time, before anything else. You can use the require directive to include css files, additions or modifications. You can modify the required file and never have to modify the main file. It's a very handy technique for programming.

You don't always need a helper file, so you won't always need a require directive. We are including one so we can demonstrate all the basic techniques you will need to create a module.

Step 4: Create mod_firstmodule.xml

tutuploadsmedia_1348604282622.png

The most important lines in the first section.

Line 1 - open xml and specify encoding Line 2 - It's important to specify the version as 2.5 in the opening extension tag. (remember to close this at the end of the file). Line 3 - The name of the module Line 11 - Be sure to add a description. We are going to show you how to use a variable in that position in a later step.

Opening Code

<?xml version="1.0" encoding="utf-8"?> <extension type="module" version="2.5" client="site" method="upgrade"> <name>mod_firstmodule</name> <author>Joomla! Project</author> <creationDate>February 2010</creationDate> <copyright>Copyright (C) 2005 - 2012 Open Source Matters. All rights reserved.</copyright> <license>GNU General Public License version 2 or later; see LICENSE.txt</license> <authorEmail>This email address is being protected from spambots. You need JavaScript enabled to view it.;/authorEmail> <authorUrl>www.ostraining.com</authorUrl> <version>2.5.0</version> <description>My First Module</description>

 

Defining the files

tutuploadsmedia_1348608202131.png

The other important sections that must be included.

Files - this specifies the folders and files that will be a part of this module.

  • includes all the files in that folder recursively
  • includes an individual file.

Language - this section includes language files and language strings. If you look at some of the core modules you will see this section because they have placed the language files directly in the languages folder. You can also include a custom language folder for your module. The advantage to a custom folder is that it won't be eliminated by upgrades and your module will be a self-contained unit. We'll be showing you how to create you're own language folder.

 

Configuration and fieldsets

tutuploadsmedia_1348608314517.png

The config section contains the fields and their parameters. Notice that is a tag with an opening and closing . is the closing tag that was opened in line 2 at the top of the file.

<config> <fields name="params">

<fieldset name="basic">

<field name="parent" type="category" extension="com_content" published="" label="First Module Label" description="My First Module Ever"/>

</fieldset> </fields>

 

Step 5: Create helper.php

tutuploadsmedia_1348612327396.png

Create a helper.php file with an opening php tag Add the access restriction. Close the PHP tag. Add some HTML

Actually a helper.php file is not necessary to operating a module. If you look at the directories for other modules, you'll see many that don't have it. We need to write one for this example, though.

Why do we need one? When I asked you to write the mod_firstmodule.php file, you put in a line that required the helper.php file. If you ask for it, but you don't have it, Joomla is going to give you an error message that the file wasn't found. If you don't want to use one, don't use the "require" in the .php file.

For now let's just include a minimal one so we don't invite an error. More on this later.

<?php /** * @package Joomla.Site * @subpackage mod_firstmodule * @copyright Copyright (C) 2005 - 2012 Open Source Matters, Inc. All rights reserved. * @license GNU General Public License version 2 or later; see LICENSE.txt */

defined('_JEXEC') or die; >? <p>Let's put a greeting here</p>

Let's put a greeting here

 

Step 6: Check your work by installing the module

tutuploadsmedia_1348609969421.png

Here's what your public_html/modules folder should look like at this point. Now go to your Joomla administration. Go to Extension Manager. Click the Discover Tab. Purge Cache Click Discover.

If you have made any php errors, you'll be getting an error message right after you click Discover. If you get any messages, clean up the code before going any further.

Install your new module.

tutuploadsmedia_1348608816018.png

After installation, Go to Module Manager > New. Find your first module in the type list.

tutuploadsmedia_1348608902439.png

Assign it to pages and give it a title just like any other module. Enable it in a visible position on your site. Publish it.

tutuploadsmedia_1348609067461.png
tutuploadsmedia_1348612719951.png

Check your module on your site. You'll see your module title and the text you added to the helper file and the .php file.

Congratulations, you've just written your first module. It doesn't do much, be we'll be showing you how to expand on this as we go.

A Video on Understanding Joomla Versions

Joomla 2.5There are three versions of Joomla available at the moment.

  • 3 is the latest new version.
  • 2.5 is the current, popular version.
  • 1.5 is the older, reliable version.

With three versions around, we decided to make one simple, straightforward video that would explain how Joomla versions work and which one you should use. Here's that video:

Read more: A Video on Understanding Joomla Versions

8 Joomla 3 Improvements You Probably Missed

Joomla 3 Mobile

Joomla 3 has due out this week and has some great new features. 

You probably already know about the most important feature: Joomla 3 will be the first major CMS to be completely mobile-friendly.

This week, we've found 8 of the smaller improvements that you might not notice at first, but that we think you'll find really useful.

Read more: 8 Joomla 3 Improvements You Probably Missed

Migrate Joomla 1.5 to 2.5 with SP Upgrade

With the stable nature of Joomla 2.5 and the arrival of Joomla 3, the Joomla project will phase out support for Joomla 1.5. 

In this tutorial, we're going to show you how to migrate from 1.5 to 2.5 by using the SP Upgrade extension.

Read more: Migrate Joomla 1.5 to 2.5 with SP Upgrade

How to Use Joomla's Kunena Forum

kunena logoKunena Forum is a discussion forum for Joomla sites.

Kunena is flexible, well maintained and easy to use. As a result, Kunena is currently the most popular extension on the Joomla Extensions Directory.

In this tutorial we'll show you to how to install, configure and use Kunena.

Read more: How to Use Joomla's Kunena Forum

SP Upgrade Part 2

Step 11. Template - Using a different template

tutuploadsmedia_1347496495160.png

The actual content has been moved, and we've chosen the Beez2 template for the demonstration.

You don't see any of the modules. The old template, rhuk_milkyway, had completely different module positions than the new beez2 template.
Go to the module manager and reposition all the modules.

Below we'll touch on the process involved in making everything show on a new template.

Step 12: Template - finding alternate module positions

tutuploadsmedia_1347650655925.png

You can get instructions on finding the module position view from this tutorial: http://www.ostraining.com/blog/joomla/how-to-find-the-module-postions-in-a-joomla-16-template/

tutuploadsmedia_1347650791479.png

Find the site module positions by using http://yourdomain.com/?tp=1 This function is automatic in Joomla 1.5 and you won't need to go to the admin to enable it. Just go directly to the url.

Step 13: Template - Reassign modules to new positions.

tutuploadsmedia_1347497213077.png

The Module Manager in the source site shows you that they are mostly in the "left" position. On the Beez2 template that would correspond to position-7, so we'll have to manually go through the modules and reposition them for the new template. Not a problem if you have an updated version of the same template. All the positions will be the same, so you won't need to go through this step.

This is an illustration of what you may need to if you're forced to change templates.

Step 14: Template - Adjust module positions on the destination site.

tutuploadsmedia_1347497534939.png

You will need to open each module and change it's position if you are using a different template with different positions.

While you are doing this, scroll down on the configuration page, check the menu assignments and the basic options as well to make sure everything is the way you want it. Menu assignments won't necessarily be transferred.

tutuploadsmedia_1347498078488.png

Positions may not correspond exactly. You might have to make arbitrary decisions on what "right "or "user2" or "user4" would translate to best. The "top" position in the new template isn't designed to display the same as the source template. So even though the position is the same name, you might need to consider changing the contents of "top" to another position.

You can use http://yourdomain.com/?tp=1 to see what positions you have available and make comparable choices. If you don't know how to do that, we have a tutorial which will show you exactly how to reveal the module positions on a Joomla 2.5 template.

Take a look at the site so far.

tutuploadsj25upgrade1.png
  1. Newsflash looks bad.
  2. Latest News Module and Popular module are stacked instead of side by side and titles don't show.
  3. Polls module is missing
  4. Advertisement is images instead of text links.
  5. Logo is missing

Article teasers are a bit long. The typography and spacing is a bit different, but that's what you'd expect from different templates. These kinds of problems need to be dealt with by modifying your style sheets and modifying the individual articles that don't display well in the new template

Let's start at the top with Newsflash.

tutuploadsmedia_1347653949620.png

On the old template Newsflash in the "top" position.
In the new template it's assigned to position-0. Making this fit here means adding a module position or complicated CSS changes. I've decided to just leave it out.. You could try to put it in another position.

Step 15. Template - Check all module configuration and page assignments

tutuploadsmedia_1347577148169.png

Fix the Advertisement module.
Go to Extensions > Module Manager.
Open the options for the module you want.
Review all the settings.

In this case, the category selection in the Basic Options was not transferred.
Change that to Text Ads.

Make sure the modules are enabled, published and assigned to the correct pages.

tutuploadsmedia_1347647319316.png

Check Menu Assignments.
If you look at the source site you'll see that this module only appears on the home page. But in the transfer On all pages was selected. So go through your module options if something isn't the same.

Do the same thing for the Popular and Latest News modules. Unfortunately, These modules just don't look right in the positions I originally chose. It would take some complicated template and CSS changes, which is just way beyond the scope of this tutorial. The easy answer - move them to a position where they fit better. I moved them both to position-5 where they look good in tabs.

tutuploadsmedia_1347816609818.png

Just continue to check all your pages and make adjustments.
Be sure to click all menu items to check for possible alias changes or any Page Not Found errors.

Now let's deal with any problems you might have had with transferring data from third party extensions in the source site to the destination. I included RocQuickcart here as a demonstration.

If you have extensions that you uploaded go to the extension and check the data. In this case you can see that the sample data was loaded when I installed the component, but there are no products except the samples.

tutuploadsmedia_1347817943031.png

Go to Components > SP UPgrade > Database Transfer

tutuploadsmedia_1347818107364.png

Scroll down and find the -- quickcart database table.

tutuploadsmedia_1347818173653.png

Click Choose.

tutuploadsmedia_1347818300610.png

Choose the data by clicking the checkbox.
You can choose all by clicking the box in the title bar, or you can scroll down and click just the data you want to transfer.
Click the Choose Icon when you're done.

You will be returned to the previous page and you'll see your choices.

tutuploadsmedia_1347818446996.png

Confirm that the item is checked.
You will see the Item ID's of the what you chose in the field.
Go back to the top of the page and click the Transfer icon.

tutuploadsmedia_1347818611797.png

Return to the component and check your product list. You will see that your products have been transferred.

From here it's a process of checking all the details and making changes if needed. With what you've learned here, you should be able to deal with any problems that might come up.

Step 16: Go live with the new site.

tutuploadsmedia_1347820208746.png

The steps are simple.
1. Empty the main Joomla directory. Completely move or remove all the existing files.
2. Copy all the new files from the J25 insulation to the main directory.

I'll demonstrate using the cPanel file manager.

tutuploadsmedia_1347820364733.png

Go to cPanel and open the file manager. Navigate to your main Joomla folder.
Create a new directory to move the files to. I named mine SAVEORIGINAL. (tip: Remember that file and folder names onLinux-type servers are case sensitive)

Use the move icon on your file manager toolbar or the drag and drop method and move all the files and folders to the SAVEORIGINAL directory.
Note that I am not moviing my original destination directories. (j25, J252 and J253 - i did the migration three times).
You can't move a directory into itself, so un-select the SAVEORIGINAL folder.

You're host may have a different manager, so the look might be different, but the steps are the same.

Move the files instead of deleting them. That way you have a backup and can move them back if anything goes wrong.

Your directories will look like this after the move.

tutuploadsmedia_1347820957637.png

Open the folder that contains your migrated Joomla 2.5 installation.
Copy all the files to your main directory. In this case I will copy the entire contents of J25 to the public_html directory.

tutuploadsmedia_1347821325614.png

Copy instead of move.

The built in advantage to copying instead of moving is that you will have preserved the original. If anything happens you can always copy it again.

Don't actually delete anything until you are absolutely sure you're done.

Your public_html directory should look like this.

tutuploadsmedia_1347821516644.png

Visit your page. Do a final check of all links and images.

You're done!

tutuploadsmedia_1347821654650.png