Adding a Custom HTML Module in 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 Article Layout Options From the Menu

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:

tutuploadsmedia_1278073133590.png

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

Archived Article List

tutuploadsmedia_1278073323028.png

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

tutuploadsmedia_1278073353051.png

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

Article Submission Layout

tutuploadsmedia_1278073409079.png

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

Category Blog Layout

tutuploadsmedia_1278073464789.png

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

tutuploadsmedia_1278073639493.png

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

tutuploadsmedia_1278073692139.png

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

tutuploadsmedia_1278073715022.png

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

tutuploadsmedia_1278073797764.png

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

What is the Joomla Itemid?

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

tutuploadsmedia_1277996611809.png

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

tutuploadsmedia_1277996702101.png

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

tutuploadsmedia_1277996805612.png

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

tutuploadsmedia_1277997008000.png

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

So What Do Itemids Do?

tutuploadsmedia_1277997159816.png

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:

tutuploadsmedia_1277997264819.png

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

tutuploadsmedia_1277997342900.png

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:

tutuploadsmedia_1277997409813.png

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.

Conditional Statements in Joomla Templates

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;}  

The 5 Building Blocks of Every Joomla Template

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.

Joomlashack University Deal: 1 month for $42; or just $35 when you buy a template

We've got a great deal for you this week at JoomlaShack University:

Buy a 1 month subscription for only $42, or, get it for $35 when you also buy a Joomlashack professional template at the same time.

Joomlashack University is your #1 online source for Joomla training and it's simply the fastest, easiest way to learn how to build successful Joomla websites. Period. All the tips, tricks & techniques of Joomla website development--from beginner to advanced concepts--are taught at Joomlashack University by top Joomla experts.

And now, for a limited time, you can save almost 40% and get instant access to a growing library of Joomlashack University lessons, like "An in-depth tour of Joomla 1.6", "Customizing Joomla templates", "learning K2", "mastering Jomsocial" and much more. New lessons are added every few weeks!

Joining JoomlaShack University has never been easier. But please hurry! This special introductory offer of 1-month for $42 ($35 with the purchase of a pro template) won't last forever, so check out all the details and learn more here.

Avoid Pasting Word Articles Into 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.

sh404SEF Causes Wrong Modules to Show

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.

Deploying Large-Scale Websites with Joomla - Part 1: An Interview with Mitch Pirtle

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: Deploying Large-Scale Websites with Joomla - Part 1: An Interview with Mitch Pirtle

Converting a PSD File to Joomla Template

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