Summer Sale: You can get 1 year of the Everything Club for $59! Save $85!
  Offer ends in 1
Join today and get access to 1,000's of books and videos. Learn WordPress, Drupal, Magento, Joomla and more! Sign up today!

| Joomla

This tutorial will show you how to upload Joomla files to your server using the CPanel provided by your hosting company. There are many possible reasons to do this. The reason we wrote this tutorial was the request of a student whose files had been hacked. They needed to restore a clean set of Joomla files over the top of those that had been corrupted.

Visit Joomla.org

tutuploadstutuploadsmedia_1274795948572.png

Visit joomla.org and click on the black "Download Joomla" button on the right.

Download Joomla

tutuploadstutuploadsmedia_1274796056203.png

Download the Joomla files that you need by clicking on the "ZIP" link. In this case, we'll be using the latest version.

Login to Your Cpanel

tutuploadstutuploadsmedia_1274796166158.png

Often you can access your CPanel just by adding /cpanel to your domain name ... example.com/cpanel

Access Your File Manager

tutuploadstutuploadsmedia_1274796308517.png

Although your screen may not look 100% identical to the one above, every version of Cpanel does come with a "File Manger" option somewhere.

Go to Your Web Root

tutuploadstutuploadsmedia_1274796380150.png

Visit the Upload Area

tutuploadstutuploadsmedia_1274796419769.png

If You Want to Overwrite Existing Files

tutuploadsmedia_1274797883287.png

If you're looking to overwrite existing files, be sure to make a backup of your configuration.php file. You'll need that for your site to continue to run properly.

Upload Your Files

tutuploadstutuploadsmedia_1274796786619.png

Hit "Browse" and select the Joomla files that you downloaded earlier.

Extract Those Files

tutuploadsmedia_1274798122468.png

Extract the Joomla files using the "Extract" button.

Final Steps

tutuploadsmedia_1274798313437.png

If you want to replace your existing Joomla site and keep your site running, you'll now need to do two more things:

  1. Re-upload your configuration.php using the configuration.php process as before
  2. Delete the installation folder as per the image above

| Joomla

Find the AllVideos Plugin

tutuploadsmedia_1274453621090.png

Visit http://extensions.joomla.org/extensions/multimedia/video-players-a-gallery/812 for the download link for the AllVideos plugin

Login to Your Joomla Site

tutuploadsmedia_1274453756271.png

Login to the /administrator/ area of your Joomla site and go to Extensions >> Install/Uninstall

Upload the AllVideos Plugin

tutuploadsmedia_1274453890030.png

Click on "Browse" to find the AllVideos file and then click "Upload File & Install"

Go to the Plugin Manager

tutuploadsmedia_1274453993754.png

Enable the AllVideos Plugin

tutuploadsmedia_1274454067731.png

Check the box next to "AllVideos (by JoomlaWorks) and click "Enable"

Go to the Global Configuration

tutuploadsmedia_1274455027913.png

Allow Uploads of MP3 Files

tutuploadsmedia_1274455127411.png

Click on "System" and add "mp3" to the field called "Legal Extensions (File Types). Click "Save" in the top-right corner.

Go to the Media Manager

tutuploadsmedia_1274454281627.png

Visit Site >> Media Manager

Open the /stories/ Folder

tutuploadsmedia_1274454348665.png

Double-click on the /stories/ folder to open it up.

Create a Folder Called /audio/

tutuploadsmedia_1274454472862.png

At the top of the page, enter /audio/ into the box and click "Create Folder".

Open the /audio/ folder

tutuploadsmedia_1274454556487.png

Double-click on the /audio/ folder to open it up.

Upload Your MP3 File

tutuploadsmedia_1274454694188.png

Browse for your MP3 file and click "Start Upload". A warning ... many MP3 files are large. You may have to contact your hosting company and ask them to permit larger uploads.

Check the Upload

tutuploadsmedia_1274455577363.png

Hopefully your file will now show as being correctly uploaded.

Open an Article

tutuploadsmedia_1274455759795.png

Write in the AllVideos Code

tutuploadsmedia_1274455884768.png

The code you need to use is this {mp3}filename{/mp3}. If the file is called filename.mp3 you don't have to include the .mp3 part.

Check the Audio File is Working

tutuploadsmedia_1274456140352.png

The file should being playing inside your article, as in the screenshot above.

| Security

Good day,

Waaaaaay back in January, I took the time in this column to discuss with you the concept and need to patch your site. Since that article was written till now (May 16, 2010) there has been about 180 report vulnerabilities for Joomla extensions. And some number of them for the Joomla core (to be fair only a few).

Given that you might be using one of these, its important to revisit this highly important topic.

Read more ...

| Joomla

Save and Apply Buttons

tutuploadsmedia_1273793540132.png

Many, many screens in a Joomla site have both "Save" and "Apply" Buttons. This tutorial will show you the difference between the two.

Go to SIte >> Global Confiuration

tutuploadsmedia_1273793610525.png

Change the Site Name Field

tutuploadsmedia_1273793670174.png

Change the "Site Name" field to something different (this is just an example, you can try changing anything on any page with a Save and Apply button).

Click Apply

tutuploadsmedia_1273793742631.png
  1. Click on Apply
  2. Notice that there's a message "The Global Configuration details have been updated"
  3. Notice that you're still on the same "Global Configuration" page

Click Save

tutuploadsmedia_1273793867830.png

This time we'll try clicking the "Save" button.

tutuploadsmedia_1273793945123.png

This time you still get the "The Global Configuration details have been updated" message but now you've been logged out of the screen.

So what's the difference between Save and Apply?

  • "Save" saves your changes and forces you out of the current screen
  • "Apply" saves your changes but keeps you on the current screen

| Joomla

This tutorial will show you how to get text to wrap neatly around your images inside Joomla articles.

Place Your Cursor in an Article

tutuploadsmedia_1273756985924.png

I want my image to appear at the top of the article so I'm going to place my cursor before the first text.

Use the Image Button

tutuploadsmedia_1273757040201.png

Scroll to the bottom of the article and click on the Image button

Click on an Image

tutuploadsmedia_1273757330201.png

Click on the image you want to use and its location should appear in the "Image URL" field. Then (and most importantly) chose either "left" or "right" from the "Align" dropdown. Finally, you can can click on "Insert".

Example of Align Right

tutuploadsmedia_1273757521082.png

This is what your image and text will look like if you choose "right" in the "Align" dropdown.

Example of Align Left

tutuploadsmedia_1273757605346.png

This is what your image and text will look like if you choose "left" in the "Align" dropdown.

Update February 7, 2009: I have now written an an article on how to move your Joomla! 1.5 site to a new server.

Things happen. Plans change. Websites outgrow current servers and need new servers. Hosting companies provide poor service, prompting a web master to decide to change servers. Whatever the reason, you might need to move your Joomla! installation from one server to another.

If you've been running a website for a while, you have probably already accumulated quite a bit of content and several 3rd party components and/or modules, and you do not want to start fresh with a new Joomla! installation. This article explains what I did to move HowToJoomla from my test server (howtojoomla.corywebb.com) to the server that it is on now.

Read more ...

| Joomla

This will show you how to add code to your Joomla site footer. Often websites such as Google Analytics will ask you to place code at the very bottom of the your site. They do this so that if their code doesn't load, your site still will. If the code was at the top of the site and had a problem, your whole site would go down.

Login to Your Joomla Site

tutuploadsmedia_1273587493154.png

Go to example.com/administrator and login to your site.

Go to the Template Manager

tutuploadsmedia_1273587541493.png

Click on "Extensions" and then "Template Manager"

Open Your Default Template

tutuploadsmedia_1273587690869.png

rhuk_milkyway is my default template so I'll click on that name.

Open the Template Files

tutuploadsmedia_1273587749835.png

Click "Edit HTML" in the top-right corner.

Enter Your Code

tutuploadsmedia_1273587819052.png

Scroll all the way to the bottom of the page and post your code right above the final lines: . Then click "Save" in the top-right corner and you'll have finished.

| Joomla

This tutorial was written for a student who wanted two copies of this template - one narrow and one wider. More advanced frameworks such as Gantry can do this, and Joomla 1.6 will be able to do it.

However, the easiest way to do this in Joomla 1.5 is to make two copies of your template that you can modify separately. Here's how to do it:

Login to Your Hosting Account

tutuploadsmedia_1273508401924.png

You can login via your hosting company's site or you could go via FTP. Essentially you just need a way to get to your files.

Find Your File Manager

tutuploadsmedia_1273508439999.png

Every hosting company should give you access to your files, althought the access may be in different places with each host. This is an example from the popular CPanel software.

Find Your Templates Folder

tutuploadsmedia_1273508517344.png

We're going to open up the folder that contains our templates.

Copy Your Template

tutuploadsmedia_1273508579840.png

Select the "rhuk_milkyway" folder and click "Copy"

Choose a New Template Folder Name

tutuploadsmedia_1273508737371.png

Choose a new name for the folder. In this case, I'm simply going to call it "rhuk_milkyway_copy" and click "Copy File(s)"

Open Up Your New Template Folder

tutuploadsmedia_1273508825430.png

Open Up the templateDetails.xml File

tutuploadsmedia_1273508849941.png

Check the box next to "templateDetails.xml" and select any of the editing options. templateDetails.xml is the table of contents for our template and contains all of the identifying information that Joomla needs.

Change the template name

tutuploadsmedia_1273509045960.png

Inside the fields, change the name of the template to something that clearly identifies it as a copy.

Access Your Template Manager

tutuploadsmedia_1273509130425.png

Now if you go to Administrator >> Extensions >> Template Manager you should see the two copies of the same template.

| Drupal

We're going to be adding a block position to a Drupal 6 theme called ShallowGrunge: http://drupal.org/project/shallowgrunge

The Goal

tutuploadsmedia_1273256567138.png

One of our students wanted to put a block position inside the red header bar. If you haven't done so already, download and install ShallowGrunge: http://drupal.org/project/shallowgrunge

The Current Blocks

tutuploadsmedia_1273256707673.png

Currently there is only a "content" and a "right sidebar" region.

Finding Where to Insert

tutuploadsmedia_1273257642831.png

I'm using the WebDeveloper toolbar for Firefox to help me identify the red header bar's area. I click on CSS >> View Style Information and then click on the area. The toolbar tells me that the area is called #menu

Opening the Files

tutuploadsmedia_1273256831165.png

In your site files, navigate to sites / all / themes / shallowgrunge / shallowgrunge.info and open that file

Add the Region Name

tutuploadsmedia_1273257117855.png

This file contains all the information Drupal needs to know about the theme. Now we're going to tell it about our new region. Currently only two regions are defined in this file. You'll need to add another using this line: regions[header] = Header

Open page.tpl.php

tutuploadsmedia_1273257231150.png

The file that controls the layout of our theme is page.tpl.php so let's open that up.

Add the Region Code

tutuploadsmedia_1273257391775.png

We scroll down in the file until we find the div called "menu" and we can insert our block code into there. The syntax is:

Check Your New Region

tutuploadsmedia_1273257562262.png

Check back in Administer >> Site building >> Blocks and your new "header" region should show.

| Joomla

This tutorial will show you how to move a Joomla site from one directory to another using CPanel. One common reason for doing this is to move Joomla from a test folder and make it live. Joomla 1.5 makes this process very easy.

Login into your CPanel

tutuploadsmedia_1273177729964.png

Often you can access your CPanel just by adding /cpanel to your domain name ... example.com/cpanel

Access the File Manager

tutuploadsmedia_1273177795056.png

Although your screen may not look 100% identical to the one above, every version of Cpanel does come with a "File Manger" option somewhere.

Choose to Go to the Webroot

tutuploadsmedia_1273177848646.png

Open Your Test Folder

tutuploadsmedia_1273177958153.png

Select All the Files

tutuploadsmedia_1273177994215.png

Click on Move File

tutuploadsmedia_1273178045406.png

Move to /public_html/

tutuploadsmedia_1273178196171.png

Check Your Site

tutuploadsmedia_1273178304131.png

Visit the front of your site in its new location and verify that everything is working correctly.

Login to Your Joomla Site Administrator

tutuploadsmedia_1273178421982.png

Go to Site >> Global Configuration

tutuploadsmedia_1273178514353.png

Change Path to Log folder

tutuploadsmedia_1273178631118.png

Change that setting to remove your /test/ folder

Change Path to Temp-folder

tutuploadsmedia_1273178784889.png

Change that setting to remove your /test/ folder. Click "Save" in the top-right corner.

| Joomla

This tutorial will show you how to find the right width for your site.

Find Your Own Screen Width

tutuploadsmedia_1272732057139.png

First, we'll find the current width of your screen so you can have an idea of how large these sizes are. Most of the time it will be in your computer settings:
- For my Mac its Apple icon >> System Preferences >> Displays
- For my PC its Start >> Control Panel >> Display >> Settings
In this case my screen is 1680x1050.

Find Your Visitors Most Common Screen Sizes

tutuploadsmedia_1272732169985.png

Your own screen probably isn't the best width to use. I'd go to Google Analytics and check what the most common screen sizes are for your site visitors. Go to Visitors >> Browser Capabilities >> Screen Resolutions.

Examine the Screen Sizes

tutuploadsmedia_1272732267162.png

Generally the more tech-savvy your visitors, the large the screen. In this case it wouldn't make much sense to have a narrow website width. Ideally our site will be at least close to 1000px. Increasingly widths of around 960px are common.

| Joomla

This is one common solution if you're getting a "404 Not Found" error when visiting your Joomla administrator area. The problem often lies with a good and useful product called JSecure. You normally have to remember a specific URL that was set in the administrator area. For example: mysite.com/administrator?mysecretcode. This stops people from trying to guess your login, but if you forget your secret code ...

Do you see this screen?

tutuploadsmedia_1272638308697.png

If you do, the problem is JSecure. Have you really forgotten your secret code? If so, read on ...

Login to Your Hosting Account

tutuploadsmedia_1272638486132.png

Or you could go via FTP. Essentially you just need a way to get to your files.

Find Your File Manager

tutuploadsmedia_1272638559684.png

Every hosting company should give you access to your files, although the access may be in different places with each host. This is an example from the popular CPanel software.

Browse to /Plugins/System/

tutuploadsmedia_1272638742315.png

You need to access the /plugins/ folder than then the /system/ folder.

Find JSecure.php

tutuploadsmedia_1272638817604.png

Rename the File

tutuploadsmedia_1272638910923.png

Just give jsecure.php a different name and save it. Next time to try to access your site, the 404 error should have gone.

| Joomla

This purpose of this tutorial is to show you how to find and fix problems with your Joomla templates. We're going to focus on CSS (or Cascading Style Sheets) because they control very common issues such as fonts, colors and padding.

Download and Install Firefox

tutuploadsmedia_1272633877883.png

No question about it, Firefox is the best tool you can find for fixing problem on your website. Download from http://www.mozilla.com/firefox and install.

Install the Web Developer Plugin

tutuploadsmedia_1272633999346.png

Firefox is useful for the same reason as Joomla ... it has 1000s of amazing addons. The one we're going to use is called "Web Developer". Visit https://addons.mozilla.org/en-US/firefox/addon/60 in your Firefox browser and click "Add to Firefox".

Visit Your Joomla Site

tutuploadsmedia_1272634190531.png

We're going to use the default Joomla for this tutorial.

Diagonse Your Problem

tutuploadsmedia_1272634282384.png

In this example, our welcome message is too small. We'd like to have "Welcome to the Frontpage" in larger text.

Start the Webdeveloper toolbar

tutuploadsmedia_1272634412205.png

Click "CSS" in the toolbar and then click "View Style Information"

Click the item you want to edit

tutuploadsmedia_1272634541732.png

Hover your mouse over any part of the page and a red box will appear around it. Click on that area.

See the CSS Code at the bottom of the page

tutuploadsmedia_1272634659128.png

At the bottom of the page you'll get a lot of information about why that item on your site looks like it does. Here's what's controlling the "Welcome to the Frontpage" line:
1: The file with it's exact location
2: The exact line number inside that file
3: The code at that line number
In this case you can see that the font-size is 1.5em. We'll need to increase that number.

Login to Your Joomla Site

tutuploadsmedia_1272634994062.png

Go to Extensions >> Template Manager inside your site

Click on Your Template Name

tutuploadsmedia_1272635089404.png

Click "Edit CSS"

tutuploadsmedia_1272635142542.png

Open Your Template' CSS File

tutuploadsmedia_1272635315354.png

Browse down to find the template you saw in the previous step called "Find the CSS code at the bottom of the page". Click "Edit" in the top-right corner.

Copy Your Test into an Editor

tutuploadsmedia_1272635529610.png

I'm using Notepad in this example, but any text editor will do. If you have a code editor with line numbers, even better!

Backup, backup, backup, backup, backup, backup!!!

tutuploadsmedia_1272635612434.png

If you're doing this for the first time, you will make mistakes. Backup your file so that you can roll back those mistakes when they happen.

Find Your Code to Change

tutuploadsmedia_1272635729434.png

Search for the code that you find earlier in the tutorial.

Change the Code

tutuploadsmedia_1272635783420.png

Especially when you're getting started, this may involve some trial and error. In this example, I'm going to increase the font-size from 1.5 to 1.7.

Paste Back into Your Joomla Site

tutuploadsmedia_1272635839610.png

Paste the code back into your Template Manager and click "Apply".

Check the Change

tutuploadsmedia_1272636023502.png

Great - in this case the change worked and text is larger. If you the change isn't just what you want, you'll need to go back a few steps to "Change the Code" and try again.

Some Notes

1) This is a process of trial-and-error. Don't expect to get it right first time, ever time.
2) Make one change then check. Make one change then check. If you do that, it's easy to spot a mistake. However, if you make wholesale changes before checking, it will be very difficult to find where you went wrong.
3) If you want to move faster, get an FTP Editor that will allow you to edit this files more quickly and accurately. That however, is for another tutorial :)

| Joomla

Changing your htaccess.txt file to .htaccess is important in Joomla because it allows you to enable Search Engine Friendly URLs. It's also an important step to help keep your site safe. Here's how to do it.

Login into your CPanel

tutuploadsmedia_1272129282550.png

Often you can access your CPanel just by adding /cpanel to your domain name ... example.com/cpanel

Access the File Manager

tutuploadsmedia_1272129431172.png

Although your screen may not look 100% identical to the one above, every version of Cpanel does come with a "File Manger" option somewhere.

Choose to Go to the Webroot

tutuploadsmedia_1272129576321.png

Find htaccess.txt

Your files and folders will be listed alphabetically. Scroll down until you find htaccess.txt

tutuploadsmedia_1272129827132.png

Check the box next to htaccess.txt and click "Rename" at the top of the page.

Change the file name to .htaccess

tutuploadsmedia_1272130002148.png

Enter .htaccess as the new file name and click "Rename File"

| Joomla

This tutorial will show you how to display a Google Calendar inside your Joomla website.

Go to Your Google Calendar

tutuploadsmedia_1272046789496.png

Go https://www.google.com/calendar, login and and click "Settings" in the top-right corner.

Find the Calendar ID

tutuploadsmedia_1272046955739.png

Click on "Calendars" and then click on the name of your calendar. Scroll down to "Calendar Address" and copy the "Calendar ID" to your notepad. It will have a long string of characters and then @group.calendar.google.com

Make the Calendar Public

tutuploadsmedia_1272047075763.png

Click "Share This Calendar", check the box next to "Make this calendar public" and click "Save".

Download the GCalendar Component

tutuploadsmedia_1272044364223.png

Now that you have your Google Calendar set up correctly, we're going to install the necessary Joomla component. Visit http://g4j.laoneo.net to download the GCalendar component

Extract the GCalendar Folder

tutuploadsmedia_1272044636422.png

Click on the GCalendar folder and extract it so you can see the various extensions inside.

Install GCalendar

tutuploadsmedia_1272044447710.png

Go to Extensions >> Install/Uninstall and click "Browse" to upload com_gcalendar

Go to the GCalendar Component

tutuploadsmedia_1272045144592.png

Go to Components >> GCalendar >> GCalendars

Creating a New Calendar

tutuploadsmedia_1272046386573.png

Click "New" in the top-right corner. You'll see three fields. You only need to give the calendar a title and enter the "Calendar ID" you found and saved earlier. Click "Save"

Make a Menu Link to the Calendar

tutuploadsmedia_1272045038607.png

Go to Menus >> Main Menu >> click "New" >> choose "GCalendar"

Choose the Calendar

tutuploadsmedia_1272046474164.png

Choose the calendar you created and click "Save".

Your Calendar Should Be Ready ...

tutuploadsmedia_1272046596590.png

| Joomla

Docman is perhaps the most popular way to handle documents in Joomla. This tutorial will show you how to use it.

Download Docman

tutuploadsmedia_1272041248125.png

Visit http://www.joomlatools.eu/docman-14.html and download Docman v1.4.0. There is a more modern version of Docman that is commercial. We're using the free version in this tutorial.

Enable the Legacy Plugin

tutuploadsmedia_1272041556210.png

Login to the administrator area of your Joomla site and go to Extensions >> Plugin Manager. Click to enable the "System - Legacy" plugin.

Install Docman

tutuploadsmedia_1272041323635.png

Go to Extensions >> Install/Uninstall and click "Browse" to upload Docman

Add a New Category

tutuploadsmedia_1272042051261.png

Go to Components >> Docman >> Categories and click "New" in the top-right corner.

Name and Save the Category

tutuploadsmedia_1272042212648.png

Give your new category a name and click "Save" in the top-right corner.

Start Uploading Documents

tutuploadsmedia_1272042267260.png

Click "Files" and then "Upload" in the top-right corner.

Choose Upload Option

tutuploadsmedia_1272042357359.png

Normally you'll want to keep this option as it is and just click "Next>>>"

Upload Your File

tutuploadsmedia_1272042423934.png

Browse to find your file and then click "Submit"

Choose to Make a New Document

tutuploadsmedia_1272042580071.png

Once you have uploaded your file, the next step is to create a "Document" out of it. That simply means giving it a name, description and other details. Click "Make a new document entry using this file."

Add Details to the Document

tutuploadsmedia_1272042686721.png

Make sure that both "Approved" and "Published" are set to "Yes". Then click "Save".

Verify that Your Document is Created

tutuploadsmedia_1272042778921.png

Hopefully your new document will appear as above.

Make a Menu Link to Docman

tutuploadsmedia_1272042852079.png

Go to Menus >> Main Menu >> click on "New" >> choose "Docman". Choose a title for your menu link and click "Save".

View Docman On the Front of Your Site

tutuploadsmedia_1272042932047.png

Click "Preview" in the top-right corner and you'll see your new menu link. Click on it and you'll see your Docman category. Open the category to see your file

Extra Feature: Docman Groups

tutuploadsmedia_1272043142684.png

Docman also has a very powerful permissions system that allows you to control who can and cannot access documents. Start by going to Components >> Docman >> Groups

Creating a Docman Group

tutuploadsmedia_1272043306950.png

Click "Add" in the top-right corner". You can create a group of users simply by moving them from the "users available" list to the "Members in this Group" list.

Giving Groups Access to a Document

tutuploadsmedia_1272043428694.png

Now when you open up any document you can click "Permissions" and give access only to a certain group of users.

Join today and get access to 1,000's of books and videos. Learn WordPress, Drupal, Magento, Joomla and more! Sign up today!