Documentation Template Creator3 FR PDF

KEIFLIN Cdric
http://www.template-creator.com
2013
http://www.joomlack.fr
KEIFLIN Cdric
2013
Remerciements
Je tiens remercier tous ceux qui m'ont aid et soutenu dans ce projet, ceux qui m'ont
encourag et qui ont pris le temps de tester mon composant.
Merci tous !
Cdric KEIFLIN
KEIFLIN Cdric
2013
Mes sites web

Portail Joomlack avec dmos et tlchargement des extensions dveloppes par moi,
ainsi que les news Joomlack.
Site web ddi Template Creator CK
http://tutoriels-joomla.joomlack.fr
Site ddi Joomla! 1.6 avec des tutoriels et une documentation sur la cration de
templates Joomla! 1.6
Notes de version
La prsente documentation est crite pour la version 3 de Template Creator.
KEIFLIN Cdric
2013
TABLE DES MATIERES

I.Installation du composant
II.Dmarrer avec Template Creator
1.Dcouverte
2.Crer un nouveau template
8
9
III.Fonctionnalits de Template Creator CK

1.Ajouter un bloc
2.Ajouter des styles
3.Ajouter des CSS personnaliss
3.1)Dans l'interface
3.2)Dans une feuille de styles personnalise
3.3)Mode expert
a)Modules et Menu
b)Hauteur et Largeur
c)Fond de page pour chaque conteneur
4.Compatibilit Internet Explorer
5.Tutoriels vidos
5.1)Dmo, crez votre template en 7 minutes
5.2)Ajouter sa police de caractres
5.3)Ajouter une feuille de styles CSS personnalise
5.4)Paramtrer le logo
5.5)Grer les problmes de fusion de marges
5.6)Crer un menu droulant
6.Styles du menu
7.Positions de modules invalides
8.Importer / exporter un gabarit de template
8.1)Exporter un gabarit
8.2)Importer un gabarit
KEIFLIN Cdric
6
7
12
13
14
15
15
16
17
18
19
19
20
21
21
21
21
21
21
21
22
23
24
24
25
2013
Installation du composant
I. Installation du composant
Template Creator est un composant Joomla! qui s'installe sur un site Joomla 2.5 ou 3.x.
Commencez par tlcharger l'archive ZIP du composant Template Creator. Allez dans
l'administration de votre site et dans le menu >> Extensions >> Gestion des extensions
>> Installation.
Cliquez sur Parcourir et slectionnez l'archive que vous venez de tlcharger. Ensuite
cliquez sur le bouton Installer. Joomla vous dit que le composant est correctement
install.
Voil le composant est isntall et prt tre utilis. Vous le retrouvez dans le menu >>
Composants >> Template Creator CK.
Linstallation de Template Creator CK installe un PAQUET (cest un type dextension)

qui contient le composant et le template systme "templatecreatorck".
Pour dsinstaller Template Creator CK il faut dsinstaller le paquet complet.
KEIFLIN Cdric
2013
II.
Dmarrer avec Template Creator
KEIFLIN Cdric
2013
Dcouverte
1. Dcouverte
Dans l'interface du composant on retrouve la barre d'actions en haut de lcran :
Nouveau : crer un nouveau template

Modifier : modifier les informations du template slectionn (pour diter le template il
faut cliquer sur son nom dans la liste)
Copier : copier le template slectionn
Supprimer : supprimer le template slectionn
Importer un gabarit : importer un gabarit qui aurait t prcdemment export
Exporter un gabarit : exporter un gabarit pour le sauvegarder ou le partager
Qu'est ce qu'un gabarit ? c'est une copie de la structure complte du template cr
dans Template Creator CK.
Dans l'dition d'un template ou retrouve un menu en haut :
Informations : renseigne les champs comme le nom du template, de l'auteur, etc

Paramtres : dfinit les styles principaux de la page comme la largeur, la couleur de
fond ou du texte, les titres, les boutons
Responsive design : affiche linterface pour grer le comportement des modules en
fonction des rsolutions
Prvisutaliser : affiche le rendu rel du template
Package : gnre une archive ZIP tlcharger qui contient le template que l'on peut
installer
Copier : copie directement les modifications dans le template sil est dj install dans
le site
Positions de modules valides/invalides : vrifies si toutes les positions crent dans le
template contiennent des modules publis sur le site
Si une position de module existe dans le template et ne contient aucun module publi
sur le site, vous ne verrez rien dans cette position lors de la prvisualisation. Pour
viter ce dsagrment Template Creator vous avertit et vous propose de publier
automatiquement des donnes d'exemple dans les positions manquantes.
KEIFLIN Cdric
2013
Crer un nouveau template
2. Crer un nouveau template

Cliquer sur Nouveau dans ladministration du site
Donner un nom au template (requis) et remplissez les informations que vous voulez
stocker dans le fichier XML. Puis Enregistrer
Le nom du template doit tre simple, sans majuscules, ni espaces ou caractres

spciaux :
toto >> OK
Toto >> MAUVAIS
to to >> MAUVAIS
toto-est-gentil >> MAUVAIS
Cliquer sur le nom du template dans la liste et on arrive sur la partie frontend (ct
visiteur) du site o il faut se connecter en administrateur (en fonction des droits des
utilisateurs) pour acder ldition du template.
KEIFLIN Cdric
2013
Vous arrivez sur la page de slection du layout pour partir sur une structure qui
sapproche le plus de ce que vous voulez faire :
Cliquez sur un des 14 modles et votre template est prt tre modifi.
Ces modles sont prdfinis pour vous faciliter le travail et accrotre votre production
(gain de temps). Vous pouvez tout moment ajouter, supprimer ou dplacer des blocs
de modules lintrieur de nimporte quel layout aprs lavoir slectionn.
Cliquez sur le bouton "Paramtres" dans le menu du haut pour diter le style gnral du
template :
- largeur de la page
- couleur de fond, du texte, des liens
- styles des titres H1 H6
- styles des boutons
Ensuite sur chaque bloc vous pouvez ajouter les styles (couleur, fond, bordures, etc...).
Survolez un bloc et la barre de contrle apparat :
Supprimer
Dplacer
vers le haut
Editer les styles CSS du

bloc
Dplacer
vers le bas
Il suffit maintenant d'diter chaque bloc pour lui donner les styles. Pour cela on clique
sur le bouton CSS.
KEIFLIN Cdric
10
2013
Les styles dfinis dans l'interface sont immdiatement appliqus au bloc dit pour avoir
un rendu en temps rel. Notez que ce rendu n'est pas totalement fiable, afin d'avoir le
rendu final de votre template vous devez cliquer sur le bouton Prvisualiser sur le menu
du haut.
Une fois votre template cr vous pouvez le tlcharger en cliquant sur le bouton
Package. Vous obtenez une archive ZIP que vous pouvez directement installer dans
votre site web.
KEIFLIN Cdric
11
2013
III.
Fonctionnalits de Template Creator CK
Dans cette section nous allons dcouvrir les diffrentes fonctions pour crer un
template.
KEIFLIN Cdric
12
2013
Ajouter un bloc
1. Ajouter un bloc
Vous pouvez ajouter un bloc dans n'importe quel modle de layout. Etant donn que
vous pouvez avoir plusieurs conteneurs dans la meme page, il faut savoir dans lequel
vous voulez ajouter votre bloc.
Suvolez le conteneur pour afficher la barre de contrle et cliquez sur la 4 e icne :
Ajouter un nouveau conteneur
Ajouter un bloc dans le conteneur
Une nouvelle fentre apparat pour choisir le bloc insrer.
Cliquez sur le type de bloc dsir et le systme vous propose automatiquement un nom
et une position de module .Vous pouvez les changer si ceux-ci ne vous conviennent pas,
et la validation le systme vrifiera si les noms sont uniques.
Ensuite le bloc sera insr au dbut du conteneur.
KEIFLIN Cdric
13
2013
Ajouter des styles
2. Ajouter des styles

Sur chaque bloc on peut ajouter des styles CSS pour dfinir les couleurs, le texte, les
bordures, etc ...
Cliquez que le bouton CSS dans la barre de contrle :
La nouvelle fentre apparat, saisissez alors les valeurs que vous voulez et cliquez sur le
bouton Enregistrer pour appliquer directement vos changements dans l'interface de
Template Creator.
Sur chaque champs vous pouvez donner des valeurs en "px" qui est l'unit par dfaut.
Mais vous pouvez galement dfinir votre propre unit en l'inscrivant dans le champs.
50 gal 50px
50px unit en px (idem que si vous ne mettez pas l'unit)
50em unit force en em
50% unit force en %
Les styles sont directement appliqus dans l'interface de Template Creator avec un
rendu rel. Cependant l'interface ncessite d'avoir certaines marges et bordures sur les
blocs, donc pour avoir un rendu rel du template il est ncessaire de cliquer sur le
bouton Prvisualiser dans le menu du haut.
KEIFLIN Cdric
14
2013
Ajouter des CSS personnaliss
3. Ajouter des CSS personnaliss

3.1) Dans l'interface
Ici c'est une zone d'criture libre de styles css qui seront ajouts l'lment. Tous les
styles cris ici seront ajouts sur le bloc, module, titre ou lment de menu que vous
ditez.
Exemple pour un bloc ayant pour ID "left", le code est ajout entre les accolades :
#left {
...code standard de template creator...
text-shadow : #000 2px 0 5px ;
}
De la mme manire vous pouvez dfinir plusieurs lments en utilisant les accolades.
Cest une technique avance qui vous permet dajouter vos CSS sans limite.
Par exemple pour nappliquer lombre du texte (text-shadow) quaux liens contenus
dans le bloc "left" :
Exemple avec le bloc "left" :

#left {
KEIFLIN Cdric
15
2013
...code standard de template creator...

}
#left a {
text-shadow: #000 2px 0 5px;
}
On voit que le code est insr lintrieur de #left {}, donc pour dfinir un nouvel
identifiant CSS (#left a) il faut dabord fermer laccolade de #left et ensuite ajouter le
code. Veillez ne pas mettre daccolade la fin car elle est automatiquement ajoute
par Template Creator.
3.2) Dans une feuille de styles personnalise

Vous pouvez crer une feuille de styles spcifiques appele "custom.css" et l'inclure dans
votre template. Vous pouvez mettre dedans tous les styles CSS que vous voulez et ils
seront intgrs dans le template.
Vous devez crer un fichier ici
[joomla]/components/com_templateck/projects/[yourtemplate]/css/custom.css
Une fois le fichier cr, cliquez sur un des boutons Prvisualiser, Package, ou Copier
KEIFLIN Cdric
16
2013
3.3) Mode expert

Vous pouvez activer le mode expert avec l'icne en haut de la page
Voici un petit aperu pour vous montrer concrtement dans une colonne de gauche
quoi correspondent les lments :
BLOC
MODULE
TITRE DE MODULE
MODULE
TITRE DE MODULE
MODULE
TITRE DE MODULE
BLOC : c'est la colonne complte

MODULE : c'est chaque module publi dans la colonne
TITRE DE MODULE : le tite de chaque module publi
KEIFLIN Cdric
17
2013
a)
Modules et Menu
Par dfaut lorsque vous ditez les styles CSS d'un bloc vous avez deux onglets "bloc" et
"titre de module".
En activant le mode expert vous voyez apparatre deux nouveaux onglets :
Modules : vous permet de styles les modules pour leur appliquer une couleur par
exemple sans devoir l'appliquer la colonne entire
Menu : vous permet de styler les liens de menu si vous avez publi un module de menu
dans la position de module comme par exemple un menu dans la colonne de gauche.
KEIFLIN Cdric
18
2013
b)
Hauteur et Largeur
Dans chaque bloc vous allez retrouver deux nouveaux champs "largeur" et "hauteur".
ATTENTION: n'utilisez ces champs que si vous savez exactement ce que vous faites. Si
vous appliquez une largeur ou une hauteur un bloc vous risquez de perdre l'aspect
responsive et d'avoir des problmes de rendu. Dans la plupart des cas on peut grer
les dimensions du blocs grces aux marges externes et internes.
c)
Fond de page pour chaque conteneur
Si vous ditez les CSS d'un conteneur (wrapper) avec le mode expert activ vous verrez
un nouvel onglet "Fond de page". Celui-ci vous permet de dfinir le fond sur toute la
largeur de la page derrire le conteneur. Ceci est trs utile lorsque vous voulez crer des
designs multibackgrounds.
KEIFLIN Cdric
19
2013
Compatibilit Internet Explorer
4. Compatibilit Internet Explorer

Comment faire pour que Internet Explorer utilise les styles dfinis dans Template
Creator, sachant qu'on utilise les techniques CSS3 et que IE jusque la version 8 ne les
comprends pas ?
Il n'y a rien faire, le logiciel vrifies si des styles CSS3 sont prsents il charge
automatiquement un script qui permet d'muler les fonctions sous IE 7+8.d
Toutefois l'utilisation de ce script (CSSPIE) peut causer des conflits ou des lenteurs, c'est
pour a que dans l'administration du template (une fois fini et install sur le site) vous
avez une option qui permet d'activer le script de compatibilit IE ou non :
KEIFLIN Cdric
20
2013
Tutoriels vidos
5. Tutoriels vidos
Vous pouvez retrouver toutes ces vidos dans l'administration de Template Creator CK
dans l'onglet "Aide".
5.1) Dmo, crez votre template en 7 minutes

5.2) Ajouter sa police de caractres
5.3) Ajouter une feuille de styles CSS personnalise
5.4) Paramtrer le logo
5.5) Grer les problmes de fusion de marges
5.6) Crer un menu droulant
KEIFLIN Cdric
21
2013
Styles du menu
6. Styles du menu
Pour n'importe quel bloc vous pouvez personnaliser les menus qu'il contient, par exemple
pour le menu horizontal, ou dans les colonnes de gauche et droite. Il faut cliquer sur le
bouton Menu dans la fentre des styles CSS.
Pour activer l'onglet Menu vous devez passer en Mode Expert, sauf pour le menu
horizontal o l'onglet est actif par dfaut
On peut alors modifier les styles des lments suivants :

Lien : c'est le lien de menu qui peut avoir 3 tats, normal, au survol de la souris ou acitf
(lien de la page courante)
Niveau 1 : ce sont les lments du premier niveau, ceux qui sont directement visibles
Sous menu: c'est le bloc qui contient les liens de niveau 2 (lorsque l'on passe la souris
sur un lment parent dans le menu horizontal on affiche le premier sous-menu).
Sous menu 2 : sous menu partir du niveau 3 et plus
Pour chaque lment vous pouvez dfinir les styles que vous voulez.
Si vous utilisez un bloc de menu horizontal les css seront automatiquement gnrs
pour vous offrir un menu droulant CSS. En plus les css seront aussi compatibles avec
le module Maximenu pour crer votre propre megamenu (multi colonnes,
descriptions, chargement de modules...).
KEIFLIN Cdric
22
2013
Positions de modules invalides
7. Positions de modules invalides

Dans le menu du haut vous retrouvez une case qui affiche deux messages d'informations
sur la publication des modules. Ce bouton permet de vous prvenir si vous avez dfini
des positions de modules dans votre template mais dans lesquelles vous n'avez publi
aucun module sur votre site : dans ce cas vous ne verrez rien cet endroit dans la
prvisualisation !
Vous pouvez cliquer sur ce bouton pour afficher la fentre de gestion des positions :
Vous pouvez voir les positions concernes. Deux solutions, soit vous allez publier
manuellement le module que vous voulez dans la position manquante, ou alors vous
cliquer sur le bouton "Publier automatiquement les donnes d'exemple" pour que
Template Creator publie des modules d'exemple pour vous. Ensuite vous obtiendrez le
message en vert.
Notez que si vous ne publiez pas de module dans les positions que vous crz dans le
template vous ne verrez rien lors de la prvisualisation.
KEIFLIN Cdric
23
2013
Importer / exporter un gabarit de template
8. Importer / exporter un gabarit de template

La premire question qu'on se pose, c'est quoi un gabarit ?
On a dj parl de template, et maintenant voil la notion de gabarit qui fait son
apparition. Je vais essayer de vous expliquer cela en quelques mots :
Template : terme dfini par joomla qui consiste en un ensemble de dossiers et fichiers
installables sur un site Joomla (c'est l'archive que vous pouvez crer la dernire tape)
Gabarit : c'est tout simplement un template sous forme installable dans le composant
Template Creator. Vous ne pouvez pas importer un template Joomla, pour tre exploit
par le logiciel il faut exporter le template sous forme de gabarit. Il stocke toutes les
informations de configuration que vous avez saisies lors de la cration. Vous pouvez donc
stocker vos gabarits pour les sauvegarder ou les partager avec d'autres utilisateurs de
Template Creator.
8.1) Exporter un gabarit

Lorsque l'on arrive sur la page principale du composant qui liste tous les templates on
retrouve plusieurs icnes en haut droite. L'une d'elles permet d'exporter un gabarit
pour l'exploiter sur une autre installation de Template Creator, pour partager ses propres
crations, ou alors pour simplement le stocker.
Pour exporter un gabarit il faut d'abord le slectionner dans la liste des templates, puis
cliquer sur l'icne ci-dessus. On arrive alors directement sur la page qui nous permet de
le tlcharger.
KEIFLIN Cdric
24
2013
Importer / exporter un gabarit de template
Etant donn que le gabarit est un fichier texte (au format .tck) en cliquant sur le bouton
vous allez ouvrir le fichier. Pour pouvoir l'enregistrer sur votre machine, il faut faire un
clic droit sur le bout Tlcharger le gabarit et faire Enregistrer la cible sous.
Vous pouvez ainsi enregistrer le fichier .tck o vous voulez.
8.2) Importer un gabarit

L'importation permet de rinstaller un template cr avec Template Creator que vous
avez prcdemment export. Cliquez sur l'icne Importer un gabarit
Vous arrivez sur la page qui vous demande d'aller chercher le fichier .tck qui contient le
gabarit.
Slectonnez le fichier et cliquez sur le bouton Installer, le gabarit est install et

apparait dans la liste des templates sur la page principale du composant.
Vous ne pouvez pas importer un gabarit de la version 2 dans la version 3 de Template
Creator
KEIFLIN Cdric
25
2013

Documentation Template Creator3 FR PDF

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Documentation Template Creator3 FR PDF

Uploaded by

Copyright:

Available Formats

KEIFLIN Cdric

Mes sites web

TABLE DES MATIERES

III.Fonctionnalits de Template Creator CK

Linstallation de Template Creator CK installe un PAQUET (cest un type dextension)

Dmarrer avec Template Creator

Dmarrer avec Template Creator

Nouveau : crer un nouveau template

Informations : renseigne les champs comme le nom du template, de l'auteur, etc

Dmarrer avec Template Creator

Crer un nouveau template

2. Crer un nouveau template

Le nom du template doit tre simple, sans majuscules, ni espaces ou caractres

Dmarrer avec Template Creator

Crer un nouveau template

Editer les styles CSS du

Dmarrer avec Template Creator

Crer un nouveau template

Dmarrer avec Template Creator

Crer un nouveau template

Fonctionnalits de Template Creator CK

Fonctionnalits de Template Creator CK

Ajouter un nouveau conteneur

Ajouter un bloc dans le conteneur

Une nouvelle fentre apparat pour choisir le bloc insrer.

Fonctionnalits de Template Creator CK

Ajouter des styles

2. Ajouter des styles

50px unit en px (idem que si vous ne mettez pas l'unit)

50em unit force en em

50% unit force en %

Fonctionnalits de Template Creator CK

Ajouter des CSS personnaliss

3. Ajouter des CSS personnaliss

Exemple avec le bloc "left" :

Fonctionnalits de Template Creator CK

Ajouter des CSS personnaliss

...code standard de template creator...

3.2) Dans une feuille de styles personnalise

Fonctionnalits de Template Creator CK

Ajouter des CSS personnaliss

3.3) Mode expert

BLOC : c'est la colonne complte

Fonctionnalits de Template Creator CK

Ajouter des CSS personnaliss

En activant le mode expert vous voyez apparatre deux nouveaux onglets :

Fonctionnalits de Template Creator CK

Ajouter des CSS personnaliss

Fond de page pour chaque conteneur

Fonctionnalits de Template Creator CK

Compatibilit Internet Explorer

4. Compatibilit Internet Explorer

Fonctionnalits de Template Creator CK

5.1) Dmo, crez votre template en 7 minutes

Fonctionnalits de Template Creator CK

On peut alors modifier les styles des lments suivants :

Fonctionnalits de Template Creator CK

Positions de modules invalides

7. Positions de modules invalides

Fonctionnalits de Template Creator CK

Importer / exporter un gabarit de template

8. Importer / exporter un gabarit de template

8.1) Exporter un gabarit