Documentation Template Creator CK

Transcription

1 1

2 2

3 Remerciements Je tiens à remercier tous ceux qui m'ont soutenu et encouragé dans ce projet, ceux qui m'ont aidé, qui ont répondu à mes questions et qui m'ont permis au fil du temps de rassembler toutes ces connaissances. Cédric KEIFLIN Mes sites web Portail Joomlack avec démos des extensiosn que j ai développées pour Joomla! Site dédié à Joomla! avec des tutoriels et une documentation sur la création de templates Joomla! Composant Joomla! que j ai développé et qui permet de créer vos propres templates Annuaire de templates créés avec Template Creator CK. Vous pouvez les télécharger et les utiliser pour vos projets Site dédié à mes extensions pour Wordpress. Notes de version La présente documentation est écrite pour la version 3 de Template Creator. 3

4 Content table I. Installation du composant... 5 II. Tour d horizon... 6 III. Créer un nouveau template... 7 IV. Ajouter un bloc V. Ajouter des styles VI. Gérer la largeur des modules alignés VII. Gestion des colonnes VIII. Ajouter des CSS personnalisés IX. Compatibilité Internet Explorer X. Tutoriels Vidéos XI. Styles du menu XII. Positions de modules invalides XIII. Importer / exporter un gabarit XIV. Polices XV. Responsive Design XVI. Créer un module pleine page

5 I. Installation du composant Template Creator est un composant Joomla! qui s'installe sur un site Joomla 2.5 ou 3.x. Commencez par télécharger 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 sélectionnez l'archive que vous venez de télécharger. Ensuite cliquez sur le bouton Installer. Joomla vous dit que le composant est correctement installé. Voilà le composant est isntallé et prêt à être utilisé. Vous le retrouvez dans le menu >> Composants >> Template Creator CK. L installation de Template Creator CK installe un PAQUET (c est un type d extension) qui contient le composant et le template système "templatecreatorck". Pour désinstaller Template Creator CK il faut désinstaller le paquet complet. 5

6 II. Tour d horizon Dans l'interface du composant on retrouve la barre d'actions en haut de l écran : / Barre d outils Vous trouvez les différentes actions possibles, telles que créer un nouveau template, éditer, importer/exporter un gabarit ou supprimer un template Exporter un gabarit : Qu'est-ce qu'un gabarit? c'est une copie de la structure complète du template créé dans Template Creator CK. Exportez un gabarit au format TCK3Z pour le sauvegarder ou le partager Importer un gabarit : Importez le fichier TCK3Z pour récupérer la structure complete du template avec les modules et les styles, ainsi que les images et les css. 2/ Menu de gauche Vous pouvez naviguer entre les fenêtres : Liste des templates : La liste de tous vos templates Polices : vous pouvez ajouter des polices Fontsquirrel ou Googlefont pour les sélectionner directement dans votre template A propos : retrouvez la version du logiciel et les dernières notes de version Aide : vous y trouverez des petites vidéos très utiles 3/ Liste des templates Vous retrouvez la liste de vos templates, cliquez sur un nom pour l éditer. 6

7 III. Créer un nouveau template Cliquer sur Nouveau dans l administration du site 1 Donner un nom au template (requis) et remplissez les informations que vous voulez stocker dans le fichier XML. Puis Enregistrer 3 2 Le nom du template doit être simple, sans majuscules, ni espaces ou caractères spéciaux : toto >> OK Toto >> MAUVAIS to to >> MAUVAIS toto-est-gentil >> OK Enregistrez et fermez, vous verrez votre template dans la liste. Cliquez sur son nom pour entrer dans la zone d édition. Vous arrivez sur la page de sélection du layout pour partir sur une structure qui s approche le plus de ce que vous voulez faire : 7

8 Cliquez sur un des 14 modèles et votre template est prêt à être modifié. Ces modèles sont prédéfinis pour vous faciliter le travail et accroître votre production (gain de temps). Vous pouvez à tout moment ajouter, supprimer ou déplacer des blocs de modules à l intérieur de n importe quel layout après l avoir sélectionné. 8

9 Maintenant vous avez une base de travail où vous pouvez ajouter, déplacer ou supprimer des blocs, ou les styler. 9

10 IV. Ajouter un bloc Vous pouvez ajouter un bloc dans n'importe quel modèle de layout. Voici les différents blocs : Conteneur C est un bloc qui permet de faire des séparations dans votre page comme pour avoir un template à fonds multiples Module simple Ce bloc contient un module Modules alignés Ce bloc contient 2 à 5 modules. Vous pouvez choisir le nombre de modules et leur taille en cliquant sur l icone de layout dans la barre de contrôle qui apparait au Menu horizontal Bloc spécifique où vous pouvez publier un module de menu. Les CSS générés vont automatiquement transformer le menu en menu déroulant que vous pouvez styler dans l interface de template Logo et module Ce bloc contient un logo que vous pouvez définir dans les options du template une fois que vous l avez installé dans le site. Il contient également un module et un menu que vous pouvez gérer en cliquant sur l icône de layout dans la barre de contrôle au Bloc personnalisé C est un bloc spécifique qui ne contient rien, vous pouvez écrire n importe quel code HTML ou PHP à l intérieur et le glisser dans votre template. Seulement pour les concepteurs de template expérimentés! 10

11 Prenez le bloc que vous voulez et glisser le dans votre template là où vous voulez. Vous pouvez ensuite le re-déplacer où vous voulez en maintenant la souris sur l icône déplacement qui apparait au survol. Le nouveau bloc aura automatiquement un nouveau nom et une position de module que vous pouvez changer en cliquant sur le texte. Déplacement CSS / Styles Suggestions Layout Barre de contrôle Barre de contrôle Position de module Nom HTML Nom HTML C est l identifiant HTML qui sera utilisé dans le code du template. Si vous ne savez pas ce que c est, laissez la valeur par défaut ATTENTION : ne pas mettre d accent ou caractère spécial ni espace dans le nom, n utilisez que des mots simples Position de module C est le nom que vous retrouvez dans le gestionnaire de module de Joomla! Pour placer vos modules dans la. Exemple d une fenêtre d édition d un module dans la position "position-7" : 11

12 12

13 V. Ajouter des styles Sur chaque bloc on peut ajouter des styles CSS pour définir les couleurs, le texte, les bordures, etc... Cliquez que le bouton CSS dans la barre de contrôle : CSS / Styles icon La nouvelle fenêtre apparaît, 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 champ vous pouvez donner des valeurs en "px" qui est l'unité par défaut. Mais vous pouvez également définir votre propre unité en l'inscrivant dans le champ. 50 égal à 50px 50px unité en px (idem que si vous ne mettez pas l'unité) 50em unité forcée en em 50% unité forcée en % Les styles sont directement appliqués dans l'interface de Template Creator avec un rendu réel. Cependant l'interface nécessite d'avoir certaines marges et bordures sur les blocs, donc pour avoir un rendu réel du template il est nécessaire de cliquer sur le bouton Prévisualiser dans le menu du haut. 13

14 VI. Gérer la largeur des modules alignés Si vous utilisez une rangée de modules alignés vous pouvez choisir la largeur pour chacun des modules. Survolez le bloc et cliquez sur l icône de layout dans la barre de contrôle : Une fenêtre popup s ouvre dans laquelle vous pouvez gérer les modules. Vous pouvez donner la largeur de chaque module en %. Vous pouvez définir les largeurs pour chaque scenario. Par exemple vous avez une rangée de 5 modules mais sur une page de votre site vous n en utilisez que 3. Dans ce cas vous pouvez définir leur largeur spécifiquement. Cliquez sur un cadenas pour verrouiller la largeur, ainsi vous pouvez donner une largeur différente à chaque bloc. 14

15 VII.Gestion des colonnes Dans Template Creator il y a un bloc que vous ne pouvez pas supprimer, c est le maincontent. Ce bloc est utilisé pour afficher le contenu principal de votre site à travers les composants (article, contact, ou autres). Mais vous pouvez tout de même gérer les colonnes et blocs à afficher à l intérieur. Cliquez sur l icône de layout pour afficher le popup et choisir si vous voulez des colonnes, et des modules audessus et en dessous : Cliquez sur chaque bloc dans le popup pour les activer ou désactiver. Tous les blocs actifs : 15

16 Aucun bloc ni colonne actif : 16

17 Vous pouvez utiliser les champs du dessous pour définir les largeurs des colonnes. 17

18 VIII. Ajouter des CSS personnalisés A. Dans l interface Ici c'est une zone d'écriture libre de styles css qui seront ajoutés à l'élément. Tous les styles écris ici seront ajoutés sur le bloc, module, titre ou élément de menu que vous éditez. Exemple pour un bloc ayant pour ID "left", le code est ajouté entre les accolades : #left {...code standard from template creator... text-shadow : #000 2px 0 5px ; } De la même manière vous pouvez définir plusieurs éléments en utilisant les accolades. C est une technique avancée qui vous permet d ajouter vos CSS sans limite. Par exemple pour n appliquer l ombre du texte (text-shadow) qu aux liens contenus dans le bloc "left" : Exemple avec le bloc "left" : #left { 18

19 ...code standard from template creator... } #left a { text-shadow: #000 2px 0 5px; } On voit que le code est inséré à l intérieur de #left { }, donc pour définir un nouvel identifiant CSS (#left a) il faut d abord fermer l accolade de #left et ensuite ajouter le code. Veillez à ne pas mettre d accolade à la fin car elle est automatiquement ajoutée par Template Creator. Pour éviter les soucis il est préférable d utiliser les css personnalisés dans "Paramètres" (voir ci-après) NE JAMAIS AJOUTER DE CSS DE POSITIONNEMENT ICI comme un float, ou un position, car ceci aura pour effet de mettre à mal votre interface. Utilisez l onglet css personnalisés dans Paramètres pour cela. B. Dans une feuille de styles personnalisée 1. En éditant le fichier (en FTP) Vous pouvez créer une feuille de styles spécifiques appelée "custom.css" et l'inclure dans votre template. Vous pouvez mettre dedans tous les styles CSS que vous voulez et ils seront intégrés dans le template. Vous devez créer un fichier ici [joomla]/components/com_templateck/projects/[yourtemplate]/css/custom.css Une fois le fichier créé, cliquez sur un des boutons Prévisualiser, Package, ou Copier 19

20 2. Dans l interface Cette méthode fait la même chose qu avant en écrivant dans le fichier [joomla]/components/com_templateck/projects/[yourtemplate]/css/custom.css Mais au lieu d avoir à éditer manuellement votre fichier vous pouvez simplement écrire vos CSS dans l interface. Allez dans Paramètres >> CSS Personnalisés et Template Creator écrira le fichier pour vous. 20

21 C. Mode expert Vous pouvez activer le mode expert avec l'icône en haut de la page Voici un petit aperçu pour vous montrer concrètement dans une colonne de gauche à quoi correspondent les éléments : BLOCK MODULE MODULE TITLE MODULE MODULE TITLE MODULE MODULE TITLE BLOC : c'est la colonne complète MODULE : c'est chaque module publié dans la colonne TITRE DE MODULE : le titre de chaque module publié 21

22 1. Modules et Menu Par défaut 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 apparaître deux nouveaux onglets : Modules et Menu Modules : vous permet de styles les modules pour leur appliquer une couleur par exemple sans devoir l'appliquer à la colonne entière 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. 22

23 2. 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 problèmes de rendu. Dans la plupart des cas on peut gérer les dimensions du blocs grâces aux marges externes et internes. 3. 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 définir le fond sur toute la largeur de la page derrière le conteneur. Ceci est très utile lorsque vous voulez créer des designs multibackgrounds. 23

24 IX. Compatibilité Internet Explorer Comment faire pour que Internet Explorer utilise les styles définis 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 vérifies si des styles CSS3 sont présents 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 : X. Tutoriels Vidéos Vous pouvez retrouver toutes ces vidéos dans l'administration de Template Creator CK dans l'onglet "Aide". Démo, créez votre template en 8 minutes Ajouter sa police de caractères Ajouter une feuille de styles CSS personnalisée Paramétrer le logo Gérer les problèmes de fusion de marges Créer un menu déroulant 24

25 XI. 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 fenêtre 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 défaut On peut alors modifier les styles des éléments 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 éléments 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 élément parent dans le menu horizontal on affiche le premier sous-menu). Sous menu 2 : sous menu à partir du niveau 3 et plus Pour chaque élément vous pouvez définir les styles que vous voulez. Si vous utilisez un bloc de menu horizontal les css seront automatiquement générés pour vous offrir un menu déroulant CSS. En plus les css seront aussi compatibles avec le module Maximenu pour créer votre propre megamenu (multi colonnes, descriptions, chargement de modules...). 25

26 XII. Positions de modules invalides Ceci n est pas une erreur, mais un message d avertissement 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 prévenir si vous avez défini 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 prévisualisation! Vous pouvez cliquer sur ce bouton pour afficher la fenêtre de gestion des positions : Vous pouvez voir les positions concernées. 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 données 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 crééz dans le template vous ne verrez rien lors de la prévisualisation. 26

27 XIII. Importer / exporter un gabarit La première question qu'on se pose, c'est quoi un gabarit? On a déjà 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 défini par joomla qui consiste en un ensemble de dossiers et fichiers installables sur un site Joomla (c'est l'archive que vous pouvez créer à la dernière é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 création. Vous pouvez donc stocker vos gabarits pour les sauvegarder ou les partager avec d'autres utilisateurs de Template Creator. 27

28 A. Exporter un gabarit Lorsque l'on arrive sur la page principale du composant qui liste tous les templates on retrouve plusieurs icônes 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 créations, ou alors pour simplement le stocker. 2 1 Pour exporter un gabarit il faut d'abord le sélectionner dans la liste des templates, puis cliquer sur l'icône ci-dessus. On arrive alors directement sur la page qui nous permet de le télécharger. Vous pouvez ainsi enregistrer le fichier.tck3z où vous voulez. 28

29 B. Importer un gabarit L'importation permet de réinstaller un template créé avec Template Creator que vous avez précédemment exporté. Cliquez sur l'icône Importer un gabarit Vous arrivez sur la page qui vous demande d'aller chercher le fichier.tck3z qui contient le gabarit. v Sélectonnez 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 29

30 XIV. Polices Template Creator vous permet également d installer vos propres polices à partir de Fontsquirrel ou Googlefont. A B A. Installer une police Fontsquirrel Sélectionner le fichier ZIP du kit de police et cliquez sur installer. Le fichier que vous installez doit être un KIT Fontsquirrel que vous générez gratuitement en ligne. Visionnez la vidéo d aide pour plus : B. Installer une police Googlefont Pour installer une police google, il suffit de renseigner l url de la police qui est données sur le site de, par exemple : Ensuite cliquez sur le bouton installer 30

31 XV. Responsive Design A. Options principales Template Creator vous permet de gérer le comportement de votre template pour les principales résolutions mobiles. Pour cela cliquez sur le bouton Responsive design dans le menu du haut. Cinq différents formats sont disponibles, pour les téléphones (portrait et paysage), pour les tablette (portrait et paysage), et pour les ordinateurs (toutes les résolutions supérieures). Cette section vous affiche la liste de vos blocs. Par exemple. Cliquez sur chaque bloc pour changer le comportement et choisir parmi les possibilités. Tout dépend du type de bloc, mais vous pouvez choisir entre cacher le bloc, aligner les éléments verticalement, avoir un menu avec l icône hamburger 31

32 B. Classes CSS spécifiques En plus d utiliser l interface précédente pour définir le comportement de vos blocs vous pouvez aussi choisir de cacher un élément (module) particulier pour chaque résolution grâce aux CSS intégrés dans Template Creator CK 32

33 Voici la liste des classes CSS incluses dans Template Creator CK Mobile Portrait : hidemobile1 Mobile Paysage : hidemobile2 Tablette Portrait : hidemobile3 Tablette Paysage: hidemobile4 Ordinateur : hidemobile5 Comment ajouter la classe sur un module? Editez le module, dans les options avancées >> Suffixe de classe CSS : 33

34 XVI. Créer un module pleine page Template Creator CK vous permet d ajouter plusieurs conteneurs dans votre template. Pour chaque conteneur vous pouvez décider s il prend la largeur du template (définie dans les paramètres) ou s il prend toute la largeur de la page. Par exemple, ajoutez un nouveau conteneur avec un module simple dans votre template. Nouveau conteneur Conteneur principal Pour définir la couleur de fond de page du conteneur il faut d abord active le mode Expert. Ensuite allez dans les CSS du conteneur >> Fond de page 1 34

35 2 3 Vous pouvez encore faire plus, et dire au conteneur de prendre toute la largeur et ainsi le module également (pratique pour les slideshows). 35

36 Comme vous pouvez le voir, il n y a plus d espaces sur les côtés : Pour cela, éditez les CSS du conteneur dans l onglet Dimensions >> Conteneur pleine page = Oui 36