Creating Pure CSS Templates in Joomla! 1.6
This chapter is from the book
This chapter is from the book
This chapter is from the book
This chapter 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.6 template?
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.
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.