Template Creator est un outil de création de templates Joomla! qui vous permet de générer vos propres templates Joomla!. Conçu comme un assistant très intuitif, il n’en est pas moins complet et efficace : organisation des positions, création des styles, gestion du responsive… il permet de construire son design directement sur votre site Joomla mais aussi de récupérer une archive installable. Imaginé pour répondre aux besoins des débutants, il s’adapte parfaitement aux exigences des professionnels. Ceci est le diaporama utilisé durant cet atelier conçu comme un tutoriel en live.

1. 1
Créez votre template Joomla! avec Template Creator CK
Paris 23 mai 20141
Créez votre template Joomla!
avec
Qui sommes-nous
Créer son template ?
Template Creator…
Création d’un template en 10 étapes
Questions réponses

2. 2
Créez votre template Joomla! avec Template Creator CK
Paris 23 mai 2014
Qui suis-je ?
Céline ROBERT (c-line)
Webdesigner / formatrice / consultante / …
Co-fondatrice et gérante de
Joomla! depuis 2007
Agence de communication
Création de supports de communication
Formations à la communication
Conseil en communication

3. 3
Créez votre template Joomla! avec Template Creator CK
Paris 23 mai 2014
Qui suis-je ?
Cédric Keiflin (ced1870)
Joomla! depuis 2008
Modérateur sur forum.joomla.fr
Développeur de Template Creator CK entre autres…

4. 4
Créez votre template Joomla! avec Template Creator CK
Paris 23 mai 2014
Les 3 méthodes pour créer son template

5. 5
Créez votre template Joomla! avec Template Creator CK
Paris 23 mai 2014
… tout fait main
Dans les règles de l’art …

6. 6
Créez votre template Joomla! avec Template Creator CK
Paris 23 mai 2014
… pourquoi réinventer la roue ?
La rusée …

7. 7
Créez votre template Joomla! avec Template Creator CK
Paris 23 mai 2014
… pas toujours à la hauteur
Avec un logiciel …

8. 8
Créez votre template Joomla! avec Template Creator CK
Paris 23 mai 2014
Template creator

9. 9
Créez votre template Joomla! avec Template Creator CK
Paris 23 mai 2014
Evolution
Template Creator
Un composant
=
Création en direct sur le site
Couleurs
Responsive
Dégradés
Typographie
Ombres
CSS3
Compatibilité
Positions
Structure

10. 10
Créez votre template Joomla! avec Template Creator CK
Paris 23 mai 2014
Quelques exemples avec Template Creator
www.chocolaterie-larra.fr

11. 11
Créez votre template Joomla! avec Template Creator CK
Paris 23 mai 2014
Quelques exemples avec Template Creator
www.alaneo-formation.com

12. 12
Créez votre template Joomla! avec Template Creator CK
Paris 23 mai 2014
Quelques exemples avec Template Creator
www.hoyado.com

13. 13
Créez votre template Joomla! avec Template Creator CK
Paris 23 mai 2014
Quelques exemples avec Template Creator
www.com3elles.com

14. 14
Créez votre template Joomla! avec Template Creator CK
Paris 23 mai 2014
Le programme de l’atelier
1. installer le composant, créer le projet
2. créer un jeu de polices personnalisées
3. choisir une structure de site (colonnes)
4. créer des conteneurs
5. créer des zones de modules
6. ajouter son propre logo
7. personnaliser le template
8. personnaliser les styles
9. paramétrer le responsive design
Astuces
Questions / réponse

15. 15
Créez votre template Joomla! avec Template Creator CK
Paris 23 mai 2014
Démarrons !
Rappel : utilisez un
installation de Joomla avec
« exemples en français »

16. 16
Créez votre template Joomla! avec Template Creator CK
Paris 23 mai 2014
Démarrons !
Récupérez les fichiers sur
La clé USB !

17. +H T T P : / / W W W. T E M P L A T E - C R E A T O R . C O M
RÉSULTAT
FINAL
Logo
Menu horizontal déroulant
Zone pour slideshow
Modules alignés
Zone de contenu 3 colonnes
Modules alignés
Zone de pied de page
2

18. +H T T P : / / W W W. T E M P L A T E - C R E A T O R . C O M
INSTALLER
UNE POLICE GOOGLE
3
1
http://www.google.com/fonts#UsePlace:use/Collection:Open+Sans
2
3

19. +H T T P : / / W W W. T E M P L A T E - C R E A T O R . C O M
CRÉER UN
NOUVEAU TEMPLATE
• Menu
>> Composants
>> Template
Creator CK
Dans l’admin
de Joomla!
• Cliquez sur le
bouton
« Nouveau »
Dans
Template
Creator
• Choisissez votre
version de
Joomla!
• Donnez un nom
au template
Dans la
fenêtre
d’édition
Le nom du template ne doit comporter ni
espaces ni caractères spéciaux.
4
1
2
3

20. +H T T P : / / W W W. T E M P L A T E - C R E A T O R . C O M
CHOISIR UNE
STRUCTURE DE SITE
• Choisir le modèle
N° 13 qui
correspond le
mieux au design
souhaité
A la création
du template
• Lorsque le
logiciel vous le
demande, validez
le chargement du
thème par défaut
Chargement
du thème par
défaut
5
1
2

21. +H T T P : / / W W W. T E M P L A T E - C R E A T O R . C O M
ENREGISTRER LE
TEMPLATE
6
Pensez à enregistrer votre
template régulièrement !

22. +H T T P : / / W W W. T E M P L A T E - C R E A T O R . C O M
LOGO + MENU
7
• Créez un
nouveau
conteneur pour
accueillir le bloc
logo+menu
Conteneur
principal
• Glissez le bloc
logo+module
dans le nouveau
conteneur
Bloc
logo+module

23. +H T T P : / / W W W. T E M P L A T E - C R E A T O R . C O M
SLIDESHOW
8
• Créez un
nouveau
conteneur pour
accueillir le bloc
slideshow
Conteneur
principal
• Créez un
nouveau bloc de
module simple
dans le
conteneur
Bloc
slideshow

24. +H T T P : / / W W W. T E M P L A T E - C R E A T O R . C O M
MENU HORIZONTAL
9
•Supprimez le
bloc de menu
horizontal qui
existe déjà
Bloc menu
horizontal
• Editez le layout
du bloc
logo+module
• Désactivez le
module et
activez le menu
• Réglez les
largeurs à 65% /
35%
• Renommez le
nom et la
position pour le
menu : nav /
position-1
Bloc
logo+module
1
4 5
3
2
Lorsque vous renommez un bloc il faut éditez les CSS
et revalider pour mettre à jour les styles
67

25. +H T T P : / / W W W. T E M P L A T E - C R E A T O R . C O M
COULEURS
DE FOND
10
1
6
2
7
8
3
4
5

26. +H T T P : / / W W W. T E M P L A T E - C R E A T O R . C O M
CONFIGURER
LE TEMPLATE
11
• Largeur maxi de
1000px
• Design fluide qui
s’adapte à tous
les écrans
• Charger
Bootstrap pour
Joomla! 3
Paramètres
du template
• Couleur principale
de la page
#ebebeb
Fond de page
• Couleur du texte
et liens #969696
• Couleur des liens
survolés #00b7f0
• Texte de 12px
• Police ‘Segoe UI’
• Interligne de
20px
Texte
1
3
4
5
6 7
Onglet
Page
2

27. +H T T P : / / W W W. T E M P L A T E - C R E A T O R . C O M
CONFIGURER
LE TEMPLATE
12
1
Titre
H1
2
7 8
3
5
6
4

28. +H T T P : / / W W W. T E M P L A T E - C R E A T O R . C O M
CONFIGURER
LE TEMPLATE
13
1
Titre
H2
2
4
6
7
3
5

29. +H T T P : / / W W W. T E M P L A T E - C R E A T O R . C O M
CONFIGURER
LE TEMPLATE
14
1
Titre
H3
2
4
6
3
7
5

30. +H T T P : / / W W W. T E M P L A T E - C R E A T O R . C O M
CONFIGURER
LE TEMPLATE
15
1Bouton
2
4 5
3
6
7
8

31. +H T T P : / / W W W. T E M P L A T E - C R E A T O R . C O M
CONFIGURER
LE TEMPLATE
16
1Bouton
survolé
2
4
3

32. +H T T P : / / W W W. T E M P L A T E - C R E A T O R . C O M
CONFIGURER
LE TEMPLATE
17
1Champ
2
4
3
5
6

33. +H T T P : / / W W W. T E M P L A T E - C R E A T O R . C O M
CONFIGURER
LE TEMPLATE
18
1Champ
cliqué
2
4
3

34. +H T T P : / / W W W. T E M P L A T E - C R E A T O R . C O M
AJOUTER
SON LOGO
19
• Editez les CSS du
bloc ‘bannerlogo’
• Sélectionnez
votre image à
utiliser comme
logo
Image du
logo
• Donnez les
dimensions de
votre image
• Régler la taille du
bloc dans le
layout du bloc
‘banner’
Dimensions
du logo
3
4
1
2

35. +H T T P : / / W W W. T E M P L A T E - C R E A T O R . C O M
MENU
HORIZONTAL
20
1
Lien normal
Niveau1
2
3

36. +H T T P : / / W W W. T E M P L A T E - C R E A T O R . C O M
MENU
HORIZONTAL
21
1
Lien survolé
Niveau1
2
3
( IDEM pour lien actif )

37. +H T T P : / / W W W. T E M P L A T E - C R E A T O R . C O M
MENU
HORIZONTAL
22
1
Conteneur
Sous menu
3
2

38. +H T T P : / / W W W. T E M P L A T E - C R E A T O R . C O M
MENU
HORIZONTAL
23
1
Lien normal
Sous menu
2
3
4 5

39. +H T T P : / / W W W. T E M P L A T E - C R E A T O R . C O M
MENU
HORIZONTAL
24
1
Lien survolé
Sous menu
2
( IDEM pour lien actif )

40. +H T T P : / / W W W. T E M P L A T E - C R E A T O R . C O M
MENU
HORIZONTAL
25
1
Conteneur
Sous menu 2

41. +H T T P : / / W W W. T E M P L A T E - C R E A T O R . C O M
MODULES
ALIGNÉS
26

42. +H T T P : / / W W W. T E M P L A T E - C R E A T O R . C O M
MODULES
ALIGNÉS
27
Gestion
des largeurs
55,55 %44,45 %
32,7 % 33,6 % 33,6 %
24,25 % 25,25 % 25,25 % 25,25 %
19,2 % 20,2 % 20,2 % 20,2 % 20,2 %
Pour info, les
modules auront une
marge gauche de
5% (sauf les
modules tout à
gauche)

43. +H T T P : / / W W W. T E M P L A T E - C R E A T O R . C O M
MODULES
ALIGNÉS
28
1
2
4
3
Module tout à gauche
Styles des
modules
Autres modules
2

44. +H T T P : / / W W W. T E M P L A T E - C R E A T O R . C O M
MODULES
ALIGNÉS
29
1
2
4
3
Titre des
modules
5
6

45. +H T T P : / / W W W. T E M P L A T E - C R E A T O R . C O M
COLONNES
PRINCIPALES
30

46. +H T T P : / / W W W. T E M P L A T E - C R E A T O R . C O M
COLONNES
PRINCIPALES
31
1
6
Styles des
colonnes
>> Colonne gauche
>> Colonne centrale
>> Colonne droite
2
3
5
4
7

47. +H T T P : / / W W W. T E M P L A T E - C R E A T O R . C O M
COLONNES
PRINCIPALES
32
1 2
4
5
Titre des
colonnes
3

48. +H T T P : / / W W W. T E M P L A T E - C R E A T O R . C O M
MODULES
ALIGNÉS BAS
33
Styles des
modules

49. +H T T P : / / W W W. T E M P L A T E - C R E A T O R . C O M
MODULES
ALIGNÉS BAS
34
1
2
4
3
Module tout à gauche
Styles des
modules
Autres modules

50. +H T T P : / / W W W. T E M P L A T E - C R E A T O R . C O M
MODULES
ALIGNÉS BAS
35
1
2
4
3
Titre des
modules

51. +H T T P : / / W W W. T E M P L A T E - C R E A T O R . C O M
CONTENEUR
PIED DE PAGE
36

52. +H T T P : / / W W W. T E M P L A T E - C R E A T O R . C O M
CONTENEUR
PIED DE PAGE
37
4
Conteneur 1
2
3
5
6
7

53. 17
Créez votre template Joomla! avec Template Creator CK
Paris 23 mai 2014
Vous avez aimé
Vous aimerez :
Gestionnaire de menus
(admin)
Gestionnaire de modules
(admin)
Menu type mac
Effet paralaxe (3D) à
partir de vos images
Menus avancés
Diaporama élégant et
responsive
Infobulles avancées
Menu accordéon
Et plus encore sur www.joomlack.fr

54. 18
Créez votre template Joomla! avec Template Creator CK
Paris 23 mai 201418
Merci pour votre attention
www.joomlack.fr
et
www.com3elles.com