Summer Sale: You can get 1 year of the Everything Club for $59! Save $85!
  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

This tutorial will show you how to create tables inside Joomla articles. Because the default Joomla editor doesn't have a table-creation feature, we're going to recommend that you upgrade to Joomla Content Editor. Instructions on how to install it are here.

Getting Started


Open an article and put your cursor in the article where you'd like the table to be.

Insert a New Table


Click your mouse on the "Inserts a new table" button in the third row of your JCE Editor.

Choosing the Table Options


You'll see a pop-up looking like this. The first thing to do is choose the number of columns and row for your article. Cellpadding is the amount of space INSIDE each cell. Cellspacing is the amount of space BETWEEN each cell. Border will set a line around the outside of the whole table. Width and height allow you set fixed dimensions for the table, otherwise the table will adjust to fit the content inside. When you're done, click insert.

Writing Inside the Table


Click your mouse inside the table cells and start typing .... you should end up being able to fill in all the cells you need:


Modifying Your Table


You'll notice that when your table is selected, many new buttons along the 3rd row will light up. These are extra options for modifying our table. From left to right they are:

  • delete table
  • table row properties
  • table cell properties
  • insert row before
  • insert row after
  • delete row
  • insert column before
  • insert column after
  • delete column
  • split merged table cells
  • merge table cells

| Joomla

Custom HTML modules are a very useful feature in Joomla. You can insert any code you like from articles to photos to code. Here's a video explaining how it's done:

  1. Login to your Adminstrator area.
  2. Go to Extensions >> Module Manager.
  3. Click on the "New" button.
  4. Select "Custom HTML".
  5. Enter your code and click "Save".

Video on Adding a Custom HTML Module in Joomla

| Joomla

This tutorial came from a question in our support forum: "How do I know what the menu links to articles look like?" That's a good question. If you make a new menu link and choose "Articles", you're faced with 8 different types of layout. These are the 8 you'll see:


So what do they all do? Read on ...

Archived Article List


Joomla's archive system is not very sophisticated. If you choose "Archived Article List" you'll be take a search form like this. All articles that have been archived can be found here.

Article Layout


Article Layout is a fairly simple option: it links to the full text of one single article.

Article Submission Layout


Article Submission Layout allows anyone who is at the "author" level and above to submit articles.

Category Blog Layout


Category Blog Layout shows all the articles in one category. It shows them in a blog layout which means that you can use the "Read More" link to split the articles and show only teaser text.

Category List Layout


Notice that the articles in this Category List Layout are identical to those in Category Blog Layout above. The important difference is that they're shown in a list and people have to click on the article titles to read the text.

Front Page Blog Layout


This is very, very similar to Section Blog Layout and Category Blog Layout. Really the only difference is that the articles come from Content >> Frontpage Manager rather than from just one section or category.

Section Blog Layout


Section Blog Layout shows all the articles in one category. It shows them in a blog layout which means that you can use the "Read More" link to split the articles and show only teaser text.

Section Layout


Section Layout shows all of the categories in one section. Click on the category name and you'll be taken to a Category Blog Layout page (see above).

| Joomla

One of the most frequently asked questions on the Joomla forums is "What is the Itemid and what does it do?". I thought a quick tutorial would be useful because it's important for displaying both modules and templates:

If you have a brand-new Joomla installation that will be a big help in following along

Brand-New Joomla Site


If you have a brand new Joomla site installed, browse around and look at the URLs. For example, click on "Joomla Overview".

Joomla Overview URL


You'll notice the URL ends with Itemid=27. Try clicking on the next link down under "Main Menu". It should be called "Joomla License".

Joomla License URL


This time you'll notice the URL ends in Itemid=27. Try this on other pages and you'll see that each page is going to have a different Itemid at the end. The one you might be able to the see is the frontpage - the Itemd for that is always 1.

Where Else Can You See Itemids


Inside each menu there will be a column on the right-hand side listing Itemids

So What Do Itemids Do?


So we come to the key question .... notice on the frontpage, with an Itemid of 1, that there are lots of modules on the left, top and right. Now click on "Joomla License" which has an Itemid of 2:


Lots of those modules have vanished. However, let's just change the Itemid from 2 to 1:


And after doing that you'll see that all the frontpage modules have re-appeared. The Itemid controls which modules (and which templates) appear on a particular page:


Try going around the rest of your site and changing the Itemids on the URLs. See how the modules shift around. This is how Joomla controls which modules and templates appear on some pages but not others. If you have a problem with the modules appearing or not appearing where they should, it's very likely to be an Itemid issue.

| Joomla
how to change joomla folder and file permissions

Sometimes when you're trying to upload extensions to your Joomla site, you'll be faced with error messages like this: "JFolder::create: Could not create directory" or "Warning! Failed to move file."

Often this is because your Joomla site doesn't have the correct permissions to upload the extensions. What are permissions and how can you fix this problem? Read on ...

Read more ...

| Joomla

When you're building a Joomla template you'll often need to make the design flexible. That means that areas of the site can be shown or hidden on different pages. The solution is to use conditional statements and this tutorial will introduce you to what they are and how they're used:

This tutorial is part of our full Joomla Template Class available to all members. Click here to find out more.

Session Notes for This Tutorial

Here is the code we used in this tutorial:

Index.php Code

Template.css Code

 #wrapper { width: 900px; text-align: left;	/*margin: 0 auto; padding: 0px; */} 

img {border: none;}  

| Joomla

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.


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


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

Save as a Web Page


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

Open the Web Page in Your Browser


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

View the Source Code


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

Browse Through the Code


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


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

Search for the Problem URL


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


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


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 and list movies together with details about the movie.

Install Flutter


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


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


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


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


Create Fields


Enter the Field Details


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


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


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


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


Go to the Joomla Extensions Directory and find Sourcerer:
Click on the "Download" link and you'll be taken to the developer's website where you can download Sourcerer.

Upload and Install Sourcerer


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


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

Scroll to the Bottom of the Article


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

Pop-Up Box


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


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


Access Your Database Area


Create a New Database User

Be sure to take a careful note of your password.

Add The New User To Your Database

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

Give the New User All Privileges


Login To Your File Manager


Open Configuration.php

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

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


Go to Global Configuration


Click on Site then Global Configuration

Site Offline


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

Visit Your Site


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


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

Put Your Cursor in the Text


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

Click Pagebreak


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

Give the New Page a Title


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


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


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

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