Joomla template creation tutorial

Joomla template creation tutorial

In this tutorial, we will create a specific joomla template step by step. joomla is a powerful openCodeCMS (Content Management System), and she has a wide range of online community support. we will not use table (form), but use Cascading Style Sheets (CSS) to create a template. the ultimate goal of this approach is to better adapt to the World Wide Web Consortium (W3C) standards. this also promotes faster load loading (I don't know whether it is a browser or a search engine) and easier indexing by search engines. we will discuss it in detail in the following description.
 

This Guide includes the following chapters:

* What is a joomla template? Explain how to execute a joomla template and compare a common template without content with a CMS template.
* The process of local template editing mainly explains the differences between the design process and static Web pages.
* W3C standards and forms-free design: mainly discusses the relationship between table-free design and W3C standards in joomla.
* Joomla template composition. joomla template file composition and those processes in the template are executed.
* Use the Cascading Style Sheets (CSS) layout to discuss how to replace the table layout with the CSS layout.
* Default joomla style sheet. This section describes some basic joomla CSS applications. How to call the powerful joomla kernel.
* Modules components. How to arrange your components and some tips.
* Menus menu. Use CSS to create some simple menus similar to those compiled by Js.
* Hiding columns (hidden list). How to Control columns and hide columns with no content.
* Conclusion
* Appendix. Some useful links and resources.

 

Section 1: Template Composition
To understand the directory structure of the joomla template, we will focus on a blank joomla template. different files and folders form a specific joomla template. these files must be stored in the/templates joomla installation directory. for example, if we have installed two templates, our directory structure looks like this:

/Templates/js_smoothportal
/Templates/js_synergy

Note that the template name must be the name of the folder under the/templates directory. In this example, js_smoothportal and js_synergy are used. Obviously, these names are best used to reflect the template style or source.

The Directory of a specific template contains the following key files:

/Js_smoothportal/templatedetails. xml
/Js_smoothportal/index. php

The file names of these two files must be defined exactly the same as the pre-defined joomla core script.

* Templatedetails. xml
(Note that the letter "D" is capitalized) an XML file tells the joomla core the file list when using the current template. this section also describes the author, file name, copyright information, and even the list of image files used by the template. the last time we used this file is when we installed the template in the management background.
* Index. php
This file is also the most important file. It layout the entire site and tells the joomla kernel where to place components and modules. It is often a "mix" of PHP and (x) HTML ".

Most templates also use some "additional files", which are generally defined as follows (although the joomla kernel is not required ):

/Js_smoothportal/template_thumbnail.png
/Js_smoothportal/CSS/template_css.css
/Js_smoothportal/images/logo.png

* Template_thumbnail.png
The browser of the current template (usually 140*90 pixels). After the template is installed, this image will be displayed in the background template manager as a "thumbnail.
* CSS/template_css.css
The CSS file of the template. the folder path can be selected, but you must specify it. note that the file name and path are in index. the. you can get a name you like. the file name usually reflects the usage. We will discuss the advantages of this naming method in the use of multiple CSS files.
* Images/logo.png
There are a lot of image files in the template. In general, we put these images into a folder. In this example, we only have a file named logo.png.

You can use the management background to install uploaded files in ZIP format, or manually copy files on the server, but you must place them in the yoursite.com/templatesdirectory.

Templatedetails. XML format

Templatedetails. XML must include all files used by the template. it also includes the author and copyright information. the information in the template manager in the background will be displayed. The following is an example of an XML file:

<Mosinstall type = "template" version = "1.0.x">
<Name> yourtemplate </Name>
<Creationdate> March 06 </creationdate>
<Author> Barrie North </author>
<Copyright> GNU/GPL </Copyright>
<Authoremail>Compassdesigns@gmail.com This email address has been protected against malicious bumping. Program Protection: You need to activate Java Script to view this e-mail address is being protected from spam bots, you need javascript enabled to view it </authoremail> <authorurl> www.compassdesigns.net </authorurl>
<Version> 1.0 </version>
<Description> An example template that shows a basic XML details file </description>
<Files>
<FILENAME> index. php </FILENAME>
<FILENAME> JS/ie. js </FILENAME>
<FILENAME> template_thumbnail.png </FILENAME>
</Files>
<Images>
<FILENAME> images/header.png </FILENAME>
<FILENAME> images/background.png </FILENAME>
<FILENAME> template_thumbnail.png </FILENAME>
</Images>
<CSS> <FILENAME> CSS/base.css </FILENAME>
<FILENAME> CSS/norightcol.css </FILENAME>
<FILENAME> CSS/template_css.css </FILENAME>
</CSS>
</Mosinstall>

Let's explain the meaning of these rows:

* mosinstall
This command parameter is the instruction of the installation program. the parameter type = "template" tells the installer that we have installed a template
* Name:
defines the name of your template. this name will be installed in the template directory by the directory name during template installation. therefore, this name cannot contain characters that cannot be processed by the file system, such as spaces. for manual installation, you must manually create a directory with the same name under the joomla template directory.
* creationdate:
date created by the template. for example, you can enter May 2005, 08-June-1978, 01/01/2004 etc.
* Author:
name of the template designer-for example, your name
* copyright:
copyright information. here, licensing primer for developers & designers can find joomla-related content.
* authoremail:
email of the author.
* authorurl:
author site
* version:
template version
* files:
the "Files" section declares the PHP files or thumbnail files included in this template. each file is listed between and , including the complete path. it can also include some additional files. The example here shows a JS file used by the same template.
* images:
all image files are listed in this section. the full path of all image files under your template directory will be included between and . for example, if your template directory is 'yourtemplate' and all image files are under 'images' and it is under 'yourtemplate', the valid path is: images/my_image.jpg
* CSS:
the style sheet is displayed in this section. the definition is also defined between and . This definition is very important for a two-dimensional table and will be discussed in the following content.

The index. php

What exactly is the content in the index. php file? It should be a mixture of (x) HTML and PHP about the layout and appearance of the website secondary Template

First, we can see the document definition of the following effective template. The document type is defined at the top of this Section. This code will appear at the header of all the page files, in the index of the example template. on the top of PHP, we can see the following code:

<! 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/5o/xhtml"
Lang = "<? PHP echo _ language;?>" XML: lang = "<? PHP echo _ language;?> ">

The document type description "doctype" is the most basic part of a specific page to be presented by a browser. In particular, how can the browser interpret CSS. to give you an intuitive explanation, alistapart.com has the following paragraph:

[W3C "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. "(this is a real joke, literally: the clown writes to the clown. I am talking about the clown, not a professional website like you and me. I mean some old lady, except you and me, who have received an email-Anthony)

There are several types of documents you can use. first, the doctype Definition tells the browser how to interpret the page. here the word "strict" (strict) and "Transitional" (excessive) begins to get the floating range (float: Left and float: Right usually ). essentially, since the birth of WWW, different browsers have different support for CSS. for example, ie does not understand that the "Min-width" command is to set a minimum page width. on the other hand, you must "hacks" the CSS ".

Strict means that HTML (or XHTML) must be executed in strict accordance with standard specifications. Transitional means to acquiesce to some different syntaxes than standard.

The above settings may complicate things. For example, some "double-off" pattern syntaxes exist. If the definition of "doctype" is inappropriate or incorrect, the browser cannot interpret it, it will enter the "double-off" mode and try the so-called "reverse compatibility". Similar to IE, the browser will "disguise the page" when the version is low ".

Unfortunately, you may encounter an error in the "double-off mode" occasionally. There are two situations:

Use doctype to declare the straight (strict) mode from W3C, with the end identifier:

DTD/xhtml1-strict.dtd

In addition to the link of a wc3 server, you must add the complete path in the preceding statement.

* Microsoft set up IE6 so you cocould have valid pages, but be in quirks mode. This happens by having an "XML Prolog" put before the doctype.

<? XML version = "1.0" encoding = "iso-8859-1"?>

Ie6.0's "double-off mode" is very important. this guide is designed for IE6 + and we must be sure that it runs in standard mode, which will minimize our subsequent modifications. there is almost no competition for XML intelligent language. We will pay attention to the latest version of joomla in this regard.

Make the webpage conform to the standard. When you see the "valid XHTML" mark, it does not mean this complicated code and hard to understand the label. it just tells you the doctype type. Yes, you don't have to think too much about it. Standardizing your site depends on how you do it.

Some useful links:

*Http://www.quirksmode.org/css/quirksmode.html
*Http://www.alistapart.com/stories/doctype
*Http://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 take a look at the header structure and try to simplify it. However, a complete website template index. php must contain some content. Generally, the header contains the following content:

<? PHP defined ('_ valid_mos') or die ('direct access to this location is not allowed. ');?>
<! 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/5o/xhtml" lang =" <? PHP echo _ language;?>" XML: lang = "<? PHP echo _ language;?>"
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; <? PHP echo _ ISO;?>" />
<? PHP
If ($ my-> ID) {initeditor () ;}?>
<? PHP mosshowhead ();?>
<SCRIPT type = "text/JavaScript"> </SCRIPT>
<! -Http://www.bluerobot.com/web/css/fouc.asp->
<Link href = "templates/<? PHP echo $ cur_template;?> /CSS/template_css.css "rel =" stylesheet "type =" text/CSS "Media =" screen "/>
</Head>

What do these mean?

<? PHP defined ('_ valid_mos') or die ('direct access to this location is not allowed. ');?>

This is to determine whether the file can be accessed.

<? PHP defined ('_ valid_mos') or die ('direct access to this location is not allowed. ');?>
<! 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/5o/xhtml" lang =" <? PHP echo _ language;?>" XML: lang = "<? PHP echo _ language;?>"
<Head>

In the above section. "<? PHP echo _ language;?>" Set the language of the entire site.

<Meta http-equiv = "Content-Type" content = "text/html; <? PHP echo _ ISO;?>" />

Sets the character set used. _ ISO is a specific constant used to define the encoding character set.

<? PHP if ($ my-> ID) {initeditor () ;}?>

When a user logs on to your website, determines whether the variable my is "non-zero ". if a registered user logs on, a default "What you see is what you get" editor is automatically loaded. Of course, you can also load the editor with your allowed settings, but illegal or general tourists are unnecessary ..

<? PHP mosshowhead ();?>

The header information is a set of global configurations. It includes the following labels (installed by default ):

* <Title> A Complete Guide to creating a joomla template </title>
* <Meta name = "Description" content = "installing joomla, doctype and the blank joomla template"/>
* <Meta name = "keywords" content = "installing joomla, joomla doctype, blank joomla tempate"/>
* <Meta name = "generator" content = "joomla! -Copyright (c) 2005 open source matters. All Rights Reserved. "/>
* <Meta name = "Robots" content = "index, follow"/>
* <LINK rel = "shortcut icon" xhref = "images/favicon. ICO"/>

<SCRIPT type = "text/JavaScript"> </SCRIPT>

To stop a bug, that being a flash of un-styled content. details courtesy of blue robot. note This can be any script file, so if we add one, we can remove this line.

<Link href = "templates/<? PHP echo $ cur_template;?> /CSS/template_css.css "rel =" stylesheet "type =" text/CSS "Media =" screen "/>

This line is the link to the template CSS style file. PHP Code <? PHP echo $ cur_template;?> Returns the name of the current template. This method uses variables to pass the Template Name flexibly. You do not need to modify the Template Name When you manually set the template.

You will also see that in the temmplate_css.css file, we will use @ import to handle exceptions during Netscape 4 access. the old version of the browser cannot open the CSS script. If you want to be compatible with the old version of the browser, we will have a lot of CSS hacks.
Body of a blank joomla Template

This will be very simple. Are you ready?

<Body>
<! -1-> <? PHP echo $ mosconfig_sitename;?>
<! -2-> <? PHP mospathway ()?>
<! -3-> <? PHP mosloadmodules ('top');?>
<! -4-> <? PHP mosloadmodules ('left');?>
<! -5-> <? PHP mosmainbody ();?>
<! -6-> <? PHP mosloadmodules ('right');?>
<! -7-> <? PHP shortde_once ($ mosconfig_absolute_path. '/shortdes/footer. php');?>
</Body>
</Html>

Here is the order:

1. site name
2. Pathway
3. Top Module
4. Left modules
5. Main Content
6. Right modules
7. Default footer Module

Finally, we try our best to achieve "semantic-related". Considering different "browsing objects", browsers, web spider, or common viewers, this thinking is the basis for "easy access" of websites.

Nothing is more important than "semantic-related. if the designer arbitrarily defines a free module, you will have a lot of trouble. for important considerations about CMS sites, templates are the best choice for managing content layout. this is why many designers try to make their sites "effective.

From http://www.gzit8.com/show/4.html