Are you optimizing your websites images?

Images are an important part of many web sites, and can potentially bring in a lot of search engine traffic.

If your website is built with Joomla, the likelihood is that your images are not at all optimised to appear in the search engine rankings.

In this article, we look at how to optimize your images in Joomla.

[Read more…]

Or….. “How to double your website revenue for free”

Let’s assume you have a website that is somehow generating
an income. It might be a shopping cart, it might be email signs ups for an
ebook. Your site will have competitors (enter your keywords in a Google search
to see who they are). How can you be more competitive in that market and have a
more successful site?

The answer: increase your conversion rate.

Jakob Nielsen put this pretty well with his formula for
website success.

B = V x C x L

Where

• B = amount of business done by the site
• V = unique visitors coming to the site
• C = conversion rate (the percentage of
  visitors who become customers); note that the concept of conversion
  applies not only to ecommerce sites, but to any site where there is
  something you want users to do
• L = loyalty rate (the degree to which
  customers return to conduct repeat business)

Now, the strategy most webmasters probably think of when
trying to increase "sales" is to go out and get more traffic. But in
many cases, this probably isn’t the best strategy. You can get the same
effect by doubling your conversion as you can doubling your traffic, and
here is the best part…

Doubling your conversion could be surprisingly easy!

How to Increase your Conversion rate

By testing

That is more or less all there is too it. Site visitors can
respond in very unexpected ways to seemingly small things on a page. The text
of a headline, even the font color of that headline. Tiny changes can be
directly attributed to small gains or losses in your conversion rate.

So how do you know what to change?

You don’t.

Most of the time, the adjustments are not that obvious. Yes,
there are best practices from experts, but often something that is
insignificant to you can make a difference. Sometimes even, counter intuitive.
For example, I recently had a landing page that had a conversion step. When I
took the benefits off it resulted in more conversions/sales. Go
figure.

The only way to increase conversion is thus to exhaustively test
lots of combinations and tweaks to see what works.

Traditionally, this sort of testing has been very expensive
involving complex scripts. More recently however, Google has launched a service
(bundled with adwords) that allows you to test conversion page variations. This
kind of testing is sometimes known as split testing.

The concept is that each site visitor is presented with a variation of a page. A cookie is given so that visitor will always see that variation. The variations themselves are randomly assigned to visitors as they arrive at the site. A conversion is then counted by tracking which of these visitors reach a second page. Statistical trends can then be analyzed of which variations lead to the most conversions.

How to do Split Testing with Joomla

If you are building your site on a small budget, the chances
are you might be using an open source CMS like Joomla. Sometimes integrating a
dynamic CMS into an optimization tool can be difficult. With Joomla, its not
too hard as its possible to run most Javascript Google snippets in Joomla
articles. It’s these snippets that enable the optimization.

Get a Google Adwords Account

If you have the aforementioned ecommerce site, you should
already be using adwords. If you are not, stop reading this now and go and get
one and get more traffic for your site.

Create your Joomla Pages

To measure a conversion you need the visitor to move from
one page to another. This could be your home page and the success page of your
shopping cart. In this example, I am going to use two uncategorized articles,
one is being used as my home page, and the other as a "success page".

Note: I frequently advocate using a single uncategorized article for your home page rather than using Joomla’s Front Page manager.

Turn off Your Editor

We will need to be embedding Javascript into the articles. Very often, editors used in Joomla will strip out critical code syntax. You can either turn off the editor in the global config, or for your current user, or use this trick to Edit HTML in a Joomla Module or Article. You could also upgrade to a commercial editor like WYSIWYGPro that allows you to edit the source on the fly without stripping code. Figure 1 shows the user edit screen and where to turn off the editor.

Figure 1
Turning off the WYSIWYG editor for the administrator

Create a Website Optimizer Experiment

Now that we have our pages ready, we need to set up the experiment. Log into Google Adwords and click on the Website Optimizer link. As an example we are going to set up a "multivariate" experiment.

Figure 2
Selecting the Multivariate Experiment

The Web Optimizer tool then leads us through 5 steps. First is to identify the experiment pages.

Figure 3 – Step 1 of optimizer

We then give our experiment a name and Demeter in our testing pages. Remember, in my example, I am testing the home page so I can just enter the root of the site.

Figure 4 – Identifying test pages

We then get a page that explains the type of testing we are doing.

Figure 5 – Google explains the testing

The last part of planning the experiment is to select how the code will be inserted. The first choice provides a link with instructions. We will be doing it ourselves, so we select "You will install and validate the JavaScript tags".

Figure 6 – Choosing to install the tags ourselves

The next stage is a critical one. We get 4 snippets of code we need to paste into various parts of our testing pages.

Figure 7 – The 4 code blocks to embed in the Joomla articles

The first two, three all go into the page that will be varied (in our case the home page). They are:

• The control script – top of the article
• The page sections – in the content of the article as needed
• The tracking script – at the end of the article

An example is shown in figure 8.

Figure 8 – Inserting the code snippets in the test article

Now we need to insert the last snippet, the conversion script into the success page, shown here in figure 9. Remember this goes into a different article, the one we decided was our success page. If you have a shopping cart, this won’t be an article, but will be somewhere in the extension you are using.

Figure 9 – Inserting the conversion code on the success page

After inserting and saving these code blocks, we need to check they are all present and correct. Click the validate button at the bottom of the web optimizer page.

Figure 10 – Validate button in optimizer

If you are using the current version of Joomla, you will get an error at this point. Joomla 1.5 will interpret some code as a path and break. To get the Google code to work properly, you need to patch one of your files.

Figure 11 – Validation errors

Figure 12 – Validation errors

Thanks go out to Anthony Ferrara for tracking down and fixing the issue here!

http://joomlacode.org/gf/project/joomla … m_id=11844

Here is the patch file associated with the fix.

http://joomlacode.org/gf/download/track … _fix.patch

This patch should probably be included in Joomla around 1.5.5 or 1.5.6.

Now all our code is validating, we click continue and cerate our page sections to test. Note that you can have as many page sections as you want, with as many variations. For clarity sake, I am only testing one variation!

To do this click on the link "Add a new variation".

Figure 13 – Adding a variation

Give your variation a name so you can tell what it is in your reports.

Figure 14 – Name the variation

Then edit the HTML in some way that creates the variation. Note in this example, I put the Google script tags outside the <h3> tag so if I wanted I could vary the heading style as well as the words.

Figure 15 – Editing the variation

Click save (and work through the variations if you have more) and then you can launch the experiment.

Figure 16 – Review and launch

Google will now collect the data and see which variation converts the best.

Figure 17 – Experiment launched

Google Web Optimizer Tricks and Tips

There are probably as many testing strategies as there are tests. One technique I have found useful is to first test very broad variations. Say we have a headline, a call to action, some features and an image. I would put variation blocks around the headline, the features and the image and have them either on or off. This makes 8 (if my math is right) variations. Once I had done this initial coarse test, I’d start playing with the specifics of the blocks themselves.

I hope this has been a helpful introduction to doing split testing with Google web optimizer on Joomla sites. I’d love to hear from anyone who implements it on their site and what results/gains in conversion you get!

What is an Online Community?

For the purposes of this discussion, I am going to make the following definition:

A group that communicates online to fulfill a need

The naturally poses the question for you, the site creator, "what needs are you trying to fulfill with your site?"

I am sure that there might be more, but I am going to define 3 basic needs that could be fulfilled through an online community.

1. Informational
2. Economical
3. Emotional

You’ll often see that recognition is sometimes quoted as a reason why people participate in an online community, but for now I would argue that is a subset of the broader need of emotional.

Very often, you’ll find that more than one need is at play, but to illustrate these three, here are some example sites where I think a single need is being addressed.

Informational

• www.aicardisyndrome.org
  A support site for families with daughters that have a rare genetic disorder called Aicardi syndrome. One of our staff’s daughter has the disorder.
• www.wikipedia.org
  A free encyclopedia built collaboratively using Wiki software. Also emotional as the community is in the people that build the site, not in those that read it.
• www.joomlashack.com
  Community forum for Joomla website help.

Economical

• www.warriorforum.com
  Forum devoted to Internet marketing, search engine placement and optimization, plus affiliate programs advice and support.
• www.teachingsells.com
  An online course to create membership sites. Note, this is in economical rather than informational because the driving need of members is to generate revenue from their sites.

Emotional

• www.dooce.com
  Popular blog about motherhood. The community is in the conversation in the blog comments between mothers.
• World of Warcraft
  An example of an online community that isn’t a website. At over 6 million subscribers, Blizzard is appealing to some key emotional needs!

Its certainly debatable which category I have placed some of these, they are for example only. The key part is that your website is going to have people that visit, and people that participate. You need to figure out the lever needed to shift people from the first group into the latter. Let’s examine some important steps in that process… but first… an important note…..

I am going to start talking about marketing.

This might turn some people off, it may even annoy some people when I talk about non-profit sites for genetic disorders and marketing in the same sentence. Marketing is evil isn’t it?

No, its not. You need to be a marketer and here is why.

The web is a insanely crowded place and if you have a site, you need to get people to come to it. You might have an ad-free site, packed with critical information that you want to share. But there is not point going to all the effort if you can’t connect to the people you want to read it. On the web, everyone is in the marketing business.

I am going to borrow some definitions from Seth Godin. In his book Permission marketing he explains that your website needs to:

1. Turn strangers into friends…
2. Turn friends into customers…
3. Turn customers into salespeople…

For our purposes:

• Strangers are site visitors, lurkers and readers
• Friends are members, participants and content contributors
• Salespeople are Sneezers, those that will spread the word about your site

Its possible to break down each of the steps above to a key part in the life cycle of a visitor.

How do I get People to Come to my online Community?

Publishing your site is only a small step in the path to getting traffic. Unless you do
something else, your site will just sit there, and no one will know it exists. Unfortunately, unlike the Kevin Costner film Field of Dreams, “If you build it, they will come,”
is not true on the Web.

We can split the different ways to get traffic into several main categories:

• Organic. What was traditionally known as SEO, the idea of having your website visible in various search engines when people search for
  keywords.
• Referral. Quite simply, the idea of having links from other sites to yours. These can be natural through attracting links to your high-quality content, or can be paid links or other techniques.
• Pay-Per-Click (PPC). This involves bidding for placement on search results. In Google’s case this is called AdSense.
• Email. Building an email subscription list is a key part of your plan so that you can present them with information that might draw them back to your site.

If you want your website to be successful, it is absolutely critical that you have a balanced plan that addresses these four components. Just focusing on one will put you at a disadvantage to competitors that have a more balanced approach. It’s exactly the same principle that your financial consultant might tell you: have a diversified portfolio.

Some of these strategies cost time, and some cost money. Even if you are running a local library website, you should convince whoever needs to be convinced that your website needs a marketing budget.

Organic Traffic

SEO used to be about trying to game the system. This worked three years ago, but
now search engines are much more sophisticated. Attempts to stuff metatags or put
lots of hidden text on a page are more than likely going to get you penalized. This next
point is very important to understanding SEO: A search engine tries to find high-quality
content based on a keyword search.

To be most successful at organic SEO, you need to meet this need. Create a site
with lots of high-quality content and make it easy for both search engine spiders and
human Web visitors to find and read.

In a nutshell, have rich page titles and turn on SEF.

Further Reading:
Top 10 Joomla SEO tips for Google
Probably the best SEO ebook out there
The Complete Guide to Joomla SEO
Alledia’s Joomla SEO Club

Referral

Referral traffic is off-site optimization and is the meat of SEO and is perhaps one of the
most important components of getting traffic. Most critical is the number and quality of links to your site. Its one of the
principle factors such engines use to calculate your SERP (Your rank in the search engine). So you get two benefits: pure
traffic and ranking in the search engines.

One common, but laborious, strategy to get links is to deliberately seek out and email similar topic sites as yourself and politely ask for a link to your site. This is generally not very effective.

You can
also find links to your site in other ways. Traditionally, this involves submitting your
site to all sorts of directories. I do not advocate this anymore as the effect of these
directories is diluted. Definitely make sure you do not pay anyone to “submit your sites to directories;
it’s not useful in regard to the amount of money you might spend. Having said that, there is one circumstance where submitting to directories
can be useful. If you know of industry-specific and topic-specific directories related
to your website, a submission can be useful. This is because links from a topic-related
site are worth more than just a general one.

Another place to put links to your website is in your signature on a forum. For this to
be effective, you need to do a couple things:

• Find a forum that is related to your website based on its industry or topic.
• Become an active contributing member of that forum. Place a link to your website in your signature, making sure you follow forum
  rules.

The nice thing about this strategy is that the more you contribute, the more members
of the community will see your link. It’s a situation where everybody wins.

One last note about linking, as well as external links to your site, internal links within your site are also very useful. Here you can really take advantage of some Joomla features such as all the various "Most Popular" and "Latest News" modules.

Further Reading
Don’t Use Metatag Tools in Joomla for SEO
How to get People to Read More of your Joomla site

Pay-Per-Click Traffic

If you have a website (Joomla or otherwise), and you have a vague interest in getting
traffic, then Pay-Per-Click (PPC) needs to be part of your SEM strategy.

Why is PPC so useful?

If you put an ad in a magazine about your product, you pay the magazine the ad fee, and it goes in. At that point you are hoping that the ad is compelling enough to
get people to call/email/visit your site. If you get no leads from the ad, then you still
had to pay the magazine the fee.

Google Adwords is an example of a PPC. This means you only have to pay for an ad if
somebody clicks it. The equivalent would be that you only have to pay the magazine if
you get a sales lead from your advertisement. No magazine in the world is ever going
to give you an offer like that—they would go out of business in a heartbeat! On the
Web using sophisticated tracking software with this kind of arrangement is possible.

Further Reading
Get more traffic for your Joomla website with Google Adwords
Is Joomla Adsense best for your site?

Email Traffic

A modern website should have many tools that allow two-way communication with
site visitors. A key part of this communication is the use of email newsletters. Many
people associate email marketing just with spam, but email can fill many needs, for
example:

• Update emails about interesting current forum discussions.
• Communicating with family members on a family website.
• News and tips email from a topic niche site.

Recently, RSS has become more popular to send information to subscribers, but it is
only really adopted by few web users. Most still are using their inbox to get information.
I actually use an RSS-to-email system from Feedblitz on my site.

One important consideration that you need to immediately take into account is
how your website is hosted. Most Joomla Webmasters have their sites on relatively
affordable hosting plans that are called “Virtual Hosting” or “Shared Hosting,” which
cost about $10–20 per month. With this method, your site shares a server with several
other sites. Most hosting companies have an email sending cap in place, or worse still, someone else on the server can get blacklisted and hence blacklist your site, as its on the same IP address. A much better solution is a 3rd party hosted email newsletter application, like Constant Contact or iContact.

We have recently developed a free email newsletter extension called JContact that integrates Joomla with iContact.

Further Reading
Increase Your traffic with Professional Email Marketing
Detailed Reviews of Email Marketing Solutions
Find the Best Email Newsletter for your Joomla Website

How Do I get People to Join My Online Community?

So we have the visitor on our doorstep of our site, now we need to get them to take the step of (probably) registering.

Here the focus is on conversion. We need to start concerning ourselves with the idea of landing pages and Most Valued Action!

Show me the Banana

As you start thinking about how to convert your site visitor, you need to keep one very important thing in mind. Your visitor has a very short attention span and is ready to click away from your site in an instant. Your conversion page (which might be your home page) need to be uncluttered and focus on one obvious objective. If your visitor is a monkey, give him a big banana to grab, and make sure there is a big sign pointing to it.

A really great example is the current Plaxo site. Its very obvious what the next step is for most visitors.

Fulfilling the Need

We started this discussion about needs. As you are thinking about the design of your Home page, make sure its very clear what need will be met in your online community. Plaxo’s is staying in touch.

Optimizing Your Landing Pages

Whether you have a specific landing page, or you drive all the traffic to your home page, its worth taking the time to optimize that page. This is also know as A/B split testing. Its hard to do in Joomla (tutorial coming soon), but if you can manage it, it can mean a dramatic increase in conversions. Its much easer to raise your conversion rate from 0.5 to 1% then it is to double the traffic you are able to get to your site!

Take the Control back From Joomla

So your Landing/Home page is the most valuable real estate you have on your website. Joomla has a feature called the Front Page component, and I’d say that 99% of Joomla sites use it.

Don’t…

Create a static/uncategorized article and make THAT the home page for your site. That way you’ll be able to have fine control over it and tailor it carefully to your needs.

One challenge you will face is the tension between what new visitors want to see and need compared to what returning visitors want. Its becoming more and more common to see discrete links for people to log in and that whisks them elsewhere on the site. Plaxo uses this strategy. Joomla can do this because you can define a redirect page after somebody logs in.

How do I Exponentially Grow My Community

….to explode your profits… *cough*, sorry, momentary lapse 🙂

If you have a solid plan for addressing the first two issues described above, then your community should chug along nicely and grow at a steady pace. To really grow it fast, you need to engage in aspects of viral marketing. There are two parts to this:

• You need to give people a reason to spread the word
• You need to give people tools to spread the word

This stage is perhaps the hardest of them all, and there is not a one-size-fits-all solution. You need to carefully consider who your community is and what reasons and tools you can provide.

Joomla provides some basic tools like Email a Friend and the like, but to excel at this, you need to be much more creative.

What Tools Does Joomla Have to Build Online Communities?

Joomla does two things very very well.

1. Its easily manages any amount of content, user submitted or otherwise.
2. It easily manages huge numbers of registered users.

For an online community though, we will some other key features. We can find them in the form of some extensions that are available.

Forum
Its hard to conceive of a community site that wouldn’t have a forum. My pick would be Fireboard. It does lack some features of bigger ones like SMF, but it runs inside Joomla seamlessly.

User Enhancement
Users that register need to feel that there is part of the site they can call their own. The best tool to do this is Community Builder which gives a host of user based tools and features.

Comments
In a functional way, a mini forum. Comments can spark discussion about content articles and create that all important user generated content. My pick is JomComment for this (I use it myself).

With these three Joomla extensions, you’ll be able to meet the needs of most online community sites.

Summary

Joomla is a great tool to build a community website, but it needs to be supported by thoughtful marketing strategies. Slick widgets and social bookmarking don’t make online communities… people do. You need to make sure you understand their needs and goals for becoming part of your community.

Do you know any examples of exemplar online communities created with Joomla? I’d like to build an example list, please leave a comment with the URL!

In This Chapter

• What is a Joomla template? What functions are performed by a Joomla template, and what is the difference when a template has no content versus when content is added into the Content Management System (CMS).
• How does the localhost design process differ to that of a static (X)HTML web page?
• What are the implications of tableless design in Joomla and the relationship between W3C standards, usability, and accessibility?
• What files make up a Joomla template, and what functions do they perform?
• How do you create a source-ordered 3-column layout using CSS rather than tables?
• What are the basic CSS styles that should be used with Joomla, and what are the default styles that are used by the Joomla core?
• How do you place and style modules, and what are some new techniques for rounded corners?
• What would be a simple strategy to produce lean CSS menus that mimic the effect of those developed with JavaScript?
• How do you control when columns are shown and hide them when no content is present?
• What are the proper steps to create a real Joomla 1.5 template?

 

This sample content is excerpted from the forthcoming book, titled Joomla! A User’s Guide: Building a Joomla! Powered Website, to publish in 2007, by Prentice Hall Professional.

The author, Barrie North creates Joomla Templates and Tutorials at  www.compassdesigns.net. This work is licensed under a Creative Commons Attribution NonCommercial ShareAlike 2.5 License. This attribution must be reproduced in full.

 

What Is a Joomla Template?

A Joomla template is a series of files within the Joomla CMS that control the presentation of the content. The Joomla template is not a website; it’s also not considered a complete website design. The template is the basic foundation design for viewing your Joomla website. To produce the effect of a “complete” website, the template works hand in hand with the content stored in the Joomla databases. An example of this can be seen in Figure 9.1.

Figure 9.1
Template with and without content

Figure 9.1, part A, shows the template in use with sample content. Part B shows the template as it might look with a raw Joomla installation with little or no content. The template is styled so that when your content is inserted, it will inherit the stylesheet defined in the template such as link styles, menus, navigation, text size, and colors to name a few.

Notice that the images associated with the content (the photos of the people) are not part of the template but the header is.

Using a template for a CMS, as Joomla does, has a number of advantages and disadvantages:

• There is a complete separation of content and presentation, especially when CSS is used for layout (as opposed to having tables in the index.php file). This is one of the main criteria for a site that meets modern web standards.
• A new template, and hence a completely new look to a website, can be applied instantly. This can even have different locations/positioning of content as well as colors and graphics.
• If different layouts are called for within one website, it can be difficult to achieve.

Although different templates can be applied to different pages, this built-in functionality is not reliable. Much better is to use conditional PHP and create a layout that dynamically adjusts the number of columns based on what content is published.

The Least You Need to Know
Modern websites separate content from presentation using a technology known as Cascading Style Sheets (CSS). In Joomla, the template controls the presentation of the content.

Localhost Design Process

The web page you see at a Joomla-powered website is not static. That means it is generated dynamically from content stored in the database. The page that you see is created through various PHP commands that are in the template, which presents some difficulties in the design phase.

It’s common now to use a what you see is what you get (WYSIWYG) HTML editor, such as Dreamweaver. This means that the designer does not even need to code the HTML. However, this is not possible in the Joomla template design process because WYSIWYG editors cannot display a dynamic page. This means that the designer must code “by hand” and view the output page from the PHP on a served page. With a fast enough connection this could be a web server, but most designers use a “local server” on their own computer. This is a piece of software that will serve the web pages on the designer’s computer.

There is no “right way” to create a web page; it depends on the designer’s background. Those more graphics-inclined make an “image” of a page in a graphics program like Photoshop and then break up the images to be able to use them for the Web (known as slice and dice). More technology-based designers will often just jump straight into the CSS and start coding. However, as just mentioned, the Joomla template designer is limited in that he cannot instantly see the effect of his coding in the same editor. The modified design process is as follows:

• Make edits with HTML editor, save changes.
• Have localhost server running in background to “run” Joomla.
• View edits in a web browser.
• Return to step 1.

The Least You Need to Know
When creating a template, you have to have Joomla “running” on a server so you can make changes and refresh the page output.

Localhost Server Options

In Chapter 2, we saw how to install a web server that will run on your computer. We described one for a localhost webserver called WAMP5. To move further along in this chapter, you will need to have this installed. If you haven’t yet, go ahead and install it. I’ll wait right here.

TIP
One useful technique to make the design process more efficient is to serve a web page that you are designing and then copy and paste the source into an editor. For example, once your layout CSS is set up, you can use one of these localhost servers to serve a page, then view the source of the page. You then copy and paste the source code into your editor. You can now easily style the page using CSS and not have to go through the cycle of steps described earlier.

NOTE
A Free XHTML Editor
For those not able to pay for a commercial editor, such as Dreamweaver, some free editors are available. Nvu is a solid choice and has built-in validation[md]and it is 100% open source. This means anyone is welcome to download Nvu at no charge (nvu.com/download.html), including the source code if you need to make special changes.

W3C and Tableless Design

Usability, accessibility, and search engine optimization (SEO) are all phrases used to describe high-quality web pages on the Internet today. In reality, there is a significant amount of overlap between usability, accessibility and SEO and a web page that demonstrates the characteristics of one does so for all three; this is shown in Figure 9.2. The easiest way to achieve these three goals is to do so using the framework laid out in the World Wide Web Consortium (W3C) web standards.

For example, a site that is structured semantically with (X)HTML (the XHTML explains the document, not how it looks) will be easily read through a screen reader by someone who has poor vision. It will also be easily read by a search engine spider. Google is effectively blind in how it reads your website, itÙs as though it is using a screen reader.

Figure 9.2
The overlap between usability, accessibility, and SEO

Web standards put into place a common set of “rules” for all web browsers to use to display a web page. The main organization pushing these standards is the World Wide Web Consortium (WC3), whose Director, Tim Berners-Lee, has the distinction of actually inventing the Web in 1989.

To help you understand where web standards came from, some history is helpful. Many web pages are actually designed for older browsers. Why? Browsers have continually evolved since the World Wide Web started. New ones have appeared, and some old ones have disappeared (remember Netscape?).
Current W3C standards serve to (hopefully) push manufacturers to release more compliant browsers so that designers can design to one common platform.

Another complicating factor is that different browser makers (like Microsoft) tend to have their browsers interpret html/xhtml in slightly different ways. This has lead to web designers having to design their websites to support older browsers rather than new ones. It’s often decided that it’s important that a web page appear properly to these “legacy” browsers.

The WC3 standards outlined for web page code have been developed to achieve consistency. A site that incorporates the W3C’s web standards has a much better foundation for making itself accessible, usable, and search engine-optimized. Think of these as building codes for your house. A website built with them is stronger and safer and coincides with users’ expectations. You can check your pages with the W3C’s HTML validation service (validator.w3.org/). It’s easy and free (make sure you use the correct DOCTYPE when you try and validate your code1). At its simplest, a site that meets W3C validation uses semantic (X)HTML and separates content from presentation using CSS.

Ask five designers what web standards are, and you will get five different answers. But most agree that they are based on using valid code, whether HTML or XHTML (or others).

Semantically Correct Code

As was mentioned earlier, being semantic means that the (X)HTML in the web page describes only content, not presentation. In particular, this means structured organization of H1,H2 tags etc and only using tables for tabular data, not layout.

Cascading Style Sheets (CSS)

Closely related to having semantic code, is using Cascading Style Sheets (CSS) to control the look and layout of a web page. CSS is a simple mechanism for adding style (that is, fonts, colors, spacing, and so on) to Web documents (source: www.w3.org/Style/CSS/). They exist parallel to the (X)HTML code and so let you completely separate content (semantic code) from presentation (CSS). The best example of this is CSS Zen Garden, a site where the same semantic XHTML is shaped in different and unique ways with different CSS. The result is pages that look very different but have the same core content.

Designing Joomla-powered sites currently presents considerable challenges to meet validation standards. In the first series of releases, 1.0.X, the code used a significant amount of tables to output its pages. This isn’t really using CSS for presentation, nor does it produce semantically correct code. This problem is compounded by the fact that very few third-party developers are using CSS; most use tables to generate their code too.

Fortunately, the Joomla Core Development team recognized this issue with Joomla. In the 1.5 version, it’s possible for template designers to completely override the output of the core (called a view) and strip out the tables or customize the layout[md]whatever they want.

Regardless, care can still be taken when creating a template to make sure it is accessible (for example, scalable font sizes), usable (clear navigation) and optimized for search engines (source-ordered).

The Least You Need to Know
Creating valid templates should be a path, not a goal. The idea is to make your template as accessible as possible for humans and spiders, not to achieve a badge of valid markup.

 

This sample content is excerpted from the forthcoming book, titled Joomla! A User’s Guide: Building a Joomla! Powered Website, to publish in 2007, by Prentice Hall Professional.

The author, Barrie North creates Joomla Templates and Tutorials at  www.compassdesigns.net. This work is licensed under a Creative Commons Attribution NonCommercial ShareAlike 2.5 License. This attribution must be reproduced in full.

Creating a Simple Blank Template

To understand the contents of a template, we will start by looking at a blank Joomla template.

The Template File Components

The template contains the various files and folders that make up a Joomla template. These files must be placed in the /templates/ directory of a Joomla installation in their own folder. So if we had two templates installed, our directory would look something like the following:

Note that the directory names for the templates must be the same as the name of the template, in this case element and voodoo. Obviously they are case sensitive and shouldn’t contain spaces.
Within the directory of a template, there are a number of key files:

These two filenames and location must match exactly because this is how they are called by the Joomla core script.

The first of these is the template XML file.

templateDetails.xml

This is an XML format metadata file that tells Joomla what other files are needed when loading a web page that uses this template. Note the uppercase “D.” It also details the author, copyright, and what files make up the template (including any images used). The last use of this file is for installing a template when using the admin backend.

Second, we have the engine of the template, the index.php:

index.php

This file is the most important. It lays out the site and tells the Joomla CMS where to put the different components and modules. It is a combination of PHP and (X)HTML.

In almost all templates, additional files are used. It is conventional (although not required by the core) to name and locate them as shown here:

These are just examples. Table 9.1 examines each line.

Table 9.1
Core Files Needed for a Template

templateDetails.xml

The templateDetails.xml must include all the files that are part of the template. It also includes information such as the author and copyright. Some of these are shown in the admin backend in the Template Manager. An example XML file is shown here:

Let’s explain what some of these lines mean:

• <install version=”1.5″ type=”template”>. The contents of the XML document are instructions for the backend installer. The option type=”template” tells the installer that we are installing a template and that it is for Joomla 1.5.
• <name>TemplateTutorial15</name>. Defines the name of your template. The name you enter here will also be used to create the directory within the templates directory. Therefore it should not contain any characters that the file system cannot handle, for example spaces. If installing manually, you need to create a directory that is identical to the template name.
• <creationDate>August 2007</creationDate>. The date the template was created. It is a free form field and can be anything such as May 2005, 08-June-1978, 01/01/2004, and so on.
• <author>Barrie North</author>. The name of the author of this template[md]most likely your name.
• <copyright>GPL</copyright>. Any copyright information goes into this element. A Licensing Primer for Developers and Designers can be found on the Joomla forums.
• <authorEmail>compassdesigns@gmail.com</authorEmail>. Email address where the author of this template can be reached.
• <authorUrl>www.compassdesigns.net</authorUrl>. The URL of the author’s website.
• <version>1.0</version>. The version of this template.
• <files></files>. Various files used in the template.
• The files used in the template are laid out with <filename> tags:

• The “files” sections contain all generic files like the PHP source for the template or the thumbnail image for the template preview. Each file listed in this section is enclosed by <filename> </filename>. Also included would be any additional files; here the example of a JavaScript file that is required by the template is used.
• All image files that the template uses are also listed in the <files> section. Again, each file listed is enclosed by <filename> </filename>. Path information for the files is relative to the root of the template. For example, if the template is in the directory called ‘YourTemplate’, and all images are in a directory ‘images’ that is inside ‘YourTemplate’, the correct path is: <filename>images/my_image.jpg</filename>
• Lastly, any stylesheets are listed in the files section. Again, the filename is enclosed by <filename> </filename>, and it’s path is relative to the template root.
• <positions></positions>.The module positions available in the template.
• <params></params>. These describe parameters that can be passed to allow advanced template functions such as changing the color of the template.

index.php

What actually is in an index.php file? It is a combination of (X)HTML and PHP that determines everything about the layout and presentation of the pages.

First, let’s look at a critical part of achieving valid templates, the DOCTYPE at the top of the index.php file. This is the bit of code that goes at the very top of every web page. At the top of our page, we have this in our template:

The first PHP statement simply makes sure that the file is not accessed directly for security.

A web page DOCTYPE is one of the fundamental components of how a web page is shown by a browser, specifically, how that browser interprets CSS. To give you further understanding, an observation from alistapart.com says:

[Information on W3C’s site about DOCTYPEs is] written by geeks for geeks. And when I say geeks, I don’t mean ordinary web professionals like you and me. I mean geeks who make the rest of us look like Grandma on the first day She’s Got Mail.

Anyway, you can use several DOCTYPEs. Basically, the DOCTYPE tells the browser how to interpret the page. Here the words “strict” and “transitional” start getting floated around (float:left and float:right usually). Essentially, ever since the Web started, different browsers have had different levels of support for CSS. This means for example, that Internet Explorer won’t understand the “min-width” command to set a minimum page width. To duplicate the effect, you have to use “hacks” in the CSS.

Some say that serving XHTML as text/html is considered harmful. If you actually understand that statement you are well ahead of the game and beyond this guide. You can read more at hixie.ch/advocacy/xhtml.
Strict means the HTML (or XHTML) will be interpreted exactly as dictated by standards. A transitional DOCTYPE means that the page will be allowed a few agreed upon differences to the standards.

To complicate things, there is something called “quirks” mode. If the DOCTYPE is wrong, outdated, or not there, the browser goes into quirks mode. This is an attempt to be backwards-compatible, so Internet Explorer 6 for example, will render the page pretending as if it were IE4.

Unfortunately, people sometimes end up in quirks mode accidentally. It usually happens in two ways:

• They use the DOCTYPE declaration straight from the WC3 web page, and the link ends up as DTD/xhtml1-strict.dtd, except this is a relative link on the WC3 server. You need the full path as shown earlier.
• Microsoft set up IE6 so you could have valid pages but be in quirks mode. This happens by having an “xml declaration” put before the DOCTYPE.

Next is an XML statement (after the DOCTYPE):

The part about IE6 quirks mode is important. In this chapter we only design for IE6+, so we will make sure that it’s running in standards mode. This will minimize the hacks we have to do later on.

NOTE
Making a page standards-compliant, where you see “valid xhtml” at the bottom of the page does not mean really difficult coding, or hard-to-understand tags. It merely means that the code you use matches the DOCTYPE you said it would. That’s it! Nothing else.

Designing your site to standards can on one level be reduced to saying what you do and then doing what you say.

Here are some useful links, which will help you understand DOCTYPE and quirks mode:

• www.quirksmode.org/css/quirksmode.html
• www.alistapart.com/stories/doctype
• www.w3.org/QA/2002/04/Web-Quality
• http://forum.joomla.org/index.php/topic,7537.0.html
• http://forum.joomla.org/index.php/topic,6048.0.html

What Else Is in index.php?

Let’s look at the structure of the header first; we want to be as minimal as possible but still have enough for a production site. The header information we will use is as follows:

What does all that mean?

We have already discussed the implications of the DOCTYPE statement in the index.php file. The <?php echo $this->language; ?> is pulling the language from the site Global Configuration.

The next line is to include more header information:

This is all header information that is set in the Global Configuration again. It includes the following tags (in a default installation):

Much of this header information is created on the fly specific to the page (article) that someone is on. It includes a number of metatags[md]the favicon, RSS feed URLs, and some standard JavaScipt files.

The last lines in the header provide links to CSS files for the template:

The first two files, system.css and general.css contain some generic Joomla styles. The last one is all the CSS for the template, here called template.css. The PHP code <?php echo $this->template ?> will return the name of the current template. Writing it in this way rather than the actual real path makes the code more generic. When you create a new template you can just copy it (along with the whole header code) and not worry about editing anything.

The template CSS files can have any number of files, for example conditional ones for different browsers. This one targets IE6:

This example is part of a technique to use a template parameter:

Blank Joomla 1.5 Template Body

Creating our first template will be very very easy! Ready?

All we need to do is use Joomla statements that insert the contents of any modules and the mainbody.

At this point (if you preview it), our site does not look very awe inspiring. The output is shown in Figure 9.3.

Figure 9.3
An unstyled template

The template contains the following in reasonably logical order:

• name of the site
• top module
• left modules
• main content
• right modules

The Least You Need to Know
The most basic template simply loads the Joomla modules and mainbody (component). Layout and design is part of the CSS, not Joomla.

The goal is to try and come as close to semantic markup as possible. From a Web point of view, it means a page can be read by anyone[md]a browser, a spider, or a screen reader. Semantic layout is the cornerstone of accessibility.

NOTE
What we have here really is only the potential for semantic layout. If we were to go ahead and put random modules in random locations, we would have a mess. An important consideration for CMS sites is that a template is only as good as the population of the content. It is this that often trips designers up when trying to validate their sites.

You will notice that we have used the first of a number of commands specific to Joomla to create this output:

The PHP echo statement simply outputs a string from the configuration.php file. Here, we are using the site name; we could as easily have had the following:

The jdoc statement inserts various types of XHTML output, either from modules of components.
This line inserts the output from a component. What component it is will be determined by the menu link:

NOTE
Interestingly enough, you seem to be able to have multiple instances of component output. Not sure why you would want to, but I thought I would let you know! Might be a bug.

This line inserts the output for a module location:

The full syntax is actually

We look at the various options for styles in the section about modules later in this chapter.

CSSTemplateTutorialStep1

At this point we have a very bare template. I have created an installable template that is available from the Compass library:

CSSTemplateTutorialStep1.zip.

This will install a template that has only two files, the index.php and templateDetails.xml. I removed references to other files to give a bare bones output with no CSS. This is actually a useful diagnostic template; you can install it and track errors that are occurring with a component or module.

 

This sample content is excerpted from the forthcoming book, titled Joomla! A User’s Guide: Building a Joomla! Powered Website, to publish in 2007, by Prentice Hall Professional.

The author, Barrie North creates Joomla Templates and Tutorials at  www.compassdesigns.net. This work is licensed under a Creative Commons Attribution NonCommercial ShareAlike 2.5 License. This attribution must be reproduced in full.

Using CSS to Create a Tableless Layout

We will be using pure CSS to make a 3-column layout for the Joomla template. We will also be making it a fluid layout. There are two main types of web page layout[md]fixed and fluid[md]and they both refer to how the width of the page is controlled.

The width of the page is an issue because of the many browser resolutions at which people surf the Web. Although the percentage is dropping, about 17% of surfers are using an 800×600 resolution. The majority, 79%, are using 1024×768 and higher2. Making a fluid layout means that your valuable web page won’t be a narrow column in the 1024 resolution and will be visible in full on smaller monitors.

A typical design might use tables to layout the page. They are useful in that you just have to set the width of the columns as percentages, but they have several drawbacks. For example, tables have lots of extra code compared to CSS layouts. This leads to longer load times (which surfers don’t like) and poorer performance in search engines. The code can roughly double in size, not just with markup but also with something called “spacer gifs.”

Even big companies sometimes fall into the table trap, as seen by a recent controversy about the new disney.co.uk website3:

There are a couple of major problems with a site that uses tables for layout.

• They are difficult to maintain. To change something you have to figure out what all the table tags like td/tr are doing. With CSS there are just a few lines to inspect.
• The content cannot be source-ordered. Many Web surfers do not see web pages on a browser. Those viewing with a text browser or screen reader will read the page from the top left corner to the bottom right. This means that they first view everything in the header and left column (for a 3-column layout) before they get to the middle column, the important stuff. A CSS layout, on the other hand, allows for “source-ordered” content, which means the content can be rearranged in the code/source. Perhaps your most important site visitor is Google, and it uses a screen reader for all intents and purposes.

Let’s look at our layout using CSS. You can position elements (stuff) in several ways using CSS. For a quick introduction, a good source is Brainjar’s CSS Positioning.

If you are new to CSS, you might read at least one beginner’s guide to CSS. Here are a few suggestions:

• Kevin Hale’s An Overview of Current CSS Layout Techniques
  particletree.com/features/an-overview-of-current-css-layout-techniques/
• htmldog’s CSS Beginner’s Guide
  www.htmldog.com/guides/cssbeginner/
• yourhtmlsource.com
  www.yourhtmlsource.com/stylesheets/

The Least You Need to Know
Modern web design uses CSS rather than tables to position elements. It’s difficult to learn but worth the investment. There are many (non-Joomla) resources available to help you.

We will be using float to position our content. At its most basic, the template might look like Figure 9.4.
Still not very exciting, but let’s see what the different parts are all about.

The CSS styles are defined here in the head of the file to show what is going on, but normally they would be in the template.css file.

Everything is contained in an element called #wrap. This has a fluid width that ranges between 760px and 960px.

Figure 9.4
Basic template layout

In Figure 9.4, the left, middle, and right columns are each given their own element. Each is floated left and given a percent width that together add up to 100%. The clear:both style on the footer tells the browser to “stop floating” and makes the footer stretch across all three columns. When we build our second template in this chapter, we will have to use a more advanced clearing technique.

To improve the layout and to add some breathing room to the content, we need to add some column spacing, commonly called “gutter.” Unfortunately, there is a problem here. You might know that Internet Explorer does not interpret CSS correctly. One problem is that it calculates width differently. We can solve this problem by not using any padding or borders on something that has a width. To get our gutter, we add another <div> element inside the columns.

To the CSS we add

Our resulting <body> code for index.php is:

Our template.css file looks like this:

TIP
CSS Shorthand
It’s possible to reduce the amount of CSS code by using “shorthand.” One example of this is padding and margin styles applied to an element, where:

can be replaced by:

There are “shorthand” styles at the beginning of each style definition. After you have figured out the styles, fill the shorthand versions in and delete the long versions. The syntax is:

Here is an example. Rather than using this

use this:

Read more about this syntax at An Introduction to CSS shorthand properties
http://home.no.net/junjun/html/shorthand.html.

This simple layout is a good one to use for learning about how to use CSS with Joomla because it shows two of the advantages of CSS over table-based layouts, it is less code, and it is easier to maintain.

owever, it is not source-ordered. For that we must use a more advanced layout known as a nested float.
Source-ordered layouts perform better for SEO than ones where the important content occurs late in the code. From a Joomla site perspective, the important content is that which is coming from the component.

Default CSS

So far, all of our CSS has been only about layout, which will make a plain page. So let’s add some formatting:

We have centered the page by using a small hack. This has to be done because Internet Explorer does not read CSS accurately. With a standards-compliant browser, we could just say margin:0 10%; to center the page, but IE does not recognize that, so we center the “text” of the whole page and then align it back left in the columns.

In celebration of IE7’s support of min/max width (which IE6 does not), we can add in a minimum and maximum width. Note we have to add a tiny hack for IE6 as it does not understand these. It will ignore the !important statement and have a plain, old 960px width.

NOTE
It might seem strange to define our columns in percentage widths and then have a containing div that is fixed. Well, a few things are going on here:

• Having fluid columns inside a fixed width container makes the template very flexible. If we add width changer buttons, we only need to change one value.
• We still have a max-width so why not go all fluid? Many viewers on the Web now have enormous screens. Usability research tells us that lines of text over 900px wide are hard to read because the eyes have to go a long way to go to the next line. Limiting the fluidity makes the site more useable/accessible.

We have also added a new style to the columns: overflow:hidden. This will make the page “break” more consistently as we reduce its width.

At the beginning of the typography, with CSS we will set some overall styles and have what is known as a global reset:

Everything is given a zero margin and padding, and then all block level elements are given a bottom margin. This helps achieve browser consistency. You can read more about the global reset at clagnut5 and left-justified.

The font size is set to 76%. The reason for this is to try and get more consistent font sizes across browsers. All font sizes are then set in em. Having line-height:1.3 helps readability. This means that the pages will be more accessible because the viewer will be able to resize the fonts to their own preferences. This is discussed more at “An experiment in typography” at The Noodle Incident (Owen Briggs)

If we were to add some background colors to the header, sidebars, and content containers, we would see something like what is shown in Figure 9.5.

Figure 9.5
Basic template with typography

Notice that the side columns do not reach their footer. This is because they only extend as far as their content; where the space is white on the left and on the right, they don’t exist.

If we have a template that has a white background for all three columns, this is no problem. We will use this approach and will have boxes around the modules. If we want equal height columns that are colored or have boxes, we have to use a background image that will tile vertically. This technique is called Faux Columns and is described by Douglas Bowman8 and Eric Meyer.

Joomla-Specific CSS

Although Joomla 1.5 has the functionality to override the core output in a template, its default rendering still uses significant tables to output content in the main body. Along with these tables, CSS output is available for a designer to style pages. Based on some research by various community members, Table 9.2 shows the current list. Note it does not include generic web page styles like H1, H2, p, ul, a, form, and so on.

Table 9.2
Legacy Default CSS Styles from 1.0 in 1.5

Many designs you might see in Table 9.2 actually have given CSS styles that are more specific in their definitions. Basically, a more specific rule overrides a less specific rule.

For example

The color on a link and the color of the .contentheading will be red, as that rule is more specific (as .contentheading is contained within a <div>)

In the case of Joomla templates, you will often see more specific rules used. This often occurs when the class is on a table. Here are more examples:

.moduletable is the name of the <div> that wraps a module. table.moduletable will only apply the style to a table with class=”moduletable” on it.

.moduletable will apply the style regardless of what element the class is on.

a.contentpagetitle:link will apply the style to any a tags with a .contentpagetitle class on them that is a link.
.contentpagetitle a:link will apply the style to any elements inside .contentpagetitle that are links.

Specificity is not easy to understand; its often easier to start by using the most general style possible and then getting more specific if the results are not what you expect.

Here are some links to websites that discuss specificity in detail:

• www.htmldog.com/guides/cssadvanced/specificity/
• www.meyerweb.com/eric/css/link-specificity.html
• www.stuffandnonsense.co.uk/archives/css_specificity_wars.html

At the moment, our template is using several tables. As mentioned earlier, this slows the pages down and makes them harder to update. To reduce the number of tables, when we call the modules, we need to use style parameters in the jdoc:include.

The Least You Need to Know
Joomla will output specific elements, ids, and classes in the code of a webpage. These can be predicted and used to style the design using CSS.

Modules in Templates

When a module is called in the index.php, it has several options on how it is displayed.
The syntax is:

The style is optional and is defined in templates/system/html/modules.php. Currently, the default modules.php file contains the following layouts.

OPTION=”table” (default display) modules are displayed in a column. The following shows an example of the output:

OPTION=”horz” makes the modules appear horizontally. Each module is output in the cell of a wrapper table. The following shows an example of the output:

OPTION=”xhtml” makes modules appear as a simple div element. The following shows an example of the output:

OPTION=”rounded” makes modules appear in a format that allows, for example, stretchable rounded corners. If this $style is used, the name of the <div> changes from moduletable to module. The following shows an example of the output:

OPTION=”none” makes modules appear as raw output containing no element and no title. Here is an example:

As you can see, the CSS options (xhtml and rounded) are much leaner in code, which makes it easier to style the web pages. I don’t recommend using suffixes of table (default) or horz unless absolutely needed.

Here’s the really good bit!

If you examine the modules.php file, you will see all the options that exist for modules. It’s easy to add your own; this is part of the new templating power that is in 1.5.We will look at this in more details in our section on template overrides.

To develop our template, we will put a module style of “xhtml” on all of our modules:

Note that we cannot put these module styles on the <jdoc:include type=”component” /> because it is not a module.

The Least You Need to Know
In 1.5, the output of modules can be completely customized, or you can use the pre-built output. All of these options are called module chrome.

We have also placed the site title inside an <H1> tag. It’s more semantically correct and will also help in SEO. Let’s also remove the background from the layout divs.

We will also add some CSS to style the modules with a border and a background for the module titles.
Our CSS now looks like this:

NOTE
Several of the menus in the default installation have a menu suffix in the module properties of _menu. To get everything behaving properly, I deleted that parameter.

This typography CSS now produces the result shown in Figure 9.6.

Figure 9.6
Basic template with module title styling

Menus in Templates

We saw in Chapter 5, “Creating Menus and Navigation,” that there are a number of settings for how a menu will be rendered.

Again, using CSS lists rather than tables results in reduced code and easier markup. After setting all our menus to lists we have only 12 tables (we’ll see how to remove the rest using the new version 1.5 override feature). Remember, the list setting is the new 1.5 version; flat list is from 1.0 and will be depreciated.

ists are also better than tables because text-based browsers, screen readers, non-CSS supporting browsers, browsers with CSS turned off, and search bots will be able to access your content more easily.
One of the other advantages of using CSS for menus is that there is a lot of example code on various CSS developer sites. Let’s look at one of them and see how it can be used.

A web page at maxdesign.com10 has a selection of over 30 menus, all using the same underlying code. It’s called the Listamatic. There is a slight difference in the code that we have to change in order to adapt these menus to Joomla.

These lists use the following code:

This means that there is an enclosing <div> called navcontainer, and the <ul> has an id of navlist. To duplicate this effect in Joomla, we need have some sort of enclosing <div>.

We can achieve this by using module suffixes. If you recall, the output of an XHTML style option module is:

If we add a module suffix, that will get added to the moduletable class, like this:

So when picking a menu from Listamatic, you would need to replace the navcontainer class style in the CSS by moduletablesuffix.

NOTE
Module suffixes to a certain extent blur the line between site design and site administration. One of the goals of further development of the Joomla core is to clearly separate these roles. The implication is that it is likely that they might get depreciated in future versions beyond 1.5.

This use of a module class suffix is useful. It allows different colored boxes with just a simple change of the module class suffix.

The Least You Need to Know
It’s best to always use the bulleted or flat list for menu output. You can then make use of many free resources for the CSS that are available on the Web.

For our site we will use List 10 by Mark Newhouse.11 Our CSS will be:

We then need to add the module suffix of menu (no underscore in this case) to any modules of menus we want to be styled. This will produce a menu like what’s shown in Figure 9.7.

For any menu we want to be styled this way, we have to add “menu” as a module suffix.

Figure 9.7
Basic template with menu styling

TIP
When trying to get a particular menu to work, here is a useful tip: Create a default Joomla installation and then look at the code that makes up the mainmenu. Copy and paste this code into an HTML editor (like Dreamweaver). Replace all the links by “#,” and then you can add CSS rules until the effect you want is achieved. The code for the menu to create the style is as follows:

The CSS is embedded instead of linked to make editing easier.

Hiding Columns

So far, we have our layout such that we always have three columns, regardless of whether there is any content included. From the perspective of a CMS template, this is not very useful. In a static site the content would never change, but we want to give our site administrators the ability to put their content anywhere they want to without having to worry about editing CSS layouts. We want to be able to “turn off” a column automatically or “collapse” it if there is no content there.

During the development of the Joomla 1.5 templating engine, there were a number of changes and improvements. Quoting directly from the Joomla development blog:

The changes to the template system in Joomla 1.5 can be divided into two categories. First of all there are changes to the way things where done in Joomla 1.0, for example the new way modules are loaded, and second there are also a bunch of extra features, like template parameters[el]a quick overview:

mosCountMoules

The mosCountModules function has been replaced by the $this->countModules function and support for conditions has been added. This allows designers to easily count the total number of modules in multiple template positions in just one line of code, for example $this->countModules(‘user1 + user2’); which will return the total number of modules in position user1 and user2.

NOTE
More information is also available in the Joomla forum.

So the general use of mosCountModules would be:

There are four possible conditions. As an example let’s count the number of modules in Figure 9.7. We could insert this code somewhere in the index.php:

• countModules(‘left’). Will return 4; there are 4 modules on the left.
• countModules(‘left and right’). Will return 1; there is a module in left and right position.
• countModules(‘left or right’). Will return 1; there is a module in left or right position.
• countModules(‘left + right’). Will return 7; counting the modules in left and right. position

In this situation, we need to use the function that allows us to count the modules present in a specific location. So for example, if there is no content published in the right column, we can adjust the column sizes to fill that space.

There are several ways to do this. We could put the conditional statement in the body to not show the content and then have a different style for the content based on what columns were there. To make it as easy as possible, I have a series of conditional statements in the head tag that (re)define some CSS styles:

So we count:

• If there is nothing in left OR right, we are 100%.
• If there is something in left OR right, we are 80%.
• If there is something in left AND something in right, we are 60%.

We then need to change the index.php file in the content div to:

Change the layout css to:

The PHP conditional statements in the head must appear after the line that links to the template.css file. This is because if there are two identical CSS style rules; the one that is last will overwrite all the others.
This can also be done in a similar fashion by having the if statement import a sub CSS file.

TIP
While you try to troubleshoot your conditional statements, you can add a line of code into your index.php, like this, to show what the value is:

So we are half-way there, but now we have empty div containers where the columns are.

Hiding Module Code

When creating collapsible columns, it is good practice to set up the modules not to be generated if there is no content there. If this is not done, the pages will have empty <div>s in them, which can lead to cross browser issues.

To hide the empty <div>, the following if statement is used:

Using this code, if there is nothing published in left, then <div id=”sidebar”> will not be outputted.

Using these techniques for our left and right columns, our index.php file now looks like the following code. We will also add an include for the breadcrumbs module, the module that shows the current page and pathway. Note that this now needs to be included in the index.php file and also published as a module.

The Least You Need to Know
Elements such as columns or module locations can be hidden (or collapsed) when there is no content in them. This is done using conditional PHP statements that are linked to different CSS styles.

I would recommend a slightly different way of producing the footer. In the manner shown here, it is hard coded into the index.php file, which makes it hard to change. Right now the “footer” module in the administrative backend shows the Joomla copyright and can’t be easily edited. It would make much more sense to have a custom (X)HTML module placed in the footer location so the site administrator can more easily change it. If you wanted to create your own footer, you would simply unpublish that module and create a custom html module with whatever language you wanted.

In this case we would replace

with

We must also remember to add this position to the templateDetails.xml file.

TIP
There are several names associated with modules in Joomla: banner, left, right, user1, footer, and so on. One important thing to realize is that the names do not correspond to any particular location. The location of a module is completely controlled by the template designer, as we have seen. It’s customary to place them in a location that is connected to the name, but it is not required.

This basic template shows some of the fundamental principles of creating a Joomla template.

CSSTemplateTutorialStep2

We now have a basic, but functional template. Some simple typography has been added, but more importantly, we have created a pure CSS layout that has dynamic collapsible columns. I have created an installable template that is available from the Compass library:

CSSTemplateTutorialStep2.zip

Now that we have the basics done, let’s create a slightly more attractive template using the techniques we have learned.

 

This sample content is excerpted from the forthcoming book, titled Joomla! A User’s Guide: Building a Joomla! Powered Website, to publish in 2007, by Prentice Hall Professional.

The author, Barrie North creates Joomla Templates and Tutorials at  www.compassdesigns.net. This work is licensed under a Creative Commons Attribution NonCommercial ShareAlike 2.5 License. This attribution must be reproduced in full.

Making a Real Joomla 1.5 Template

The first thing we need to start with is our comp. A comp is the design that will be the basis of the template. We will be using one kindly donated by Casey Lee, the Lead Designer from Joomlashack14 for our purposes. It’s called “Bold,” and we can see it in Figure 9.8.

Figure 9.8
A design comp from Joomlashack

Slicing and Dicing

The next step in the process is what is known as slicing. We need to use our graphics program to create small sliced images that can be used in the template. It’s important to pay attention to how the elements can resize if needed. (My graphics application of choice is Fireworks, because I find it better suited to web design[md]as opposed to print[md]than Photoshop).

Setting Up Module Locations

This template will have some specific locations for specific modules, slightly different from the standard Joomla installation. To make sure the modules are correctly set up as you work through this template, make sure of the following:

• User1=for the search module
• User2=for the top menu
• Top=for newsflash or custom HTML module

Nothing else should be published in these locations.

Header

The header image has a faint swish at the top. We want to retain that, so we put the image in as a background and then assign a color also. That way, the header will scale vertically if we need it to, for example, if the font sizes are resized. We also need to change the colors of any type to white so that they will show up on the black background.

We also use the background image for the search box. We need to make sure that we target the correct input by using CSS specificity. I have also used absolute positioning inside a relatively positioned element to place the search box where I want it. The image will not scale with text resizing with just a single image. That would require a top and bottom image. That’s another exercise for you!

I did not use a graphical logo here; I used plain text. The reason is mainly because SEOs, as search engines, cannot read images. One could do some nifty image replacement, but I will leave that as an exercise for you to do on your own.

Our header now looks like what’s shown in Figure 9.9.

Figure 9.9
Header image background

Next, we need to implement a technique used to show a background on a fluid column: sliding doors.

Column Backgrounds

Recall that when we put a color background on the columns, the color did not extend all the way to the footer. This is because the div element, in this case sidebar and sidebar-2, is only as tall as the content. It does not grow to fill the containing element.

We have to use a technique called Sliding Faux Columns, with which you essentially create two wide images that will slide over each other. We need to create two new containers to hold the backgrounds. Normally, we could apply one to the #wrap, but I am using an extra (and wasteful) container for illustration purposes.

For a full description, you can check out these two guides:

• http://alistapart.com/articles/fauxcolumns/
• www.communitymx.com/content/article.cfm?page=1&cid=AFC58

In our case, our maximum width is 960px, so we start with an image of that width. In the image source files, it is slidingcolumns.png. We then export two slices (I used the same slice and just hid/revealed the side images), one 960px wide with a 192px background on the left, and one 960px wide with a 196px background on the left.

NOTE
The left image needs to have a white background, and the right needs a transparent background. I modified the color of the backgrounds as I exported the images from the source file.

Were does 192px come from? Its 20% of 960, as our columns are 20% wide.
We use the background-position property to place the images in the correct place. Here, we are using condensed CSS format so they are part of the background property:

In our index.php, we simply added an inner container inside the wrap:

We also need to put a conditional on the closing div‘s:

We must also put a background onto our footer and bottom modules/elements; otherwise, the column background would be shown:

We need to clear the floats so that the float container (the faux columns) will extend to the bottom of the page. The traditional method to do this was to use the property :after.15 But with the release of IE7, this method will not work completely. We need to address clearing the floats in Internet Explorer 6 and 7, and this is where it all goes down the tubes.

A couple of solutions have been found.

We are going to use the Float (nearly) Everything option here.

Thus, we add a simple clear:both to the #footer, and we add floats to the fauxcol wrappers. We add these to a conditional stylesheet specifically for IE6:

We will have to add some conditional statements to the head of the index.php file:

Flexible Modules

In our design, we have a large initial module block. We don’t know how tall the text will be that is needed. To solve that problem, we put the module jdoc:include statement in a containing element and give it a background of the same color as the image. This is the same strategy we used for the header:

Note we have also used a conditional comment so that if the top module location has no content, the orange teaser image will not be there. What will be there is an empty container that will contain a little of the background image and 20px worth of vertical padding. This is purely for aesthetics.

The CSS needs to use CSS specificity to override the moduletable styles that have been defined earlier:

Now we need to focus on some of the typography.

Typography

Many of the links will need to be white, so we will define them as such globally and then modify the color for the center column:

The design has a stylized button. We create this using a background image from the comp. It’s a thin slice that is tiled horizontally:

For tables, such as FAQ, we can add an easy background by repeating the use of the image we used for the teaser. Reusing the image is thematic and also saves on image download, making the pages load faster.

Modules need just a simple redefinition and adjustments to the padding and margins:

Menus, as always, need a lot of style CSS. Here, we keep it as simple as possible. We slice a single image that includes both the bullet and the underline. Not that the styling is turned “on” by applying a module suffix of menu to any list of the links that we want this look applied to:

Last is the Tab menu at the top right. As an accessibility advocate, we want to set this up so that the tabs will scale as the font is resizing. Fortunately, a technique has been developed to do this; it’s actually the same principle we use for our columns, the sliding doors again!

We will also try and do some speed optimization for the template and use just a single image for the left and right side of the “doors,” as well as the on and off state. This is known as using sprites.

The CSS is not too hard; we just have to fiddle around with the vertical position of the image background for the on state:

We will also need to add the module suffix of tabs to the module for the menu we are using.

If you look back at the original design, you will notice that there were icons on these tabs. As we are already using two background images, one on the li and one on the link, we would need a third element on which to place the icon background. You could do this by having a span, but this is advanced CSS Jujutsu.

I’ll leave that as a homework assignment.

The last thing that remains is to revise the templateDetails.xml file. It needs to contain all the files and images used in the template so it will install properly as a zip file. There are a number of tools that will do this automatically for you if you are using 1.0.X, but at the time of writing, none are available for 1.5.

Our finished template should look like Figure 9.10.

Figure 9.10
Advanced template with typography

The Least You Need to Know
Creating a production Joomla template is more a question of graphical design and CSS manipulation than some special “Joomla knowledge.”

CSSTemplateTutorialStep3

We now have a template based on a comp (or design). Some simple typography has been added, but more importantly, we have created a pure CSS layout that has dynamic collapsible columns and a slick tabbed menu. I have created an installable template that is available from the Compass library:
CSSTemplateTutorialStep3.zip.

Now that we have the basics done, let’s start delving into some of the advanced features possible with 1.5 templates.

 

This sample content is excerpted from the forthcoming book, titled Joomla! A User’s Guide: Building a Joomla! Powered Website, to publish in 2007, by Prentice Hall Professional.

The author, Barrie North creates Joomla Templates and Tutorials at  www.compassdesigns.net. This work is licensed under a Creative Commons Attribution NonCommercial ShareAlike 2.5 License. This attribution must be reproduced in full.

Advanced Templating Features

Joomla 1.5 offers a number of advanced template features that significantly expand what is possible with templates. We have already seen one example in this chapter, the ability to create custom chrome or output for modules.
Let’s examine each of these in turn:

• Template Parameters
• Template Overrides

Template Parameters

New in 1.5 is the addition of template parameters for templates. This allows you to pass variables to the template from options selected in the administrative backend.

We can add a relatively simple parameter function to our template. In the templateDetails.xml file, add the following:

You will also need a file called params.ini in your template folder. It can be a blank file, but Joomla needs this file to store what settings you have. For example, an INI file for the previous example might look like this:

You need to make sure that this file is writable so changes can be made. We will also need to add that as a file in the templateDetails.xml file.

In the Template Manager for that template, you will see the settings for the parameter, as shown in Figure 9.11.

Figure 9.11
Template parameters in admin backend

We can see that it is a simple drop-down with three options.

Then we change the body tag in our index.php to the following:

We then add the following to the CSS file:

This gives us three options: a fixed narrow width, fixed wide width, and a fluid version.
Using template parameters in this way can give the site administrator flexibility in almost any facet of a template, width, color, and so on, all controlled with conditional PHP setting CSS styles.

Template Overrides

Perhaps the most powerful new feature of templates in 1.5 is the ability to easily override core output. This is done with new output files called template files that correspond to the layout views of components and modules. Joomla checks in each case to see if one exists in the template folder, and if there is, uses that one and overrides the normal output.

Override Structure

All of the layout views and templates are in the main core in a /tmpl/ folder. The location is slightly different for components as for modules because modules essentially have only one view. For example:

The basic structure of all components and modules is View>Layout>Templates.

Table 9.3 shows some examples; note that modules only have one view.

Table 9.3
Example overrides

There are usually several template files involved for a particular layout. They have a common naming convention (see Table 9.4).

Table 9.4
Naming convention of overrides

Overriding Modules

Each module has a new folder that contains its templates, which is called tmpl. Inside are PHP files that create the output. For example:

The first three are the three layouts of Newsflash based on which module options are chosen, and the _item.php file is a common layout template used by all three. Opening that file, we find:

We could change this to remove the tables to make a little more accessible:

This new file should be placed in the template directory in a folder called html as follows:

We just took the tables out of the Newsflash module[md]as easy as that!

Component Overrides

Components work almost exactly the same way, except there are several views associated with many components.

If we look in the com_content folder, we see a folder called views.

So these folders would match the four possible views for content, archive, article, category, and section.
Inside a view, we find the tmpl folder, and in that, the different layouts that are possible.

If we look in the category folder, we see:

Note that in the case of com_content, the default.php layout is referring to the standard layout that presents articles as a link list.

Opening up the blog_item.php file we see the tables currently used. If we want to override the output, we put what we want to use in our template/html/ folder, for example:

It’s a relatively simple process to copy and paste all these views from the /components/ and /modules/ folders into the templates/yourtemplate/html folder.

The template override functionality provides a powerful mechanism to customize your Joomla site through its template. You can create output templates that focus on SEO, accessibility, or the specific needs of a client.

The Least You Need to Know
Joomla 1.5 offers new features for templates that allow designers to completely control the code and presentation of a Joomla website.

Tableless Joomla

The Joomla download also contains a template called Beez that is a developed example of the template overrides in action. The Design and Accessibility team have created a full example set of overrides as contained in the html folder. Our final example is a template that uses these overrides to remove all tables from the output of Joomla.

CSSTemplateTutorialStep4

We now have a template based on a comp (or design). More visual typography has been added, but more importantly, we have used our pure CSS layout to create a template that has dynamic collapsible columns and a slick tabbed menu. We have then overridden the output of Joomla so that no other tables are used. I have created an installable template that is available from the Compass library:

CSSTemplateTutorialStep4.zip

This sample content is excerpted from the forthcoming book, titled Joomla! A User’s Guide: Building a Joomla! Powered Website, to publish in 2007, by Prentice Hall Professional.

The author, Barrie North creates Joomla Templates and Tutorials at  www.compassdesigns.net. This work is licensed under a Creative Commons Attribution NonCommercial ShareAlike 2.5 License. This attribution must be reproduced in full.

Summary

In this chapter, we worked through four examples of templates, each time building the complexity and features.

• Modern websites separate content from presentation using a technology known as Cascading Style Sheets (CSS). In Joomla, the template controls the presentation of the content.
• When creating a template, you have to have Joomla “running” on a server so you can make changes and refresh the page output.
• Creating valid templates should be a path not a goal. The idea is to make your template as accessible as possible, for humans and spiders, not to achieve a badge for valid markup.
• The most basic template simply loads the Joomla modules and mainbody (component). Layout and design are part of the CSS, not Joomla.
• Modern web design uses CSS rather than tables to position elements. It’s difficult to learn but worth the investment. There are many (non-Joomla) resources available to help you.
• Joomla will output specific elements, ids, and classess in the code of a web page. These can be predicted and used to style the design using CSS.
• In 1.5, the output of modules can be completely customized, or you can use the pre-built output. All of these options are called module chrome.
• It’s best to always use the bulleted or flat list for menu output. You can then make use of many free resources on the Web for the CSS.
• Elements such as columns or module locations can be hidden (or collapsed) when there is no content in them. This is done using conditional PHP statements that are linked to different CSS styles.
• Creating a production Joomla template is more a question of graphical design and CSS manipulation than some special “Joomla knowledge.”
• Joomla 1.5 offers new features for templates that allow designers to completely control the code and presentation of a Joomla website.

 

 

 

Links and Resources

www.upsdell.com
www.brainjar.com
www.clagnut.com/blog/1287/
leftjustified.net
www.thenoodleincident.com
www.stopdesign.com
www.meyerweb.com
css.maxdesign.com.au
css.maxdesign.com.au
forum.joomla.org
www.joomlashack.com
positioniseverything.net
www.quirksmode.org
www.sitepoint.com
orderedlist.com/
www.alistapart.com
www.fiftyfoureleven.com