Joomla template design for front-end developer completely unfamiliar with CMS

  • Tutorial

The word Jumla in Swahili means "all together," "as one."

Once upon a time, for quite a long time, I was creating HTML / CSS / JavsScript sites and had no idea about CMS.
A frightening moment was that, as I thought, mastering PHP is extremely necessary, but in fact some basic knowledge turned out to be enough (simple code turns out to be understandable to the programmer of any other language, but it's not necessary to climb into the wilds).
For a person who knows only layout and scripts, it’s enough to know some specific points in order to immediately start working with Joomla.
Something in these moments is similar to other CMS, something is different.
I tried to state these points briefly. If I knew them immediately, I could start creating user-managed sites much faster.
So, if you own HTML, but have no idea about CMS Joomla, then you should click the button below.

For a general idea, the basic concepts of this CMS are:
Template / Template - a set of folders / files that determine the layout and design of site pages. You can have many templates installed on one site. Thus, you can change the site design in seconds, switching from one template to another.
In the HTML template, areas of the page are defined (as a rule, these are div blocks) in which certain content will be displayed. For example, as a rule, the content of the page is displayed in the central area. The owner / author of the site will be able to create article articles using the built-in WYSIWYG editor, which will be displayed in this area.
Also in the HTML template areas for displaying various objects can be defined.
As a rule, these are areas such as: the document header (that is always displayed at the top), the footer (that is displayed at the bottom), the area for the menu, and some areas on the sides. Here it all depends on the wishes of the author of the template. These areas are called line items.
The template has other functions, which will be described later.
Module- an object with HTML / PHP / CSS / JavaScript code that can be displayed in certain designated places on the page. An example of typical models: a site language switch, an authorization block on a site, a line with a search on the site, voting, etc.
Plugin / Plugin is an object with HTML / PHP / CSS / JavaScript code that can be embedded inside the page content. The difference from the module is only in the display location on the page. The author of the article, when working with WYSIWYG as an editor, will be able to insert certain code (similar to HTML code). On the site itself, this code will be replaced with an object similar to a module.
Component- A global object that has many settings. As a rule, in addition to the component, there are modules and plugins. For example, a component can be a guest book, an online store, or a forum. All these objects have many settings and can be displayed on a separate page.
WYSIWYG editor - online text editor (what you see is what you get). Using a simplified panel, similar to the Microsoft Word or WordPad panel, you can create articles that the editor automatically converts to HTML code.

And modules and plugins and components are extensions / extensions. With the help of extensions, by installing CMS itself, you can make a website and an online store and a blog and forum and whatever your darling wants.
All extensions are provided in the form of a zip archive, which can be downloaded / installed on the site through the administrative panel.
The main directory of extensions is the directory of the official Joomla website
When downloading from it, you can be with a certain degree of certainty that the extension does not contain malicious or adware code. At least, I would like to believe that all such extensions are promptly ruthlessly removed from the catalog. I, like many, prefer popular, and accordingly proven extensions, as their developers value their reputation.
CMS itself is developing and during its development passed through the stages of global change, which resulted in the fact that at the moment there are several versions of the system. This is version 1.5 version 2.5 and version 3.x (3.x means that the versions of line 3 are compatible with each other - 3.1 3.2 and 3.3)
If you have a site on Joomla 2.5 version, then only extensions from this version are suitable for you, that is, extensions of different versions are incompatible.

I will not consider how to install extensions and make settings. An intelligent student and a person who is far from IT will figure this out. I’m more interested in the moments of developing and editing my template and extension, as well as changing the design of third-party extensions.
You can find hundreds or even thousands of paid and free templates with a ready-made design and change them to your taste, but often they contain many completely unnecessary functions for you. A more professional approach would be to create your own template.
A blank template can be found on the net, or you can create it from scratch.
The template is a folder archived in a zip format archive.

Files necessary for the folder are:
index.php - the main file that will describe the structure and design of the page
component.php - display of the page in the form acceptable to the printer
error.php - presentation for 404 page
favicon.ico - icon for our site
template_preview.png and template_thumbnail.png - template preview images
templateDetails.xml - a file that contains a description of the template.
For the convenience of structuring, subfolders with understandable names are also located inside the folder:
css - for
images styles - for
js images - for
language scripts - for ini files with translation of texts into various languages.
Please note that for security reasons, each folder must contain an empty index.html file.
The html folder may also be present in the template folder. This folder contains the appearance changes for any Joomla components - the so-called overrides.
In general, the structure of the template remains unchanged for versions of Joomla 1.5, 2.5 and 3.x.

Consider the contents of the simplified version of templateDetails.xml
After the header

follows the main tag:

Next is a header with a description of the template:
blanktemplate2014-12-20your nameCopyright  2014 alexalex.ruadmin@alexalex.ruhttp://www.alexalex.ru1.0.0

Next, as a rule, there is a description of the template, which can be styled using HTML:
 Мой шаблон 

Создано Это самый простой из шаблонов!.


All files required for the template must be described in templateDetails.xml

If you have not forgotten, then the page of our site will be divided into parts - positions.
Positions are usually located inside div blocks. An example of how positions from can be located:

These positions must also be specified in the template description. Number of positions according to your desire. You can create your own names, or you can follow the standard names:

If you have a multilingual site, then you need to describe the languages ​​you use

This description implies that inside the language folder you have 2 sub-folders en-GB and ru-RU which contain files with translations. These files contain text in the form "KEY = value". Moreover, the key name must be typed in capital letters.
For example:
DEMOTEXT = "Sample text"

Also in the template, you can describe various switches for changing the template settings, which can be changed by a simple user or site administrator (not a programmer). The switches on the site look like the following:

For example, consider the ability to set some color. Create one of the switches. To do this, add this piece of code:

The value of this color can be displayed on the page. How to do this, read on.

Now consider the index.php file and try to make some kind of layout.
At the very beginning of the file, add the php code:
baseurl.'/templates/'.$this->template; // переменная с относительным адресом шаблона
// добавляем стиль css с помощью такой вот конструкции
// добавляем javasript

Next is the standard page header:

Here Add the typical heading tags to the header. Such, for example, as: meta tags with descriptions, keywords, some other files connected by extensions, scripts and styles, etc.

In our body tag, we will add the color of our switch to the style value, so that the site administrators, unfamiliar with css, they could change the background color of the page from the admin panel:

Next, we can typeset our template on divs.
The output of a position inside a div or semantic block of HTML5 will be like this:
countModules( 'footer' )) : ?>

This code checks if any module should be displayed in the footer position, and if it should, it displays the contents of the module. Of course, you can not perform a check, but simply display in any case:

To display a different position, you only need to replace the footer with the name of a different position.

To display the main content of the page, the following tags are used:

Also put them inside the desired div.

As an example of template design, I’ll give you a couple of examples:
If you haven’t forgotten (and if you forgot, then go back a couple of paragraphs), we have 2 en-GB and ru-RU folders with translation files. In them we have included for example text in two languages. This text is indicated by the code word DEMOTEXT. We can display this text using php code:

Moreover, this text can be inserted into the parameter values ​​(for example, title or alt) and as the contents of paragraphs and even in url links.

Pictures in the template are usually located in the images directory. In order to display the picture, we will also use a small php code that displays the path to the folder in which our template is located

We declared the $ tpath variable at the very beginning of the page, and we know what subfolder of the template the picture is in.
An example of a logo picture output:

Here onclick = "sayHelloHabr ()" will run the function from the custom.js file that we connected as an external script file.

Full code of our simple template:
baseurl.'/templates/'.$this->template; // переменная с относительным адресом шаблона
// добавляем стиль css
// добавляем javasript


countModules( 'footer' )) : ?>

What happened in the end can be downloaded from the link - a simple template .
Making a beautiful design even for a layout designer, not to mention the front-end developer is not a problem.

The site template, in fact, is a view from the MVC pattern (model-view-controller = model-view-controller). That is, this is the part that is responsible for the output of information and design. Most modules and components follow the same principle.
If you need to change the appearance of a module, you can take its presentation and change the HTML code to fit your needs.
Often, the code of the modules is updated. Some bugs are fixed. In order not to change the view type after each update of the module, you can create an override / override. This is a file or files that will be located in the template folder and will determine the appearance of the module.
You can do this in the administrative panel along the path:
Extensions - Template manager - Templates (Extensions - Template Manager - Templates)
- click on our template (get into the online editor of our template) and go to the Create Overrides tab
By creating an override, we can see that files or even folders will be added to the html folder. You can put the html folder with these files directly into our zip template and install the finished template on the site already having the appearance changes in it for some modules.

Try to create your own template for the site, and in case of luck, you can just as easily edit the presentation, and then by hand and to create various modules or plug-ins nearby!

Also popular now: