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
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
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
Créez votre template Joomla! avec Template Creator CK
Paris 23 mai 2014
Les 3 méthodes pour créer son template
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
Créez votre template Joomla! avec Template Creator CK
Paris 23 mai 2014
… pourquoi réinventer la roue ?
La rusée …
7
Créez votre template Joomla! avec Template Creator CK
Paris 23 mai 2014
… pas toujours à la hauteur
Avec un logiciel …
8
Créez votre template Joomla! avec Template Creator CK
Paris 23 mai 2014
Template creator
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
Créez votre template Joomla! avec Template Creator CK
Paris 23 mai 2014
Quelques exemples avec Template Creator
www.chocolaterie-larra.fr
11
Créez votre template Joomla! avec Template Creator CK
Paris 23 mai 2014
Quelques exemples avec Template Creator
www.alaneo-formation.com
12
Créez votre template Joomla! avec Template Creator CK
Paris 23 mai 2014
Quelques exemples avec Template Creator
www.hoyado.com
13
Créez votre template Joomla! avec Template Creator CK
Paris 23 mai 2014
Quelques exemples avec Template Creator
www.com3elles.com
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
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
Créez votre template Joomla! avec Template Creator CK
Paris 23 mai 2014
Démarrons !
Récupérez les fichiers sur La clé USB !
+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
+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
+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
+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
+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 !
+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
+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
+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
+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
+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
+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
+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
+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
+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
+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
+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
+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
+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
+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
+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 )
+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
+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
+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 )
+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
+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
+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)
+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
+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
+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
+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
+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
+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
+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
+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
+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
+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
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
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
Recommended
