Creating a Jooml template by standards - part 1 (continued)

This is a continuation of the article. Start here .

index.php

What is actually the index.php file? This is a combination of (X) HTML and PHP, which defines everything needed to display page elements.

First, look at the element that is essential for creating valid templates - the DOCTYPE at the top of the index.php file. This code snippet appears at the top of all web pages. On the pages of our template, we see the following:

')

 <? php // no direct access defined ('_JEXEC') or die ('Restricted access');  ?>
 <! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

The first line in PHP is simply to make sure that the file is not accessed directly, for security reasons.

A web page's doctype is one of the fundamental parameters on the basis of which the browser decides how to display this page, in particular, how the browser interprets CSS. For a better understanding, here is a good quote from alistapart.com:

[Information on the W3C website about DOCTYPE] is compiled by geeks for geeks. And when I say “geeks,” I don’t mean ordinary Web professionals like you or me. I mean those geeks who make us look like Grandma on the day when She First Received an E-mail.

In any case, you can use different doctype. Essentially, the DOCTYPE tells the browser how to interpret the page. From the very beginning, when the Web appeared, different browsers had different levels of CSS support. For example, Internet Explorer will not understand the min-width command used to set the minimum page width. In order to duplicate the effect, you have to use the “hacks” in CSS.

Some say that processing XHTML as text / html should be considered “harmful”. If you truly understand this statement, then you are far beyond this guide. You can read more on this topic at hixie.ch/advocacy/xhtml . “Strict” means that HTML (or XHTML) must be interpreted exactly according to standards. And “Transitional” in DOCTYPE means that certain deviations from standards are allowed on the page.

To complicate the picture, we add that there is also the so-called “quirks” mode (special tweaks). If the DOCTYPE is entered incorrectly, with an incorrect date, or not specified at all, the browser switches to quirks mode. In fact, this is an attempt to provide backward compatibility, for example, Internet Explorer 6 would interpret the page as IE4 would have done.

Unfortunately, people sometimes accidentally switch to quirks mode. This usually happens for two reasons:

They use the DOCTYPE declaration, copying it directly from the W3C site, so that the end of the link looks like DTD / xhtml1-strict.dtd, while this is a relative link on the W3C server. You need to specify the full path, as in the example above.
Microsoft has developed its IE6 so that it produces valid pages, while staying in the "quirks" mode. This usually happens when the "xml declaration" is specified before the DOCTYPE.

The following XML expression is specified (after the DOCTYPE):
```
 <html xmlns = "http://www.w3.org/1999/xhtml"
 xml: lang = "<? php echo $ this-> language;?>"
 lang = "<? php echo $ this-> language;?>">
```
The explanations about the “quirks” mode in IE are very important. In this article we are developing a template for IE6 +, therefore we must be sure that it works in standard mode. This minimizes the need for hacks, which we will have to apply later.

NOTE

Creating standards-compliant pages when you see "valid xhtml" at the bottom of the page does not really mean time-consuming layout or the use of obscure tags. It simply means that the code you are developing is consistent with the declared DOCTYPE, and nothing more.

Developing a site by standards can be described in one phrase as “say what you do, and then do what you say.”

Below are a few links to help you deal with the DOCTYPE parameter and the quirks mode:
What else is in the index.php file?

Look first at the header structure. We want to be as minimalistic as possible, but at the same time have everything you need to create a working site. We use the following heading:
```
 <? php // no direct access defined ('_JEXEC') or die ('Restricted access');  ?>
 <! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Transitional // EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns = "http://www.w3.org/1999/xhtml"
 xml: lang = "<? php echo $ this-> language;?>"
 lang = "<? php echo $ this-> language;?>">
 <head>
 <jdoc: include type = "head" />
 <link rel = "stylesheet" href = "/ templates / system / css / system.css" type = "text / css" />
 <link rel = "stylesheet" href = "/ templates / system / css / general.css" type = "text / css" />
 <link rel = "stylesheet" href = "/ templates / <? php echo $ this-> template?> / css / template.css" type = "text / css" />
 </ head>
```
What does all this mean?

We have already talked about the meaning of the DOCTYPE in the index.php file. Fragment
```
  <? php echo $ this-> language;  ?> 
```
retrieves the installed language from the global configuration.

The following snippet includes additional header information:
```
  <jdoc: include type = "head" /> 
```
This is the header information that is specified in the global configuration. It includes the following tags (in the default installation):
```
 <title> Welcome to the Frontpage </ title>  
 <meta name = "description" content = "Joomla! - the dynamic portal engine" />  
 <meta name = "generator" content = "Joomla! 1.5 - Open Source Content Management" />  
 <meta http-equiv = "Content-Type" content = "text / html; charset = utf-8" />  
 <meta name = "robots" content = "index, follow" />  
 <meta name = "keywords" content = "joomla, Joomla" /> 
 <link href = "/ component / content /? format = feed & type = rss" rel = "alternate" type = "application / rss + xml" title = "RSS 2.0" />  
 <link href = "/ component / content /? format = feed & type = atom" rel = "alternate" type = "application / atom + xml" title = "Atom 1.0" />  
 <script type = "text / javascript" src = "http: //localhost/Joomla-1.5RC2/media/system/js/mootools.js"> </ script>
 <script type = "text / javascript" src = "http: //localhost/Joomla-1.5RC2/media/system/js/caption.js"> </ script>
```
Most of this information is generated on the fly in accordance with the data of the current page (article). It includes a number of meta tags for favicon, RSS feed addresses and some standard JavaScript files.

The last lines in the header contain links to the template CSS files:
```
 <link rel = "stylesheet" href = "/ templates / system / css / system.css" type = "text / css" />
 <link rel = "stylesheet" href = "/ templates / system / css / general.css" type = "text / css" />
 <link rel = "stylesheet" href = "/ templates / <? php echo $ this-> template?> / css / template.css" type = "text / css" />
```
The first two files - system.css and general.css contain some basic Joomla styles. The latter contains all template styles and is called here template.css. PHP code snippet
```
  <? php echo $ this-> template?> 
```
returns the name of the current template. Specifying it in this way, instead of the actual path, makes the code more portable. When you create a new template, you can simply copy it (including the entire title) without worrying about making corrections.

Any number of CSS files can be specified in the header, for example, for conditional styles defined for different browsers. For example, the following snippet defines such a style sheet for IE6:
```
 <! - [if lte IE 6]>
 <link href = "/ templates / <? php echo $ this-> template?> / css / ieonly.css" rel = "stylesheet" type = "text / css" />
 <! [endif] ->
```
The following example shows how template parameters can be used:
```
 <link rel = "stylesheet" href = "/ templates / <? php echo $ this-> template?> / css / <? php echo $ this-> params-> get ('colorVariation');?>. css" type = "text / css" />
```
Empty template body

Creating our first template will be very, very easy! You are ready?

All that is needed is to use Joomla expressions, which will add the contents of all modules to the main body of the page (mainbody):
```
 <body>
 <? php echo $ mainframe-> getCfg ('sitename');?> <br />
 <jdoc: include type = "module" name = "breadcrumbs" />
 <jdoc: include type = "modules" name = "top" />
 <jdoc: include type = "modules" name = "left" />
 <jdoc: include type = "component" />
 <jdoc: include type = "modules" name = "right" />
 </ body>
```
At the moment, our site does not look particularly impressive (see

illustration )

The template contains the following elements placed in a logical order:
- Name of the site
- upper module
- left modules
- main content
- right modules
What you need to know

Essentially, the template simply loads the Joomla and mainbody modules (component). The layout and design is CSS business, not Joomla.

Our goal is to get as close as possible to the semantic markup. From a Web perspective, this means that the page can be read by the browser, search engine spider, or screen reader. Semantic markup is the cornerstone of accessibility.

Note

In fact, we have here only some potential for semantic markup. For example, if we place random modules in random places, we will get complete confusion. An important look at CMS sites is that the template is just as good as its content filling. That is why so often find fault with the designers, trying to check their sites for validity.

You noticed that we first used a set of commands specific to Joomla:
```
 <? php echo $ mainframe-> getCfg ('sitename');?> <br />
 <jdoc: include type = "module" name = "breadcrumbs" />
 <jdoc: include type = "modules" name = "top" />
 <jdoc: include type = "modules" name = "left" />
 <jdoc: include type = "component" />
 <jdoc: include type = "modules" name = "right" />
```
The PHP expression “echo” simply displays the line from the configuration.php file. Here we used the name of the site, but you can, for example, display other parameters:
```
 The name of this site is <? Php echo $ mainframe-> getCfg ('sitename');?> <br />
 The administrator email is <? Php echo $ mainframe-> getCfg ('mailfrom');?> <br />
 This template is in the <? Php echo $ this-> template?> Directory <br />
 The URL is <? Php echo JURI :: base () ;;?>
```
The jdoc expression inserts various types of XHTML output, both modules and components. The next line inserts the component's output. Which component will be used will be determined by a link in the menu:
```
 <jdoc: include type = "component" />
```
NOTE

Interestingly enough, it seems to you that the output component can be used several times. Not sure if you want to do this, but I am telling you that this may be a mistake.

This line inserts the output of all modules defined for the “right” place:
```
 <jdoc: include type = "modules" name = "right" />
```
In fact, the complete syntax is:
```
  <jdoc: include type = "modules" name = "LOCATION" style = "OPTION" /> 
```
We will look at the various options for styles in the modules section later.

CSSTemplateTutorialStep1

At the moment we have a completely naked pattern. We have made an installable version that is available in the Compass library. You can download it from the link: www.compassdesigns.net/downloads/file/21-csstemplatetutorials1-4.html

The template created in step 1 consists of only two files, index.php and templateDetails.xml. I removed the links to all the other files to show a “bare” display, without CSS. In fact, it is a good diagnostic template that allows you to install it and track errors that occur in a component or module.

The original article in English can be read here:

www.compassdesigns.net/tutorials/208-joomla-15-template-tutorial.html?start=2

Continuation here

Source: https://habr.com/ru/post/41215/

All Articles

Creating a Jooml template by standards - part 1 (continued)

index.php

What else is in the index.php file?

What does all this mean?

Empty template body

What you need to know

CSSTemplateTutorialStep1

More articles: