Les templates Joomla 4 et 5 - Le livre

Apprenez à créer votre propre template Joomla 4 avec ce guide. Le livre comprend une découverte des bases des méthodes HTML et CSS à utiliser, puis vous obtiendrez toutes les informations nécessaires sur le template Joomla 4 dans la documentation technique et vous obtiendrez un tutoriel étape par étape pour vous montrer comment créer un joli template.

Le paquet contient les éléments suivants :

• les bases : du template et HTML/CSS
• la documentation technique qui explique toutes les fonctionnalités du template Joomla 4
• un tutoriel étape par étape pour créer un template
• le template complet dans un fichier ZIP
• le PDF du livre en Français et en Anglais

Si vous le souhaitez, vous pouvez consulter la démo du template

Cliquez ici pour voir la démo du template 1870j4

Si vous souhaitez obtenir le guide des templates Joomla 4, vous pouvez le télécharger ici. Le prix du package (comprenant le livre au format PDF et le template de démo) est de 16 € (hors TVA).

Télécharger le livre sur les templates Joomla 4

Si vous avez des questions ou avez des infos à communiquer, n'hésitez pas à le faire sur le forum :

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

Si vous souhaitez plus d'informations, vous pouvez consulter la table des matières :

Introduction au template Joomla ............................................................................................... 9
A. Qu’est-ce qu’un template ? .......................................................................................... 10
B. Pourquoi faire mon template moi-même ? ................................................................. 13
C. Fonctionnement d’un template Joomla ....................................................................... 13
HTML et CSS – Les bases .......................................................................................................... 15
A. Les bases HTML et CSS ................................................................................................. 16
1. Définir le HTML ...................................................................................................................... 16
2. Code de base d’une page HTML ............................................................................................ 17
3. Les balises HTML basiques .................................................................................................... 18
4. Les balises HTML 5................................................................................................................. 19
5. Le modèle de boite ................................................................................................................ 21
6. Utiliser les CSS ....................................................................................................................... 24
7. C'est !important .................................................................................................................... 26
8. Aligner des blocs .................................................................................................................... 26
9. Les sélecteurs CSS .................................................................................................................. 31
B. Des variables CSS .......................................................................................................... 35
C. Media queries ............................................................................................................... 37
1. Liste des valeurs de @media ................................................................................................. 38
2. Les conditions ........................................................................................................................ 38
3. Les caractéristiques ............................................................................................................... 40
D. Validation du code........................................................................................................ 40
E. Conclusion .................................................................................................................... 41
Le template Joomla 4 - Documentation ................................................................................... 42
A. L’architecture de fichiers .............................................................................................. 43
1. index.php ............................................................................................................................... 44
2. templateDetails.xml .............................................................................................................. 49
3. index.html .............................................................................................................................. 53
4. template_thumbnail.png ...................................................................................................... 54
5. template_preview.png .......................................................................................................... 54
B. Les appels <jdoc :include /> ......................................................................................... 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 ou surcharge de template ............................................................. 61
1. Override de composant ......................................................................................................... 62
2. Override de plugins ............................................................................................................... 62
3. Override de modules ............................................................................................................. 63
4. Override de layout (affichages) ............................................................................................. 63
5. Override depuis l'interface de Joomla .................................................................................. 64
6. Module Chrome : affichage des modules.............................................................................. 65
D. Layout override – Layout alternatif .............................................................................. 70
1. Layout alternatif de modules ................................................................................................ 71
2. Layout alternatif de composants ........................................................................................... 72
3. Layout alternatif de liens de menu ....................................................................................... 74
E. Les paramètres d'administration ................................................................................. 78
1. L'attribut Showon .................................................................................................................. 79
F. Conditions d'affichage et countModules ..................................................................... 80
1. Utilisation de countModules ................................................................................................. 80
2. Contenu or not contenu ? ..................................................................................................... 81
3. Les opérateurs arithmétiques ............................................................................................... 81
4. Edition front – écran large ..................................................................................................... 83
G. Suffixes de classes CSS.................................................................................................. 84
1. Suffixe de module .................................................................................................................. 84
2. Suffixe de page ...................................................................................................................... 86
H. Multilangues et internationalisation ............................................................................ 88
1. Traduire une expression ........................................................................................................ 88
2. Traduction des paramètres d'administration ........................................................................ 90
3. Traduction des positions de modules ................................................................................... 91
4. LTR ou RTL ............................................................................................................................. 92
I. Le Web Assets Manager ............................................................................................... 93
1. Le fichier joomla.asset.json ................................................................................................... 94
2. Charger une feuille de style ................................................................................................... 96
3. Charger un script ................................................................................................................... 97
4. Utiliser un preset ................................................................................................................... 98
5. Charger un script/style en ligne ............................................................................................ 99
6. Autres fonctions .................................................................................................................... 99
J. Les librairies : jQuery, Bootstrap… ............................................................................. 101
1. Charger jQuery .................................................................................................................... 101
2. Charger Bootstrap ............................................................................................................... 101
1. Charger FontAwesome ........................................................................................................ 101
K. Prévisualiser les positions de modules ...................................................................... 102
L. Cacher le contenu principal sur la page d'accueil ...................................................... 104
M. editor.css : des styles personnalisés pour l'éditeur ................................................. 105
1. Personnaliser le rendu ......................................................................................................... 105
2. Personnaliser la liste des styles ........................................................................................... 106
3. Tout charger depuis template.css ....................................................................................... 108
N. Personnaliser le favicon ............................................................................................. 109
Le tutoriel pas à pas ............................................................................................................... 111
A. Ce qu'on veut obtenir ................................................................................................. 112
B. La préparation ............................................................................................................ 114
C. Au travail ! .................................................................................................................. 115
1. La base installable ............................................................................................................... 115
2. La base de index.php ........................................................................................................... 118
3. Les classes CSS du body ....................................................................................................... 119
4. Charger template.css ........................................................................................................... 120
5. Les CSS de base .................................................................................................................... 122
6. Les CSS pour Joomla 4 ......................................................................................................... 124
7. Charger une police Google .................................................................................................. 125
8. Charger Font Awesome ....................................................................................................... 126
9. Logo et menu horizontal ..................................................................................................... 127
10. Rangée de 2 modules ...................................................................................................... 132
11. Ajouter un bouton Read more (lire la suite) ................................................................... 135
12. Ajouter un fond animé .................................................................................................... 136
13. Rangée de 3 modules adaptables.................................................................................... 137
14. Contenu principal ............................................................................................................ 142
15. Bas de page "footer" ....................................................................................................... 145
D. Le responsive – adaptation mobile ............................................................................ 151
1. Mise en place des media queries ........................................................................................ 154
2. Menu mobile – icône hamburger ........................................................................................ 154
3. Module de recherche .......................................................................................................... 156
E. Le fichier component.php .......................................................................................... 158
F. Le fichier error.php ..................................................................................................... 160
G. Le fichier offline.php .................................................................................................. 165
H. La finalisation ............................................................................................................. 172
1. Les images d'aperçu ............................................................................................................ 172
2. Les fichiers de langue .......................................................................................................... 173
3. Le fichier XML ...................................................................................................................... 174
I. Ajouter des paramètres ............................................................................................. 176
Les Annexes ............................................................................................................................ 179
Annexe 1 : Liste des variables du template ............................................................................ 180