[Developer]

Joomla! 1.5 Template Tutorial

Here we go this topic closed and i will update per day with new lessons best regards guys

[Developer]

Joomla 1.5 Template Tutorial

Article Index

Joomla 1.5 Template Tutorial What is a Joomla 1.5 Template? Creating a Simple Blank Template Using CSS to Create a Tableless Layout Making a Real Joomla 1.5 Template Advanced Joomla 1.5 Template Features Summary and Comments All Pages

Waiting Us With More Tutorials

[Developer]

Creating a pure CSS layout Joomla Joomla 1.5 Joomla template

In this chapter, we'll go through the steps of creating a Joomla Joomla template. Specifically, we will create a template that uses Cascading Style Sheets (CSS) to produce a layout without use of tables. This is a desirable goal because it means that the template code is easier to validate to World Wide Web Consortium (W3C) standards. It will also tend to load faster, be easier to maintain, and perform better in search engines. These issues are discussed in detail later in the chapter.

[Developer]

In This Chapter

• What is a Joomla 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 Joomla 1.5 template?

[Developer]

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: Cascading Style Sheets). 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.