Get Started Sale: Get 6 months of the Everything Club for $39! You save $69!
  Offer ends in
Join today and get access to 1,000's of books and videos. Learn WordPress, Drupal, Magento, Joomla and more! Sign up today!

| Joomla
style=

Joomla templates are not rocket science. You can learn how to build and modify them. We can show you how. Interested? Read on ...

In order to get started, you'll need to understand the 5 essential building blocks of every Joomla template. In the 5 tutorials below we guide you through them all:

These tutorials are part of our full Joomla Template Class available to all members. Click here to find out more.

Part 1: Template Setup and templateDetails.xml

Part 2: index.php

Part 3: CSS - Cascading Style Sheets

Part 4: Images

Part 5: Security

We need to make sure that our template is secure and not easily hacked.

blocks

There are two essentials steps we need to make that happen:

  1. Add this line to the very, very top of index.php. This means that only Joomla can run commands on the file – no outside scripts:
  2. Add a blank file called index.html to each folder. That means the main /test/ folder, plus /css/ and /images/. Why? To hide your folder contents. Without an index.html, anyone could see and browse all your files.

These tutorials you've just seen are part of our full Joomla Template Class available to all members. Click here to take your Joomla template skills to the next level.

| Joomla

Word produces horrible code that makes a mess of almost every web page. I'd definitely recommend that you avoid pasting Word documents directly into Joomla articles. Here's an explanation:

Creating a Web Page with Word

tutuploadsmedia_1276627638490.png

Using Word, write just one line. In this example I've written "One Simple Sentence".

Save as a Web Page

tutuploadsmedia_1276627744611.png

Go to File >> Save As and choose to save the file as a "Web Page".

Open the Web Page in Your Browser

tutuploadsmedia_1276627969637.png

I've double-clicked on the file I saved and it's open in my web browser.

View the Source Code

tutuploadsmedia_1276628005237.png

Right-click on the screen and click on "View Source"

Browse Through the Code

tutuploadsmedia_1276628104269.png

Scroll and scroll and scroll and scroll. Finally at the very bottom of the page you'll find the code that puts "One Simple Sentence" on the page. Everything else is junk. Our recommendation is to cut-and-paste your Word document into Notepad or Wordpad first and then into Joomla. There are lots of other alternatives, but please avoid pasting directly from Word into Joomla. You'll avoid having pages and pages of extra code to struggle with.

| Joomla

sh404SEF sometimes creates pages where you don't see the modules that you expect to. The problem is often caused by another feature. Joomla produces lots of URL possibilities for each page and sh404SEF solves that by redirecting all the possibilities to just one URL. This is good for your site's SEO. However, sh404SEF can sometimes choose the wrong URL possibility. This is how to fix that problem when it happens:

Go to sh404SEF Configuration

tutuploadsmedia_1276421900287.png

Go to Administrator >> sh404SEF >> View/Edit SEF URLs

Search for the Problem URL

tutuploadsmedia_1276422074001.png

Search for the URL that is causing you problems. When you've found it, click on the box next to the URL and then click "Duplicate URL" in the top-right corner.

Examine the URLs

tutuploadsmedia_1276422184155.png

You will hopefully see more than one possibility for each URL. The key part of each URL is "Itemid=XXX". This controls which modules and templates appear on a page. The URL with Rank of 0 is the current URL. In order to get different modules and templates to appear on a page you need to choose a URL with a different Itemid. In this case we'll try the second URL which has Itemid=207

Choose a New URL Possibility

tutuploadsmedia_1276422382117.png

Check the box next to the new URL possibility you want to try and click "Main URL" in the top-right corner. Check the front of your site to see if this has solved the problem. If not, repeeat the process and test another URL possibility.

| WordPress

Flutter is a Wordpress plugin that allows you to move beyond simple posts and pages in Wordpress. You can create different types of pages with different types of content. In this example we're going to emulate IMDB.com and list movies together with details about the movie.

Install Flutter

tutuploadsmedia_1276341514732.png

Go to Plugins >> Add New and search for "Flutter". Click "Install" on the right hand side of the page, click "Install" again and then "Activate Plugin".

Browse to Flutter

tutuploadsmedia_1276341655482.png

Flutter adds two areas to your Wordpress admin screen. Under "Settings" you'll find "Flutter" which is the main configuration for the plugin. There will also be a whole new area called "Flutter" which is where you will add content.

Create a Write Panel

tutuploadsmedia_1276341789544.png

Click on "Write Panels" and then "Create Write Panel". You can choose different options for your panel. For example, to simplify things for your users you can unpublish custom fields, password, excerpt and other features that are confusing for beginners. Click "Finish" when you're done.

Add Fields to Your New Write Panel

tutuploadsmedia_1276342025515.png

If you'd like to you can group your fields into different areas. For Movies, you might have a group of fields called "People" and inside that fields called "Director", "Cinematographer" and so on. You might also have a group of fields called "Details" and inside that fields called "Release Date", "Genre" and so on. We're going to set that up and click on "Create a Group".

Name Your Group

tutuploadsmedia_1276342215286.png

Create Fields

tutuploadsmedia_1276342243551.png

Enter the Field Details

tutuploadsmedia_1276342323533.png

Flutter will offer you all sorts of options for the field. A "Textbox" is a simple one-line text field but you can also allow people to write in a larger area (Multiline textbox) multiple choices (Checkbox List, Radiobutton List) or even to upload files or images (useful in example to upload movies posters for example). Choose your options then click "Continue" and "Finish".

Add More Fields

tutuploadsmedia_1276342581297.png

See if you can go ahead and create extra fields and one extra group so that your "Movies" Write Panel looks like the image above.

Go and Start Writing

tutuploadsmedia_1276342733413.png

You'll see that Flutter has added a new option called "Movies" at the top left, underneath "Posts". Click "New" to start writing.

Enter Information Into Your Fields

tutuploadsmedia_1276342804666.png

The post page will look just as it does normally with just one exception ... your Flutter fields will show at the bottom of the page. View your post on the front of your site and your fields should be visible.

I've heard a lot of talk lately about whether or not Joomla can handle large-scale websites, or if it's best used for small mom-and-pop sites. I can say emphatically that the answer to that question is that Joomla is not only useful for small mom-and-pop sites, but it can also be used to build it medium and large-scale sites. There are a few popular examples of large-scale websites built with Joomla, and two developers have been involved in a number of these sites: Mitch Pirtle from Space Monkey Labs and Fotis Evangelou from Komrade and JoomlaWorks. In this 2-part series, I am interviewing both Mitch and Fotis to get their insights on what it takes to deploy large-scale websites with Joomla. Part 1 is my interview with Mitch.

Read more ...

| Joomla

This tutorial consists of three videos. They will show you how to take an existing PSD file created in Photoshop and convert it into a Joomla template. They are a sample of the Joomla Template Design class that is available to subscribers.

  1. Slicing / Exporting the Background
  2. Slicing / Exporting Elements
  3. Final Site and CSS

Part 1: Slicing / Exporting the Background

Part 2: Slicing / Exporting Elements

Part 3: Final Site and CSS

| Joomla

Normally in a Joomla article, code such as Javascript or PHP will not work. This is for good security reasons. People could do a lot of harm if they were free to use these inside your articles. However, many advanced users need to use such code. This tutorial will show you how to do it:

Download the Sourcerer Plugin

tutuploadsmedia_1276017131750.png

Go to the Joomla Extensions Directory and find Sourcerer: http://extensions.joomla.org/extensions/edition/custom-code-in-content/5051
Click on the "Download" link and you'll be taken to the developer's website where you can download Sourcerer.

Upload and Install Sourcerer

tutuploadsmedia_1276017275295.png

In the Administrator area of your Joomla site, click "Extensions" then "Install/Uninstall". Click "Browse" to find the Sourcerer plugin and think click "Upload File & Install"

Create a New Article

tutuploadsmedia_1276017488671.png

Click "Content" then "Article Manager" and then "New"

Scroll to the Bottom of the Article

tutuploadsmedia_1276017571725.png

Click on the new "Insert Code" at the bottom of the article.

Pop-Up Box

tutuploadsmedia_1276017761389.png

You can write your code directly into this box. Just make sure that code has the normal opening and closing tags. When you're done, click "Insert" in the top-right corner.

Save the Article

tutuploadsmedia_1276017876784.png

Don't make any changes to the code you've created. Save the article with the editor turned on and all the code in between the opening { source } and closing { /source } tags.

| Joomla

This tutorial will show you how to change or verify the database login to your Joomla site. People will sometimes need to do this if:

  • Their site can't access the database
  • They've been hacked and need to make the site more secure

Login to Your Hosting Account

tutuploadsmedia_1274896908052.png

Access Your Database Area

tutuploadsmedia_1274896940023.png

Create a New Database User

tutuploadsmedia_1274897008597.png
Be sure to take a careful note of your password.

Add The New User To Your Database

tutuploadsmedia_1274897085048.png
Make sure to choose the correct user and the correct database, then click "Add".

Give the New User All Privileges

tutuploadsmedia_1274897116590.png

Login To Your File Manager

tutuploadsmedia_1274897157849.png

Open Configuration.php

tutuploadsmedia_1274897191808.png
This is the file that connects your Joomla files to your database. It needs to have the correct username and password.

Update the User and Password Details

tutuploadsmedia_1274897314476.png
Scroll down until you see the $user and $password fields. Insert the information you created earlier. Then click "Save" and check the front of your site to ensure everything is working correctly.

| Joomla

This is Part 1 of a series of tutorials on Joomla's offline page:

Joomla has a very nice feature that allows you to test your site in complete privacy. You might just need your site offline for a few minutes, you might want to show it privately to a client, or you might want to keep the site offline for weeks while you build it. Either way, this is a good solution.

Login To Your Joomla Site

tutuploadsmedia_1274895143528.png

Go to Global Configuration

tutuploadsmedia_1274895265250.png

Click on Site then Global Configuration

Site Offline

tutuploadsmedia_1274895329251.png

Set "Site Offline" to "Yes" and then click Save

Visit Your Site

tutuploadsmedia_1274895522044.png

Now when you visit the front of your site you'll see a screen like this. Anyone who has a Super Administrator, Administrator or Manager account can login and view the site as normal. Everyone else will only be able to see the splash. You can keep search engines, rivals and all other unwanted guests out of your site until you're ready.

If you'd like to take this one step further and customize your offline page with a new logo and text, click here for the next tutorial.

Video Showing How to Take Your Site Offline

| Joomla

Pagebreaks are designed to split up very long articles. Joomla will automatically generate a table of contents for you. Here's how to use them:

Open Up an Article

tutuploadsmedia_1274799009635.png

Go to Administrator >> Content >> Article Manager and open up any long article.

Put Your Cursor in the Text

tutuploadsmedia_1274799193466.png

Place your cursor in the text at the point where you want the pages to split.

Click Pagebreak

tutuploadsmedia_1274799063494.png

Scroll to the bottom of the page and click "Pagebreak".

Give the New Page a Title

tutuploadsmedia_1274799224960.png

Select a title for your new page and click "Insert Page Break". The second field called "Table of Contents Alias" will be the URL for this second page.

Repeat the Process

tutuploadsmedia_1274799411887.png

Keep clicking "Pagebreak" until you have split this article as many times as you wish. Each time you do, you should see a grey line across the page. When you're finished, click "Save".

Visit the Article

tutuploadsmedia_1274799627155.png

Now when you visit the article on the front of your site you should see two special items:
1) "Article Index" which serves as a table of contents to the article pages
2) Prev and Next buttons at the bottom of the article for people to move on to the next page

| 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 ...

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