You will need
  • - skills using HTML and CSS;
  • package any Joomla template.
Instruction
1
Before you create a layout, select the template that you will use for writing your code. This will help you to save time and to avoid writing extra lines of code that are standard for Joomla and is used when you install any themes.
2
Copy the template to a separate folder and open the file templateDetails.xml in its root directory. In this document is proprietary information, description, and title layout. Change the units at their own discretion. For example, you can edit the descriptor <author> to change the author name to yours, enter the email address of the home page. In the line <description> you can enter a name for your future layout.
3
Go to the block the edited file. Remove all the handles that are included with a given block, starting from <position>debug</position> and ending with <position>position 14</position>, leaving after the surgery is only one <positions></positions>. Similarly, remove the line <languages>, <config> and <folder>Language</folder>.
4
After making the transactions, save the changes to the file and delete the language folder in the directory with the template files. Then open the file index.php with the help of your editor and remove all the content except the line:

<?php
defined(‘_JEXEC’) or die; ?>
5
Specify the folder with the template any name and then Repack it in the archive, using the program archiver by clicking on the directory of your template with the right mouse button and selecting "Create archive of...". The generated file will have the extension .zip.
6
Go to the administration panel of the resource and go to "Templates". With the installation operations, import the just made the files and wait for notification about the successful installation. Then turn on the resulting template by selecting it in the menu by default.
7
Draw a rough design for your future template and in accordance with it, write the appropriate HTML code in the file index.php. Create code using some functions of the engine. So, you can enter a command to automatically populate the standard headers Joomla:

<jdoc:include type=”head” />

This code will include all the necessary tags in the section <head></head> of the page.
8
Own code with CSS, you can enter in the template.css in one of the folders of the resource. After creating a new template css, include it in the file index.php using <link rel = “stylesheet” href = “<?php echo $this->baseurl1 ?>/templates/<?php echo $this->template; ?&rt;/css/template.css” type = “text/css”>.
9
Next, create a page layout using HTML code. To do this, continue to edit index.php in accordance with your specified template. If necessary, add the desired position in the <positions> of the file templateDetails.xml by assigning respective identifiers to each of the sections of your design. So, to set the header options, you can create a <positions>Head</positions> and to enable this setting in the file index.php as follows:

<jdoc:include type = “modules” name = “head” />
10
After you create a new title head, you can edit it through the window in the Joomla module Manager. To do this, make a new post and paste the text and pictures that will be displayed in the header. Do the same operation with all the elements you have created the interface and save any changes.