Creating Pure CSS Templates in Joomla!
- What Is a Joomla! Template?
- The Localhost Design Process
- W3C and Tableless Design
- Creating a Simple Template: CSSTemplateTutorialStep1
- Using CSS to Create a Tableless Layout: CSSTemplateTutorialStep2
- Making a Real Joomla! 1.5 Template: CSSTemplateTutorialStep3
- Advanced Templating Features: CSSTemplateTutorialStep4
- Summary
This chapter is from the book
This chapter is from the book
This chapter is from the book
This chapter walks through the steps of creating a Joomla template. Specifically, you will create a template that uses Cascading Style Sheets (CSS) to produce a layout—without using tables. This is a desirable method because it makes the template code easier to validate to World Wide Web Consortium (W3C) standards. It also tends to load faster, is easier to maintain, and performs better in search engines. These issues are discussed in detail later in the lesson. This lesson covers the following topics:
- What is a Joomla template? What functions does a Joomla template perform, and what is the difference between a template that has no content and a template whose content is added to the CMS?
- How does the localhost design process differ from that of a static HTML or XHTML web design process?
- What are the implications of tableless design in Joomla, and what is 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 three-column layout by using CSS rather than tables?
- What are the basic CSS styles that should be used with Joomla, and what are the default styles that the Joomla core uses?
- How do you place and style modules, and what are some new techniques for rounded corners?
- What would be a simple strategy for producing lean CSS menus that mimic the effects of menus developed with JavaScript?
- How do you control when columns are shown and hide them when no content is present?
- What are the proper steps in creating a Joomla 1.5 template?
A Disclaimer or Two or Three
This is probably the most technical chapter in the book. To be successful with this chapter, you need a firm grasp of XHTML and CSS; for example, you need to understand what float does and how to clear it.
If you are not sure if you have the skills needed to make a Joomla template, I strongly advise grabbing a template from Joomlashack.com. Yes, I am recommending a template company that I am involved in, but at Joomlashack we specialize in creating bloat-free simple templates that are easy to understand and customize. A good way to learn is to grab one of our free templates and try to reverse engineer it to see how it works.
What Is a Joomla! Template?
A Joomla template is a series of files within the Joomla CMS that control the presentation of content. A Joomla template is not a website; it's also not considered a complete website design. A template is the basic foundational design for viewing a Joomla website. To produce the effect of a "complete" website, the template works hand-in-hand with content stored in Joomla databases. Figure 9.1 shows an example of this.
)
Figure 9.1 A template with and without content.
Figure 9.1, part A, shows a template in use with sample content. Part B shows the template as it might look with a raw Joomla installation and little or no content. The template is styled so that when your content is inserted, it automatically inherits the styles from stylesheets 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:
- Joomla does all the work of placing content within pages. You can add new information to existing blog pages simply by typing a new article. The template and its CSS make sure it appears stylistically consistent with other content on the site.
- 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 determining whether a site meets modern web standards. In a standards-compliant site, the HTML tags for tables are reserved for presenting tabular data and not laying out a page into columns.
- You can apply a new template, and hence a completely new look to a website, instantly. This can involve different locations for positioning content and modules, as well as colors and graphics.
The Least You Need to Know
Modern websites separate content from presentation by using templates and CSS. In Joomla, a template controls the presentation of content.