The Joomla 4 & 5 templates book

Learn how to make your own Joomla 4 template with this guide. The book includes a discover of the basis for the HTML and CSS method to use, then you will get all needed informations about the Joomla 4 template in the technical documentation and you will get a step by step tutorial to show you how to create a nice template.

The package contains the following :

• The basis of templating, HTML / CSS
• The technical documentation which explains all the features of the Joomla 4 template
• A step by step tutorial to create a template
• the complete template in a ZIP file
• The PDF of the book in English and French language

If you want you can have a look at the demo template

Click here to see the 1870j4 template demo

I want to get the Joomla 4 templates guide, you can download it here. The price of the package (including the book in PDF format and the demo template) is 16 € (excl. VAT).

Download the Joomla 4 template book

If you have any question or something to report, you can use the forum :

https://forum.joomlack.fr/index.php/divers-miscellaneous/17983-joomla-4-templates-book-livre

If you want more informations, you can have a look at the content table :

Introduction to the Joomla template ......................................................................................... 9
A. What is a template? ..................................................................................................... 10
B. Why make my template myself? .................................................................................. 12
C. How a Joomla template works ..................................................................................... 13
HTML and CSS – The basics ...................................................................................................... 15
A. HTML and CSS basics .................................................................................................... 16
1. Set HTML ............................................................................................................................... 16
2. Base code of an HTML page .................................................................................................. 17
3. Basic HTML tags ..................................................................................................................... 17
4. HTML 5 tags ........................................................................................................................... 19
5. The box model ....................................................................................................................... 20
6. Use CSS .................................................................................................................................. 24
7. It's !important ........................................................................................................................ 25
8. Align blocks ............................................................................................................................ 26
9. CSS selectors .......................................................................................................................... 31
B. Some CSS variables ....................................................................................................... 35
C. Media queries ............................................................................................................... 36
1. List of @media values ........................................................................................................... 37
2. Conditions .............................................................................................................................. 38
3. Features ................................................................................................................................. 40
D. Code Validation ............................................................................................................ 40
E. Conclusion .................................................................................................................... 41
The Joomla 4 template - Documentation ................................................................................ 42
A. File architecture ........................................................................................................... 43
1. index.php ............................................................................................................................... 44
2. templateDetails.xml .............................................................................................................. 49
3. index.html .............................................................................................................................. 53
4. template_thumbnail.png ...................................................................................................... 54
5. template_preview.png .......................................................................................................... 54
B. <jdoc:include /> calls .................................................................................................... 55
1. type="metas" ......................................................................................................................... 55
2. type="styles" ......................................................................................................................... 56
3. type="scripts" ........................................................................................................................ 56
4. type="component" ................................................................................................................ 57
5. type="message" .................................................................................................................... 57
6. type="debug" ........................................................................................................................ 57
7. type="module" ...................................................................................................................... 58
8. type="modules" ..................................................................................................................... 58
C. Template Override ....................................................................................................... 62
1. Component override ............................................................................................................. 62
2. Plugin override ...................................................................................................................... 63
3. Module override .................................................................................................................... 63
4. Layout override ..................................................................................................................... 64
5. Override from the Joomla interface ...................................................................................... 64
6. Module Chrome: displaying modules .................................................................................... 66
D. Layout override – Alternative layout ........................................................................... 71
1. Alternative layout of modules ............................................................................................... 71
2. Alternative layout of components......................................................................................... 73
3. Alternative layout of menu links ........................................................................................... 75
E. Administrative settings ................................................................................................ 77
1. The Showon attribute ............................................................................................................ 79
F. Display conditions and countModules ......................................................................... 80
1. Using countModules .............................................................................................................. 80
2. Content or not content? ........................................................................................................ 80
3. Arithmetic operators ............................................................................................................. 81
4. Front edition – wide screen ................................................................................................... 82
G. CSS class suffixes .......................................................................................................... 84
1. Module suffix ......................................................................................................................... 84
2. Page suffix ............................................................................................................................. 85
H. Multilinguals and internationalization ......................................................................... 87
1. Translate an expression ......................................................................................................... 87
2. Translating administrative settings ....................................................................................... 89
3. Translation of module positions ............................................................................................ 90
4. LTR or RTL .............................................................................................................................. 92
I. The Web Assets Manager ............................................................................................. 93
1. The joomla.asset.json file ...................................................................................................... 94
2. Load a style sheet .................................................................................................................. 96
3. Load a script .......................................................................................................................... 97
4. Use a preset ........................................................................................................................... 98
5. Upload a script/style online .................................................................................................. 99
6. Other functions ..................................................................................................................... 99
J. Libraries: jQuery, Bootstrap... .................................................................................... 100
1. Load jQuery ......................................................................................................................... 101
2. Load Bootstrap .................................................................................................................... 101
1. Load FontAwesome ............................................................................................................. 101
K. Preview module positions .......................................................................................... 102
L. Hide main content on the home page ....................................................................... 103
M. editor.css: Custom styles for the editor .................................................................. 104
1. Customize rendering ........................................................................................................... 105
2. Customize the list of styles .................................................................................................. 106
3. Load everything from template.css ..................................................................................... 108
N. Customize the favicon ................................................................................................ 108
The step-by-step tutorial ........................................................................................................ 110
A. What we want to achieve .......................................................................................... 111
B. Preparation ................................................................................................................. 113
C. Go to work! ................................................................................................................. 114
1. The installable base ............................................................................................................. 114
2. The index.php basis ............................................................................................................. 117
3. The CSS classes of the body ................................................................................................. 118
4. Load template.css ................................................................................................................ 119
5. Basic CSS .............................................................................................................................. 121
6. CSS for Joomla 4 .................................................................................................................. 123
7. Load a Google font .............................................................................................................. 124
8. Charger Font Awesome ....................................................................................................... 125
9. Logo and horizontal menu ................................................................................................... 126
10. Row of 2 modules ............................................................................................................ 131
11. Add a Read more button ................................................................................................. 134
12. Add an animated background ......................................................................................... 135
13. Row of 3 adaptable modules ........................................................................................... 136
14. Main content ................................................................................................................... 141
15. Footer .............................................................................................................................. 144
D. Responsive – mobile adaptation ................................................................................ 150
1. Creating the media queries ................................................................................................. 153
2. Mobile menu – hamburger icon .......................................................................................... 153
3. Search module ..................................................................................................................... 155
E. The component.php file ............................................................................................. 157
F. The error.php file ....................................................................................................... 159
G. The offline.php file ..................................................................................................... 164
H. Finalization ................................................................................................................. 171
1. Preview images .................................................................................................................... 171
2. Language files ...................................................................................................................... 172
3. The XML file ......................................................................................................................... 173
I. Add parameters .......................................................................................................... 175
The Appendices ...................................................................................................................... 178
Appendix 1: List of template variables ................................................................................... 179