atelier template creator joomladay france 2014
DESCRIPTION
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.TRANSCRIPT
![Page 1: Atelier template creator Joomladay France 2014](https://reader031.vdocuments.net/reader031/viewer/2022020122/549bea37b4795991318b45cc/html5/thumbnails/1.jpg)
1
Créez votre template Joomla! avec Template Creator CK
Paris 23 mai 2014 1
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
![Page 2: Atelier template creator Joomladay France 2014](https://reader031.vdocuments.net/reader031/viewer/2022020122/549bea37b4795991318b45cc/html5/thumbnails/2.jpg)
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
![Page 3: Atelier template creator Joomladay France 2014](https://reader031.vdocuments.net/reader031/viewer/2022020122/549bea37b4795991318b45cc/html5/thumbnails/3.jpg)
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…
![Page 4: Atelier template creator Joomladay France 2014](https://reader031.vdocuments.net/reader031/viewer/2022020122/549bea37b4795991318b45cc/html5/thumbnails/4.jpg)
4
Créez votre template Joomla! avec Template Creator CK
Paris 23 mai 2014
Les 3 méthodes pour créer son template
![Page 5: Atelier template creator Joomladay France 2014](https://reader031.vdocuments.net/reader031/viewer/2022020122/549bea37b4795991318b45cc/html5/thumbnails/5.jpg)
5
Créez votre template Joomla! avec Template Creator CK
Paris 23 mai 2014
… tout fait main
Dans les règles de l’art …
![Page 6: Atelier template creator Joomladay France 2014](https://reader031.vdocuments.net/reader031/viewer/2022020122/549bea37b4795991318b45cc/html5/thumbnails/6.jpg)
6
Créez votre template Joomla! avec Template Creator CK
Paris 23 mai 2014
… pourquoi réinventer la roue ?
La rusée …
![Page 7: Atelier template creator Joomladay France 2014](https://reader031.vdocuments.net/reader031/viewer/2022020122/549bea37b4795991318b45cc/html5/thumbnails/7.jpg)
7
Créez votre template Joomla! avec Template Creator CK
Paris 23 mai 2014
… pas toujours à la hauteur
Avec un logiciel …
![Page 8: Atelier template creator Joomladay France 2014](https://reader031.vdocuments.net/reader031/viewer/2022020122/549bea37b4795991318b45cc/html5/thumbnails/8.jpg)
8
Créez votre template Joomla! avec Template Creator CK
Paris 23 mai 2014
Template creator
![Page 9: Atelier template creator Joomladay France 2014](https://reader031.vdocuments.net/reader031/viewer/2022020122/549bea37b4795991318b45cc/html5/thumbnails/9.jpg)
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
![Page 10: Atelier template creator Joomladay France 2014](https://reader031.vdocuments.net/reader031/viewer/2022020122/549bea37b4795991318b45cc/html5/thumbnails/10.jpg)
10
Créez votre template Joomla! avec Template Creator CK
Paris 23 mai 2014
Quelques exemples avec Template Creator
www.chocolaterie-larra.fr
![Page 11: Atelier template creator Joomladay France 2014](https://reader031.vdocuments.net/reader031/viewer/2022020122/549bea37b4795991318b45cc/html5/thumbnails/11.jpg)
11
Créez votre template Joomla! avec Template Creator CK
Paris 23 mai 2014
Quelques exemples avec Template Creator
www.alaneo-formation.com
![Page 12: Atelier template creator Joomladay France 2014](https://reader031.vdocuments.net/reader031/viewer/2022020122/549bea37b4795991318b45cc/html5/thumbnails/12.jpg)
12
Créez votre template Joomla! avec Template Creator CK
Paris 23 mai 2014
Quelques exemples avec Template Creator
www.hoyado.com
![Page 13: Atelier template creator Joomladay France 2014](https://reader031.vdocuments.net/reader031/viewer/2022020122/549bea37b4795991318b45cc/html5/thumbnails/13.jpg)
13
Créez votre template Joomla! avec Template Creator CK
Paris 23 mai 2014
Quelques exemples avec Template Creator
www.com3elles.com
![Page 14: Atelier template creator Joomladay France 2014](https://reader031.vdocuments.net/reader031/viewer/2022020122/549bea37b4795991318b45cc/html5/thumbnails/14.jpg)
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
![Page 15: Atelier template creator Joomladay France 2014](https://reader031.vdocuments.net/reader031/viewer/2022020122/549bea37b4795991318b45cc/html5/thumbnails/15.jpg)
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 »
![Page 16: Atelier template creator Joomladay France 2014](https://reader031.vdocuments.net/reader031/viewer/2022020122/549bea37b4795991318b45cc/html5/thumbnails/16.jpg)
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 !
![Page 17: Atelier template creator Joomladay France 2014](https://reader031.vdocuments.net/reader031/viewer/2022020122/549bea37b4795991318b45cc/html5/thumbnails/17.jpg)
+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ÉSULTATFINAL
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
![Page 18: Atelier template creator Joomladay France 2014](https://reader031.vdocuments.net/reader031/viewer/2022020122/549bea37b4795991318b45cc/html5/thumbnails/18.jpg)
+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
INSTALLERUNE POLICE GOOGLE
3
1
http://www.google.com/fonts#UsePlace:use/Collection:Open+Sans
2
3
![Page 19: Atelier template creator Joomladay France 2014](https://reader031.vdocuments.net/reader031/viewer/2022020122/549bea37b4795991318b45cc/html5/thumbnails/19.jpg)
+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’adminde 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
![Page 20: Atelier template creator Joomladay France 2014](https://reader031.vdocuments.net/reader031/viewer/2022020122/549bea37b4795991318b45cc/html5/thumbnails/20.jpg)
+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
![Page 21: Atelier template creator Joomladay France 2014](https://reader031.vdocuments.net/reader031/viewer/2022020122/549bea37b4795991318b45cc/html5/thumbnails/21.jpg)
+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 !
![Page 22: Atelier template creator Joomladay France 2014](https://reader031.vdocuments.net/reader031/viewer/2022020122/549bea37b4795991318b45cc/html5/thumbnails/22.jpg)
+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+moduledans le nouveau conteneur
Bloc logo+module
![Page 23: Atelier template creator Joomladay France 2014](https://reader031.vdocuments.net/reader031/viewer/2022020122/549bea37b4795991318b45cc/html5/thumbnails/23.jpg)
+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
![Page 24: Atelier template creator Joomladay France 2014](https://reader031.vdocuments.net/reader031/viewer/2022020122/549bea37b4795991318b45cc/html5/thumbnails/24.jpg)
+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 layoutdu 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
![Page 25: Atelier template creator Joomladay France 2014](https://reader031.vdocuments.net/reader031/viewer/2022020122/549bea37b4795991318b45cc/html5/thumbnails/25.jpg)
+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
COULEURSDE FOND
10
1
6
2
7
8
3
4
5
![Page 26: Atelier template creator Joomladay France 2014](https://reader031.vdocuments.net/reader031/viewer/2022020122/549bea37b4795991318b45cc/html5/thumbnails/26.jpg)
+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
CONFIGURERLE 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
OngletPage
2
![Page 27: Atelier template creator Joomladay France 2014](https://reader031.vdocuments.net/reader031/viewer/2022020122/549bea37b4795991318b45cc/html5/thumbnails/27.jpg)
+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
CONFIGURERLE TEMPLATE
12
1
TitreH1
2
7 8
3
5
6
4
![Page 28: Atelier template creator Joomladay France 2014](https://reader031.vdocuments.net/reader031/viewer/2022020122/549bea37b4795991318b45cc/html5/thumbnails/28.jpg)
+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
CONFIGURERLE TEMPLATE
13
1
TitreH2
2
4
6
7
3
5
![Page 29: Atelier template creator Joomladay France 2014](https://reader031.vdocuments.net/reader031/viewer/2022020122/549bea37b4795991318b45cc/html5/thumbnails/29.jpg)
+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
CONFIGURERLE TEMPLATE
14
1
TitreH3
2
46
3
7
5
![Page 30: Atelier template creator Joomladay France 2014](https://reader031.vdocuments.net/reader031/viewer/2022020122/549bea37b4795991318b45cc/html5/thumbnails/30.jpg)
+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
CONFIGURERLE TEMPLATE
15
1Bouton
2
4 5
3
67
8
![Page 31: Atelier template creator Joomladay France 2014](https://reader031.vdocuments.net/reader031/viewer/2022020122/549bea37b4795991318b45cc/html5/thumbnails/31.jpg)
+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
CONFIGURERLE TEMPLATE
16
1Boutonsurvolé
2
4
3
![Page 32: Atelier template creator Joomladay France 2014](https://reader031.vdocuments.net/reader031/viewer/2022020122/549bea37b4795991318b45cc/html5/thumbnails/32.jpg)
+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
CONFIGURERLE TEMPLATE
17
1Champ
2
4
3
5
6
![Page 33: Atelier template creator Joomladay France 2014](https://reader031.vdocuments.net/reader031/viewer/2022020122/549bea37b4795991318b45cc/html5/thumbnails/33.jpg)
+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
CONFIGURERLE TEMPLATE
18
1Champcliqué
2
4
3
![Page 34: Atelier template creator Joomladay France 2014](https://reader031.vdocuments.net/reader031/viewer/2022020122/549bea37b4795991318b45cc/html5/thumbnails/34.jpg)
+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
AJOUTERSON 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
![Page 35: Atelier template creator Joomladay France 2014](https://reader031.vdocuments.net/reader031/viewer/2022020122/549bea37b4795991318b45cc/html5/thumbnails/35.jpg)
+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 normalNiveau1
2
3
![Page 36: Atelier template creator Joomladay France 2014](https://reader031.vdocuments.net/reader031/viewer/2022020122/549bea37b4795991318b45cc/html5/thumbnails/36.jpg)
+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 )
![Page 37: Atelier template creator Joomladay France 2014](https://reader031.vdocuments.net/reader031/viewer/2022020122/549bea37b4795991318b45cc/html5/thumbnails/37.jpg)
+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
ConteneurSous menu
3
2
![Page 38: Atelier template creator Joomladay France 2014](https://reader031.vdocuments.net/reader031/viewer/2022020122/549bea37b4795991318b45cc/html5/thumbnails/38.jpg)
+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 normalSous menu
2
34 5
![Page 39: Atelier template creator Joomladay France 2014](https://reader031.vdocuments.net/reader031/viewer/2022020122/549bea37b4795991318b45cc/html5/thumbnails/39.jpg)
+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 )
![Page 40: Atelier template creator Joomladay France 2014](https://reader031.vdocuments.net/reader031/viewer/2022020122/549bea37b4795991318b45cc/html5/thumbnails/40.jpg)
+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
ConteneurSous menu 2
![Page 41: Atelier template creator Joomladay France 2014](https://reader031.vdocuments.net/reader031/viewer/2022020122/549bea37b4795991318b45cc/html5/thumbnails/41.jpg)
+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
MODULESALIGNÉS
26
![Page 42: Atelier template creator Joomladay France 2014](https://reader031.vdocuments.net/reader031/viewer/2022020122/549bea37b4795991318b45cc/html5/thumbnails/42.jpg)
+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
MODULESALIGNÉS
27
Gestiondes 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)
![Page 43: Atelier template creator Joomladay France 2014](https://reader031.vdocuments.net/reader031/viewer/2022020122/549bea37b4795991318b45cc/html5/thumbnails/43.jpg)
+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
MODULESALIGNÉS
28
1
2
4
3
Module tout à gauche
Styles des modules
Autres modules
2
![Page 44: Atelier template creator Joomladay France 2014](https://reader031.vdocuments.net/reader031/viewer/2022020122/549bea37b4795991318b45cc/html5/thumbnails/44.jpg)
+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
MODULESALIGNÉS
29
1
2
43
Titre des modules
5
6
![Page 45: Atelier template creator Joomladay France 2014](https://reader031.vdocuments.net/reader031/viewer/2022020122/549bea37b4795991318b45cc/html5/thumbnails/45.jpg)
+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
COLONNESPRINCIPALES
30
![Page 46: Atelier template creator Joomladay France 2014](https://reader031.vdocuments.net/reader031/viewer/2022020122/549bea37b4795991318b45cc/html5/thumbnails/46.jpg)
+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
COLONNESPRINCIPALES
31
1
6
Styles descolonnes
>> Colonne gauche
>> Colonne centrale
>> Colonne droite
2
3
5
47
![Page 47: Atelier template creator Joomladay France 2014](https://reader031.vdocuments.net/reader031/viewer/2022020122/549bea37b4795991318b45cc/html5/thumbnails/47.jpg)
+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
COLONNESPRINCIPALES
32
1 2
4
5
Titre des colonnes
3
![Page 48: Atelier template creator Joomladay France 2014](https://reader031.vdocuments.net/reader031/viewer/2022020122/549bea37b4795991318b45cc/html5/thumbnails/48.jpg)
+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
MODULESALIGNÉS BAS
33
Styles des modules
![Page 49: Atelier template creator Joomladay France 2014](https://reader031.vdocuments.net/reader031/viewer/2022020122/549bea37b4795991318b45cc/html5/thumbnails/49.jpg)
+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
MODULESALIGNÉS BAS
34
1
2
4
3
Module tout à gauche
Styles des modules
Autres modules
![Page 50: Atelier template creator Joomladay France 2014](https://reader031.vdocuments.net/reader031/viewer/2022020122/549bea37b4795991318b45cc/html5/thumbnails/50.jpg)
+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
MODULESALIGNÉS BAS
35
1
2
4
3
Titre des modules
![Page 51: Atelier template creator Joomladay France 2014](https://reader031.vdocuments.net/reader031/viewer/2022020122/549bea37b4795991318b45cc/html5/thumbnails/51.jpg)
+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
CONTENEURPIED DE PAGE
36
![Page 52: Atelier template creator Joomladay France 2014](https://reader031.vdocuments.net/reader031/viewer/2022020122/549bea37b4795991318b45cc/html5/thumbnails/52.jpg)
+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
CONTENEURPIED DE PAGE
37
4
Conteneur 1
2
3
5
6
7
![Page 53: Atelier template creator Joomladay France 2014](https://reader031.vdocuments.net/reader031/viewer/2022020122/549bea37b4795991318b45cc/html5/thumbnails/53.jpg)
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
![Page 54: Atelier template creator Joomladay France 2014](https://reader031.vdocuments.net/reader031/viewer/2022020122/549bea37b4795991318b45cc/html5/thumbnails/54.jpg)
18
Créez votre template Joomla! avec Template Creator CK
Paris 23 mai 2014 18
Merci pour votre attention www.joomlack.fr
et www.com3elles.com