Template design

Many friends are interested in designing the Joomla template, but when they open one of the Joomla templates, they get familiar with a series of php and html code names. In this article, we try to introduce you to the Joomla code. For this purpose, we will first give you some explanations about the files and sipes about the code, which we hope will help you:

Joomla template consists of several sections. "


1- php files


2- css files


3. Javascript files


4. Images


5. Ini, xml, png, html, ico auxiliary files


The php files, the most important of which is the index.php file, design the same overall appearance, for details you can upload the file for each part in the html folder, sample these files with Joomla applications in the component folders and Modules that can be customized for each template. Of course, if the html folder is empty, Joomla! will use its default appearance.


The css files form the files and layout of the site. The main file of this part is template_css.css or template.css, it is better to place all the code related to the arrangement and coloring in these files, so it's no longer necessary to find it. You do not get a giggle code. To call the css file, the following code should be used in the template:


<link href = "/ <? php echo $ this-> baseurl?> / templates / template_name /css/template_css.css" rel = "stylesheet" type = "text / css" />


Javascript files are used to create beautiful effects on the site, the library of these files is in Joomla! You do not need to recall them. To call javascript files you must use the following code in the format:


<script type = "text / javascript" src = "/ <? php echo $ this-> baseurl?> / templates / template_name / js / java_file_name .js"> </ script>


Image files are the most beautiful part of the template, the format of these images should be jpg, gif, png and for swf animations. To call the images, the following code is used:


<img border = "0" src = "/ <? php echo $ this-> baseurl?> / templates / template_name /images/image_file_name.png" title = " No Image " />


Auxiliary files are files used by the kernel for Joomla! And the system works with them to identify the template, for example, params.ini is used to store the information stored in the template edit section in Joomla! Management, you can set parameters in the original xml file Make a call and save the result to the params.ini file


The templateDetails.xml file is the installer and controller of Joomla! This file has the following format:


<? xml version = "1.0" encoding = "utf-8"?>
<! DOCTYPE install PUBLIC "- // National CMS 1.5 // DTD template 1.0 // EN" "http://www.mitra.ir/xml/1.5/template-install.dtd">
<install version = "1.5" type = "template">
This section contains basic information for identifying the file by Joomla!
<name> template_name </ name> The name of your template is in this section
<creationDate> 11/20/06 </ creationDate>
<author> R.Balvardi </ author>
<authorEmail> This email address is being protected from spambots. You need JavaScript enabled to view it </ authorEmail>
<authorUrl> http://www.mitratemplate.com </ authorUrl>
<copyright> </ copyright>
<license> GNU / GPL </ license>
<version> 1.0.2 </ version>
<description> Software company and IT technology template with multilingual and page direction support </ description>
This section is dedicated to generic information about your template, including the date of creation, access rules, designer and contact information ...
<filename> index.php </ filename>
<filename> templateDetails.xml </ filename>
<filename> template_thumbnail.png </ filename>
<filename> params.ini </ filename>
</ files>
This section is about the installer, every file that is listed here is transmitted by Joomla to the site during installation.
<position> left </ position>
<position> right </ position>
<position> top </ position>
<position> user1 </ position>
<position> user2 </ position>
<position> user3 </ position>
<position> user4 </ position>
<position> banner </ position>
<position> footer </ position>
</ positions>
In this section, the positioning of the modules in the form of the title, Joomla can put one or more modules in each of these positions.
<param type = "spacer" default = "Template Logo" />
<param name = "logoType" type = "list" default = "image" label = "Logo type" description = "LOGO TYPE DESCRIPTION">
<option value = "image"> Image </ option>
<option value = "text"> Text </ option>
</ param>
<param name = "logoText" type = "text" default = "" size = "50" label = "Logo text" description = "LOGO TEXT DESCRIPTION" />
<param name = "sloganText" type = "text" default = "" size = "50" label = "Slogan" description = "SLOGAN DESCRIPTION" />
</ params>
In this section, you can define the template parameters, for example, you can define color as a parameter in multi-color templates.
<language tag = "en-GB"> en-GB. lang_file.ini </ language>
</ languages>
<language tag = "en-GB"> admin / en-GB. lang_file.ini </ language>
</ languages>
</ administration>
You can also use the language file for terms used in your language so that Joomla! Can change the language by changing the title.
</ install> This is the end code of the file that closes the file


Familiarity with the codes in the index.php file of the Joomla template:


<? php
defined ('_JEXEC') or die ('Restricted access');
The code protects against hacker abuse in the format: This code prevents direct execution of the template file and prevents hackers from viewing the template content directly.
<jdoc: include type = "head" /> This code displays the forehead or the introduction of your site.
<jdoc: include type = "modules" name = "left" style = "xhtml" /> Joomla Template Tutorial 1- Introduction to Module Code: Module code is a code that allows you to display modules in the admin section, you can change the structure of the modules. The allowed styles are: none, xhtml, rounded by clicking index.php? tp = 1. For each Joomla site, you can see these positions.
<? php echo $ this-> baseurl?> Site path code: This code allows the designer to submit the output of the site template, for example, instead of this image / artocle.jpg addressing address: http://www.yoursitename.com/images/ article.jpg
<? php if ($ this-> countModules ('top')):?>
<? php else:?>
<? php endif; ?>
If you are not interested in displaying empty modules, use the following code: Part I: <? Php if ($ this-> countModules ('top')):?>, Part II: <? Php endif; ?> Whatever is between the two codes, if the top position is hiding, hide the top position, you can also use the <? Php else:?> Command between the two.
<? php echo $ this-> language; ?> Language recognition code: To identify and use the name of the language in the design, the example is used to double-click a template of this code, you can put the files of each language in a separate folder and not call this code.
<? php if ($ this-> direction == 'rtl'):?>
<? php endif; ?>
Code for Persian language: Inside this code, every 2 code is loaded when the Persian language is loaded
<? php echo JText :: _ ('Powered by')?> License Code for Futer:
<jdoc: include type = "message" />
Code display Site messages: This code is used to display Joomla messages
<jdoc: include type = "component" /> Content display code: This code displays the content of the page


Joomla Template Store:

Template Design:Dima Group