Transferring your website to Joomla
(or creating your website from scratch!)

Thanks to Carol Beck of Fresh Look gifts for putting this guide together,
from her own personal experience of Joomla.

I create personalised gifts which are sold through my website, FreshLookGifts.co.uk. Having worked as a web developer for many years, I created my own basic e-commerce system to run the website. Now that my business is becoming more established and the scope of my product offering is increasing, I need more functionality than my basic system can offer me.

I need to focus my time on creating and developing my gift range, rather than writing website code so I have decided to move to Joomla, an open source e-commerce package.

This tutorial contains information on the steps I've taken to migrate my site to Joomla and links to more in-depth tutorials on individual features. The best way to get to know Joomla is to dive right in - explore the control panel, create new articles, menu items, etc. - and see what happens!

I highly recommend Joomla Tutorials to help you get started - they offer a range of animated tutorials to teach you all the basics. You should also spend time on the Joomla forums - they're full of other people getting to grips with setting up and maintaining a Joomla website, so it's a great way to find answers and tips.

Domains and hosting

Since I already have an existing website (sitting under FreshLookGifts.co.uk and FreshLookGifts.com), I decided to register a different relevant domain name for setting Joomla up.

This means that I can get the system installed, experiment with it, populate with my gifts and fully test it without any interruption to my current website.

Then, once it’s all finished, I can re-direct my domains to point to the new site.

My new domain is: personalisemygift.co.uk.

Joomla CMS 1.5 is available to install under CGI Scripts€� on the MumStores Control Panel front page (near the bottom).

[Top]

Pre Installation Checks

Before running the installation, you need to make sure that your domain name is fully active. When you register a domain name, it can take up to 48 hours or so before typing in that domain actually shows your website - this is called domain propagation.

One easy way to check if a domain has propagated is to create a new document in notepad (or an HTML editor) and write a few words - anything at all! Then save the file as index.html€� and upload it to your âpublic_html folder (overwrite the file that’s already there). Then, type in your domain name and see if your text appears. If you get a message that reads something like this domain name has been reserved for future use€�, then the propagation isn’t complete - try again in a few hours.

Once your domain name is fully up and running, the first step is to check that there are no files in the default directory (called public_html if you’re with mumstores.co.uk), otherwise Joomla won’t install.

You’ll probably find that there ARE files in the directory, simply because most web hosting is setup with a basic default index page (and you’ll have created one if you did the propagation check above).

So, there are two ways to empty the public_html folder.

1. Use File Manager in the Control Panel - it’s the very first option in the Control Panel. Look for the file called “index.htmlâ€�, right-click on it and select “Deleteâ€�.

or

2. Use FTP (File Transfer Protocol). It’s likely that you’ll need to use FTP at some point whilst maintaining your website, so it’s worth getting it set up now. There are lots of free and cheap FTP progs available - I use Filezilla. Once you have your FTP prog installed, set up the connection to your website using the login details contained within your hosting setup confirmation email. The FTP username will be "ftp.yoursite.com" and the password will be in the email.

Connect to your site, select the public_html folder, locate the index.html file and delete it.

That’s it! Now we’re ready to move onto installing Joomla itself

[Top]

Joomla - Basic Installation

The basic installation of Joomla is VERY easy!

From the mumstores.co.uk control panel, click on the Joomla 1.5 icon. On the screen that follows, click Install Now€�. Wait a few moments and you’ll see a message stating that the script has been installed.

Now, go to your website homepage (e.g. www.personalisemygift.co.uk) and follow the on-screen instructions. Most of the default settings are fine and you’ll need to choose a store name, email address etc. as you go along.

I also recommend installing the default data€� (towards the end of the installation) as it’s helpful when you’re getting set up to use as a guide.

Once the installation is complete, you’ll be able to access your spangly new website and administration panel (the access panel is usually located at www.yourwebsite.com/administrator).

[Top]

Update your meta information

Very important! Make sure search engines have the correct META information for your site.

Joomla Control Panel > Global Administration > Metadata Settings

[Top]

Creating your pages

It’s simple to create your pages within Joomla and even easier if you plan ahead with your site structure. If you already have a website, you should already have a structure in place. If this is your first website, you should grab a pen and paper and start thinking about how you’d like your website to work.

Try to think from the point of view of the potential customer browsing your website (the end user€�) - what would he or she want or NEED to know about your website, business, etc. Right now, we’re not talking about individual product details - just general business information.

Think about it in terms of SECTIONS, CATEGORIES and PAGES (referred to as "articles" in Joomla).

I won’t go into detail here, but have a look at the sample data that you installed with Joomla - click through the various sections of the Control Panel and see how they all fit together.

All the content is stored under the "Content" menu on the Joomla administration panel.

You'll find a good tutorial on managing your content at http://www.siteground.com/tutorials/joomla/joomla_content_management.htm

Another site with a huge range of animated tutorials is at http://www.joomlatutorials.com/joomla_tutorials/joomla_1.5_tutorials/content.html.

[Top]

Creating menu items

There are just a couple of steps involved in adding a new item to any of your menus.

First, you need to create page in Content > Article Manager.

Then, once your page has been created and saved, select the appropriate menu from the Menus dropdown. Click the New button (top right) and select Articles > Article Layout. On the page that loads, select your article at the top right by clicking on Select€� next to Find Article€� and fill in the other details as required.

The front page of your website will have Welcome to the Frontpage€� on it, which you might want to remove!

In the administrator, go to Menus > Menu Manager

Along from Main Menu, click the icon underneath Menu Items.

Click on Home

Click on Parameters - System (right hand side) and edit the text!

[Top]

Removing unwanted features

Joomla is packed full of features so there are bound to be some that don’t want to use (not yet, at least!).

You can remove most of the unwanted features just by 'unpublishing' or disabling them in the relevant menu.

For example, I don’t currently want to show banner ads. To remove that feature, I go into Extensions > Module Manager and find Banners€�. Then I click on the green arrow (which means it’s currently enabled) to the right of it, which will change it to disabled. I can change it back again any time.

[Top]

Basic branding - Adding your logo

Pretty essential in branding your site!

I’m using the milky way€� template on Joomla. You can find out which template you’re using by going to Extensions > Template Manager and see what is marked as the default. Then, have a look at the Joomla template forum for tips on making changes to it. The forums are great for getting answers to your questions - and they're free to use!

Changing the header involves using FTP to replace the logo with your own PNG file and making a small change to the CSS (stylesheet).

The filename and path for the above template is:

public_html/templates/rhuk_milkyway/images/

You’ll find the logo file in:

public_html/templates/rhuk_milkyway/images/mw_joomla_logo.png

The CSS file you need to change is:

public_html/templates/rhuk_milkyway/css/template.css

** BACKUP FILES BEFORE MAKING ANY CHANGES **

Overwrite the image file with your own logo, trying to keep the size roughly the same.

Then, in the CSS file, look for this part:

div#logo {
position: absolute;
left: 0;
top: 0;
float: left;
width: 298px;
height: 75px;
background: url(../images/mw_joomla_logo.png) 0 0 no-repeat;
margin-left: 30px;
margin-top: 25px;
}

And change the parts marked in red to match the height and width of your logo.

Re-upload your files and job done!

The text that appears next to the logo is a module called Newsflash. If you want to get rid of it, go to Extensions > Module Manager, find Newsflash€� and click on the green arrow to disable it.

[Top]

Changing the template style

The default Joomla template (Milkyway) comes with several colour options. By clicking on the template name, you can view and change its parameters, including the colour scheme (from a drop-down menu).

I also wanted to change the top menu style, to have my leaf as the divider. To do that, I had to replace the existing menu divider image (templates/rhuk_milkyway/images/mw_menu_separator.png) with my own image.

I then had to go into the stylesheet (templates/rhuk_milkyway/css/template.css) to change the settings for the divider image (I needed to change alignment to be more suitable for my leaf) - #pillmenu li - and the padding for the links on the menu (again, to better suit my graphic) - #pillmenu a. Trial and error is the key here - try out different settings and see what works for your images.

I also chose to change the font to Verdana (the default is Helvetica). To do this, I did a search and replace through the stylesheets to change all instances of "Helvetica" to "Verdana".

If you haven't come across stylesheets before, this CSS tutorial should get you started.

[Top]

Adding e-commerce to your site

While Joomla is a great content management system, it doesn’t provide e-commerce features such as a shopping cart.

I’ve decided to implement Virtuemart, which is available as an extension to Joomla (meaning it integrates seamlessly with your Joomla website). You can download €�Complete package for Joomla 1.5 on the Virtuemart website or on the Joomla website.

Once you have downloaded the files, unzip them then go back to the Joomla administration panel.

Click Extensions > Install/Uninstall

Under Upload Package File, click Browse and locate the file called com_virtuemart_1.1.0.j15³. Select it, then click Upload and Install€�. Wait a few moments until you see a confirmation message. I recommend installing the sample data€� again, using the link provided.

Once that’s done, go back to Extensions > Install/Uninstall and this time look in the modules€� folder for mod_virtuemart_1.1.0.j15 to install it.

You can now enable that module (and change the settings) at Extensions > Module Manager.

Other extensions are available in the zip file you downloaded and on the VirtueMart / Joomla websites for features such as Latest Products€�. You can edit then in the Module Manager and change the settings (e.g. where to position it on your website pages).

If you’ve added in extra left-hand menu options (like links to the Shopping Cart pages), you might find that they don’t have a border around them, like the main menu€� does.

Easy to fix…

Go to Extensions > Module Manager

Find the module you’d like to add a border to (e.g. the shopping cart module) and click on it, then type €_menu€� where Module Class Suffix€� appears.

Once VirtueMart is installed, you can access it by going to Components > VirtueMart. There are various settings to explore within the Admin > Configuration menu and Store > Edit Store. Under Store > Edit Store, you can also upload a logo which will appear on order confirmation emails sent to your customers.

[Top]

Setting your currency

I’m having problems with pound signs - on most pages, they display fine but on the checkout page, the £ sign displays as a J. I’ve had a look around for a solution, but no luck yet.

So, for the time being, I’m setting my currency symbol as GBP instead of £.

To do that, I go to:

Components > VirtueMart > Store > Edit Store and edit the settings under Currency Display Style€�.

[Top]

Adding a search feature

VirtueMart comes with a search module, which you can install through Extensions > Install/Uninstall.

Browse your computer to the virtuemart folder you unzipped when you first downloaded it, go into the Module sub-folder and look for mod_virtuemart_search_1.1.0.j15.

Once installed, you can manage the feature in Extensions > Module Manager and modify its settings, placement etc. (it’s called Virtuemart Search€�). I chose to position it at the very top of the page (next to the logo) - set the Position setting to top€� on the Module Manager. Then, I went into the stylesheet to right-align it - the stylesheet is /templates/rhuk_milkyway/css/template.css and the line in question is:

div#header_r {
height: 90px;
padding-left: 370px;
padding-right: 30px;
padding-top: 25px;
overflow: hidden;
text-align: left;
}

to change to

div#header_r {
height: 90px;
padding-left: 370px;
padding-right: 30px;
padding-top: 25px;
overflow: hidden;
text-align: right;
}

[Top]

Creating invoices

In the current release of VirtueMart, there is no printable invoice / receipt facility.

However, an extension has been created and can be downloaded from http://www.phoca.cz/articles/virtuemart/virtuemart-invoice-delivery-note-receipt/index.php?download=en. Installation instructions are also on that page.