Apprenez à créer votre propre template Joomla! 3 de A à Z. Le livre contient 320 pages avec un tutoriel pour vous apprendre à créer un template standard et un tutoriel pour vous apprendre à créer un template avec Bootstrap, ainsi qu'une documentation technique complète sur les templates Joomla! 3.
Le livre est divisé en 3 parties :
- Une documentation technique complète qui vous servira de référentiel pour la création de vos templates
- Un tutoriel qui vous explique de A à Z comment créer un template Joomla! 3 standard
- Un tutoriel qui vous explique pas à pas comment créer un template Joomla! 3 avec Bootstrap
Les templates sont fournis avec le livre.
Le package comprend :
- Le livre de 320 pages au format PDF
- Un template Joomla! 3 standard (issu du tutoriel N° 1)
- Un template Joomla! 3 Bootstrap (issu du tutoriel N°2)
- Un template Joomla! 3 créé avec Template Creator CK (issu du tutoriel vidéo)
- Un gabarit du template créé avec Template Creator CK pour l'importer et le modifier dans le logiciel
Télécharger le Livre Création de template Joomla! 3 (10€ templates inclus)
Vous pouvez également consulter le sommaire de l'ouvrage :
I.INITIATION HTML ET CSS 13
1.C'est quoi un template ? 14
2.Fonctionnement d’un template 17
3.Les bases HTML et CSS 18
3.1)Quelle version HTML ? 18
3.2)Structure basique d'une page HTML 20
3.3)Balises HTML traditionnelles 20
3.4)Balises HTML5 21
3.5)Utiliser les CSS 22
3.6)Modifier le comportement en CSS 23
3.7)Aligner des blocs 24
a)Style clear:both; 26
b)Classe clearfix 27
3.8)Les sélecteurs CSS 29
a)Sélecteur d’enfant : a > b 29
b)Sélecteur adjacent : a + b 30
c)Sélecteur d’index : a:nth-child(n) 30
d)Premier élément : a:first-child 32
e)Encore plus de sélecteurs 32
3.9)Validation du code 33
3.10)Ressources complémentaires 34
4.Une pincée de CSS3 35
4.1)Les préfixes propriétaires 35
4.2)Border-radius 36
4.3)Box-shadow 37
4.4)Gradient 39
a)Compatibilité Internet Explorer 41
Le filtre Microsoft – IE6 à 9 41
Un SVG pour IE9 41
4.5)Utiliser CSSPIE pour Internet Explorer 43
II.DOCUMENTATION TECHNIQUE 45
1.Structure d'un template 46
1.1)index.php 47
a)Tout en haut de la page 47
b)Partie HEAD – Entête de la page 48
c)Partie body 48
d)Code complet 50
1.2)index.htm l 51
1.3)templateDetails.xm l 52
a)Champs d'information 53
b)Fichiers à installer 54
c)Positions de module 55
d)Langues 55
e)Paramètres 56
calendar 57
category 59
filelist 60
folderlist 61
hidden 62
imagelist 63
media 64
language 65
list 66
menu 67
menuitem 68
radio 69
color 70
spacer 71
sq l 72
text 73
textarea 74
checkbox 75
checkboxes 75
editor 76
1.4)template_thumbnail.png 77
1.5)template_preview.png 77
1.6)favicon.ico 78
2.Les différents appels JDOC 79
2.1)Head 79
2.2)Component 80
2.3)Message 80
2.4)Debug 80
2.5)Module 81
a)Chargement d'un module 81
b)Chargement de plusieurs modules 81
c)Personnalisation des modules 81
2.6)Module style html5 – Nouveauté Joomla ! 3 84
a)Tag du module 84
b)Tag du titre de module 85
c)Classe CSS du titre 86
d)Taille Bootstrap 87
2.7)Option de style dans le module – Nouveauté Joomla ! 3 88
3.Compatibilité HTML5 pour IE 90
4.Template override 91
4.1)Override de composant 91
4.2)Override de plugins 92
4.3)Override de modules 92
4.4)M odule Chrome 93
4.5)Paramètres avancés de module chrome 95
a)$module 95
b)&$params 95
c)&$attribs 96
4.6)Petite conclusion sur l'override 98
5.Layout override 99
5.1)Layout alternatif de modules 100
5.2)Layout alternatif de composants 103
5.3)Layout alternatif de liens de menu 105
6.Les paramètres 108
6.1)Utilisation d’un paramètre dans le template 108
6.2)Création d’un paramètre personnalisé 109
a)Création du fichier PHP 110
b)Utilisation du champ dans le XML 111
7.Les CSS de Joomla! 113
7.1)Module Menu 113
7.2)Module Derniers articles 114
7.3)Module Articles populaires 114
7.4)Module de connexion 115
7.5)Module Qui est en ligne 115
7.6)Bannière 116
7.7)Fil d'ariane 116
7.8)Module derniers utilisateurs inscrits 116
7.9)Affichage en liste d'articles 117
7.10)Affichage en liste de catégories 117
7.11)Flash d'information 117
7.12)Module de recherche 118
7.13)Navigation entre articles 118
7.14)Article 118
7.15)Lien Lire la suite 119
7.16)Autres sources 120
8.Compatibilité multinavigateurs 121
8.1)Créer une architecture compatible – DIV imbriquées 121
8.2)CSS conditionnels pour IE 126
8.3)!important : un attribut CSS un peu particulier 128
8.4)pseudo-classe :hover avec IE 129
9.Conditions d'affichage et countmodules 131
9.1)countModules 131
9.2)countModules et les opérateurs arithmétiques 131
9.3)mode éditeur, un exemple avec JInput 133
9.4)Combinaison finale 134
10.Module à coins arrondis 135
10.1)Méthode 1 : taille unique 135
10.2)Méthode 2 : modulable 136
10.3)Méthode 3 : Multi-tailles en TABLE 138
10.4)Méthode 4 : La magie du CSS3 141
11.Suffixes de classes CSS 142
11.1)Suffixe de module 142
11.2)Suffixe de page 143
11.3)Mode avancé 145
12.Les langues et traductions 147
12.1)Insérer des termes traduisibles 147
12.2)Traduction des paramètres d'administration 149
12.3)Traduction des positions de modules 150
12.4)Langage LTR ou RTL 152
13.Utilisation de Bootstrap 153
13.1)Introduction à Bootstrap 153
13.2)Chargement de Bootstrap dans le template 154
13.3)Le système de grille 155
13.4)Largeur fixe ou fluide ? 156
13.5)Les classes Bootstrap utiles 158
13.6)Paramètres avancés du module 159
14.Utilisation de LESS 161
14.1)Introduction à LESS 161
14.2)Outils de compilation Less 162
a)Less.js 162
b)Less Compiler – Plugin Joomla! 162
c)Crunchapp 162
d)Lessphp 163
14.3)Comment compiler LESS 163
15.Inclusion des librairies javascript 167
15.1)Inclusion de motoools 167
15.2)Inclusion de jQuery 168
16.Convertir un template 1.5 en 3.0 169
16.1)Conversion de mootools 169
16.2)templateDetails.xml 169
16.3)Fichiers de langue 170
17.Outils pour le développement de template 171
17.1)Webdeveloper 171
17.2)Firebug 171
17.3)Colorzilla 171
17.4)Wampserver ou Xampp 172
17.5)IEtester 172
17.6)Notepad++ 172
17.7)Un IDE : Netbeans ou Eclipse 172
18.Template Creator CK pour créer vos templates 173
III.TUTORIEL DU TEMPLATE "1870J3" 174
1.Cahier des charges 175
2.Pour commencer 176
2.1)L'éditeur 176
2.2)Le serveur loca l 176
2.3)Firefox et ses extensions 177
2.4)IEtester 177
2.5)Les logiciels graphiques 177
2.6)Les bases du langage 178
2.7)Installation de joomla! 178
3.Commençons... 179
4.Créer la structure pour commencer 183
5.index.htm l 184
6.index.php 184
6.1)Menu horizonta l 185
6.2)Bannière – logo et module 186
6.3)Rangée de 4 modules 187
6.4)Slideshow 190
6.5)Zone centrale à 3 colonnes 190
6.6)Rangée de 4 modules sous le contenu 193
6.7)Rangée de 4 modules dans le pied de page 194
6.8)Module de pied de page 195
6.9)Fin du document 196
7.templateDetails.xm l 197
8.Option du template : couleur de fond 201
9.Mise en place des CSS 202
9.1)Initialisation des styles 202
9.2)Styles généraux 204
9.3)Conteneur principa l 207
9.4)Menu horizonta l 209
9.5)Bannière logo et module de recherche 215
9.6)Rangée de 4 modules 216
a)Scénario 1 : un seul module 219
b)Scénario 2 : deux modules 219
c)Scénario 3 : trois modules 220
d)Scénario 4 : quatre modules 221
9.7)Slideshow 223
9.8)Contenu principal à 3 colonnes 223
a)Personnalisation du menu vertica l 227
b)Personnalisation du module de connexion 228
c)Personnalisation du titre des articles 230
d)Personnalisation du lien lire la suite 230
e)Personnalisation du fil de navigation (fil d'ariane) 232
f)Personnalisation de la navigation entre articles 232
g)Personnalisation des informations de l'article 233
h)Articles en colonnes en mode blog 236
9.9)Rangée de modules sous l'article 238
9.10)Modules en bas de page 240
9.11)Pied de page 243
10.Création des fichiers de langue 244
11.titre de module bicouleur 249
12.Responsive design – adaptation pour mobiles 251
13.Création du package fina l 253
14.BONUS – Créer le template 1870j3 avec Template Creator CK 255
IV.TUTORIEL DU TEMPLATE "1870J3BS" - Bootstrap 256
1.Cahier des charges 257
2.Pour commencer 258
2.1)L'éditeur 258
2.2)Le serveur loca l 258
2.3)Firefox et ses extensions 259
2.4)IEtester 259
2.5)Les logiciels graphiques 259
2.6)Les bases du langage 260
2.7)Installation de joomla! 260
3.Commençons... 261
4.Découpage de la maquette graphique pour Bootstrap 264
5.Initiation à Bootstrap 267
6.Créer la structure du template 270
7.index.htm l 271
8.templateDetails.xm l 272
9.index.php 277
9.1)Menu horizonta l 279
9.2)Logo et module de recherche 280
9.3)Slideshow 281
9.4)Rangée de modules 282
9.5)Zone centrale à 3 colonnes 284
9.6)Rangée de 4 modules sous le contenu 288
9.7)Rangée de de 4 modules dans le bas de page 289
9.8)Module de pied de page 290
9.9)Fin du document 290
10.Création des CSS avec LESS 292
10.1)Copie des icônes Bootstrap 292
10.2)Création des fichiers LESS 292
10.3)Fichier icomoon.less 293
10.4)Fichier template.less 293
10.5)Fichier variables.less 293
10.6)Compilation de LESS 294
10.7)Fichier custom.css 299
a)Menu haut 299
b)Logo et module 300
c)Contenu principa l 301
d)Rangée de modules 301
Override de module 301
Suffixes de classe CSS 304
10.8)Contenu principa l 306
10.9)Bas de page 307
11.Options du template – couleur de fond 308
12.Création des fichiers de langue 309
13.Création du package fina l 312
V.ANNEXES 314
1.Template override, contenu du fichier pagination.php 315
2.Positions usuelles utilisées dans le eBook 320
News