Formation Joomla 3 Réalisez votre Template Flash-comet.com Cours version 2015 1
Sommaire Contenu du cours... 3 Création d'un template avec "Template Créator CK"... 3 Principe de fonctionnement... 3 Ce que nous allons réaliser ensemble... 4 Installer une police Google font... 4 Création de votre template... 5 Gestion des couleurs de votre template... 7 Gestion de la police des liens de menus... 8 Gérer la taille de votre template... 9 Gérer la taille des blocs... 9 Pour connaitre le nom des position de votre template... 10 Export de vous template pour l'installation dans Joomla... 11 Ajouter des blocs dans votre template... 12 Suppression du bloc de gauche... 13 Ajouter un bloc... 14 Exporter un gabarie... 15 Création d'un template avec Artisteer... 16 Gérer le fond du template... 17 Gérer la feuille de votre template... 18 Gérer la mise en forme... 18 Gérer l'entête du template... 18 Gestion du pied de page... 19 Remerciement & sources... 21 Flash-comet.com Cours version 2015 2
Contenu du cours Dans ce support, vous allez voir comment réaliser votre template. Pour cela deux méthodes : Avec le composant 'Template Créator CK' et enfin avec le logiciel 'Artisteer'. Dans les deux cas nous allons aussi comment faire des modifications directement depuis le fichier CSS et PHP. Création d'un template avec "Template Créator CK" Template Créator CK est une extension disponible à l'adresse : http://www.template-creator.com/fr/ Cette extension n'est pas gratuite, elle coute 28 euros, mais croyez moi, elle le vaut bien. Apres avoir acquitté le montant vous pourrez télécharger 3 fichiers: Un support en Français Le fichier langue Le composant L'installation se fait comme d'habitude; Gestion des extensions / Archive à envoyer... Principe de fonctionnement Quand votre extension est installée sur votre site, elle est disponible depuis le lien "Composants/Template Creator CK". Vous réalisez votre template grâce aux outils disponibles dans le composant. Vous exportez votre template sur votre ordinateur. Enfin il vous reste à procéder à l'installation. Si vous n'avez pas oublié de sauvegarder votre travail, vous pouvez le modifier à volonté et recommencer l'opération. Flash-comet.com Cours version 2015 3
Ce que nous allons réaliser ensemble Nous allons réaliser deux "Templates" dans notre cours, un pour la page d'accueil, un autre pour le reste du site Nous allons commencer simple avec ce model de template Ce template est constitué de deux partie principales: A gauche un menu A droite la partie content (le contenu des articles par exemple) Commençons : ouvrez votre composant "Template Creator CK" Installer une police Google font A gauche vous avez un lien "Polices" cliquez dessus, nous allons installer une police 'Google font" pour le menu de gauche. Cliquez sur le lien suivant: Dans un autre onglet de votre navigateur saisissez l'adresse : https://www.google.com/fonts Sélectionnez la police qui vous intéresse, puis copiez son adresse. Flash-comet.com Cours version 2015 4
Copiez l'url et copiez la dans le formulaire de votre site puis cliquez sur "Installer une police" Voila le résultat: Création de votre template Cliquez sur le lien "Liste des templates" puis "Nouveau" Remplissez soigneusement ces champs car ces informations vont apparaitre dans le fichier index.php de votre template et surtout interprété par Google. Validez vos informations. Flash-comet.com Cours version 2015 5
Le moment est venu de choisir la structure de votre template. Cliquez sur le que vous avez choisi pour votre template, choisissez votre modèle dans l'exemple de notre cours nous allons prendre le modèle 2. Je vous rassure tout de suite, nous pourrons ajouter des positions âpres cout. Quand vous avez choisie votre modèle, ce formulaire apparait. Flash-comet.com Cours version 2015 6
Gestion des couleurs de votre template Par défaut le template présenté est blanc, pour changer la couleur de fond de notre template cliquez sur "Paramètres" Cliquez sur "Fond de page" Saisissez votre code couleur et validez Pour changer la couleur de fond de notre feuille cliquez sur "CSS" Wrapper Dans cette écran vous pouvez saisir le code hexadécimal de votre couleur, éventuellement saisir une autre couleur pour réaliser un dégradé. ( attention maintenant la mode est au "Flat" ). Vous pouvez aussi ajouter une image de fond, gérer les marges, la répétition ainsi que l'opacité. Dans notre exemple de cours nous allons laisser la couleur blanche Validez votre formulaire. Flash-comet.com Cours version 2015 7
Nous allons dans la partie gauche de notre template mettre une couleur gris clair. Cliquez sur le bouton CSS suivant : procédez à saisir un code couleur. de la même manière Validez votre formulaire Gestion de la police des liens de menus Cliquez sur le bouton CSS suivant :, puis sélectionnez "Bloc" Cliquez sur "Texte" La vous devez saisir la taille et la police de votre template, vous pouvez constatez que nous avons récupéré notre police "Google font" Enfin si vous voulez affiner vous pouvez gérer Les couleurs l'espacement entre les lignes Les propriétés ( gras, italique, souligné...) Validez votre formulaire Flash-comet.com Cours version 2015 8
Gérer la taille de votre template Un template standard doit avoir une taille maximum de 1000px de largeur afin d'apparaitre correctement sur l'ensemble des écrans, toutefois sachez que par défaut il est responsive, il s'adaptera aux Smartphones. Cliquez sur le bouton "Paramètre" en haut de votre écran. Comme notre template est minimaliste, j'ai décidé de lui donné une largeur de 800px Gérer la taille des blocs Dans notre exemple de template, j'ai décidé que la largeur de la feuille est de 800px, je voudrais que le menu de gauche face 40% de la taille de ma feuille. Cliquez sur symbole de cette image La je saisie les proportions qui m'intéresse: Validez votre formulaire Flash-comet.com Cours version 2015 9
Notre première version de template est terminée. il pourrait être intéressant de connaitre le nom des positions disponible pour gérer les modules sous Joomla. Pour connaitre le nom des position de votre template Cliquez sur le bouton "Imprimer positions" Résultat à gauche la ou nous allons mettre le module menu principal est "position-7" Flash-comet.com Cours version 2015 10
Export de vous template pour l'installation dans Joomla Avant de procéder à l'export de votre template, vous pouvez le prévisualiser en cliquant sur le lien. Pour l'exporter, cliquez sur "Enregistrer votre template" puis sur le lien "Télécharger" Enfin cliquer sur le bouton : "Telecharger" pour récupérer votre template "flashcomet.zip" pour notre exemple. Il ne vous reste plus qua l'installer comme n'importe quel template. Voila le résultat Flash-comet.com Cours version 2015 11
Ajouter des blocs dans votre template Nous allons dupliquer votre template pour ne pas toucher à l'original, pour cela sélectionnez le votre en cliquant dans la boite à cocher, puis cliquez sur le bouton "Copier" Sélectionnez votre copie, nous allons lui donner un nouveau nom en cliquant sur le bouton "Information" Dans le champ: Nom du template donnez lui un autre nom, pensez à valider Dans la partie haute de votre écran vous pouvez disposer d'une liste de blocs que vous pouvez insérer dans votre template. Dans notre cas, nous allons ajouter un menu horizontal, sélectionnez le bloc "menu" avec la sourie et déplacez le à l'endroit que voulez dans votre template. Voila le résultat, pensez à enregistrer Flash-comet.com Cours version 2015 12
Suppression du bloc de gauche Déplacez votre sourie pour activer ce bouton: Puis cliquez sur ce bouton Dans le formulaire suivant, remplacez "60%" par 100% et validez Flash-comet.com Cours version 2015 13
Ajouter un bloc De la même manière que vous avez ajouter un bloc menu, ajoutez le boc "logo et module Si vous éditez ce bloc, vous pouvez gérer votre logo, la couleur... Bon vous l'avez compris vous pouvez ajouter les blocs suivants: C est un bloc qui permet de faire des séparations dans votre page comme pour avoir un template à fonds multiples Ce bloc contient un module 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 passage de la sourie Flash-comet.com Cours version 2015 14
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 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 passage de la sourie. 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! Exporter un gabarie Votre template est terminé, vous pouvez exporter le votre vers un autre site qui à l'extension installé en cliquant sur: Pour l'importer depuis un autre site cliquez sur Renommer une position de votre template Si vous avez plusieurs Templates dans votre site, il peut être intéressant de renommer une position pour éviter les conflits. Pour cela déplacez la sourie et cliquez sur le bouton suivant: il vous suffit de saisir le nom de votre choix Flash-comet.com Cours version 2015 15
Création d'un template avec Artisteer Artisteer est un logiciel payant il coute environ 140. Il permet de réaliser des templates pour Joomla et Wordpress. Il à une particularité intéressante; vous pouvez saisir votre contenu (texte de vos articles) directement dans Artisteer. au moment de l'installation dans Joomla vous pouvez si vous le désirez importer les données. Attention : si le nom des liens de menus ou des articles sont identiques vous verrez vos anciennes données écrasées par les nouvelles. Vous avez aussi une visionneuse qui vous permet de simuler la visualisation sur un smartphone ou un tablette. Pour le tester ou l'acheter allez à l'adresse: http://www.artisteer.com/ Flash-comet.com Cours version 2015 16
Une fois le logiciel installés sur votre poste, cliquez sur l'icone, vous avez ceci Sélectionnez le template blanc par défaut, nous allons commencer Gérer le fond du template Cliquez sur le bouton "arrière plan" Dans cette barre de menu vous pouvez gérer la couleur de fond de choisir un dégradé, voir mettre une image de fond. Il existe des effets disponibles à insérer, à vous de voir si vous voulez les mettre. Flash-comet.com Cours version 2015 17
Gérer la feuille de votre template Cliquez sur le bouton "Feuille" Dans cette barre de menu vous pourrez gérer: La largeur de votre feuille La marge entre le haut de l'écran et la feuille La couleur de fond de votre feuille, voir de mettre une texture Le remplissage ( la marge entre les éléments) La transparence ( dans les cas d'une image de fond par exemple) Arrondir la forme de votre feuille Saisir une ombre et pouvoir la paramétrer Saisir une bordure autour de la feuille Gérer la mise en forme Dans cette barre de menu vous pourrez gérer: La possibilité d'ajouter un menu et choisir son emplacement D'ajouter des colonnes sur les cotés pour y insérer menu et modules Personnaliser la taille des colonnes, la couleur de fond.. Gérer l'entête du template Dans cette barre de menu vous pourrez gérer: La taille de hauteur Insérer une image de fond Ajouter un logo Changer la couleur de fond Insérer des effet Flash-comet.com Cours version 2015 18
Gestion du pied de page Dans cette barre de menu vous pourrez gérer: La taille du pied de page La forme le contenu La couleur Les paramètres de polices Exportez votre template pour l'installer Exporter votre modèle dans un dossier sur votre ordinateur compressé au format zip pour l'installation. Flash-comet.com Cours version 2015 19
Position des modules du template Joomla Pour vous aider à positionner vos modules dans votre template, voici les positions générées. Flash-comet.com Cours version 2015 20
A PROPOS DE L'AUTEUR André Debaisieux a une expérience de 15 ans dans les métiers du web. Son aventure professionnelle: il est passé par un certain nombre de SSII. Il a assuré des missions d'intégrateur, programmeur, chef de projet, analyste, et maintenant son préféré: formateur indépendant. Indépendant depuis 2008, il dispense les formations qu'il met au point et assure des conférences sur les nouvelles technologies. Spécialisé dans le Web la E-communication, les nouvelles technologies et l'impression 3D. Expert CMS Joomla, il maitrise toutefois Spip, Worpress, Prestashop, Google, les réseaux sociaux et enfin le monde des Smartphones et ses applications. Il a reçu plusieurs prix: "une mention dans la catégorie Talent de l'innovation technique et technologique", un Net d'or en 2001 pour le site "patrouille de France" et un Net d'or en 2000 pour le site "Cyber bébé" Son site : http://www.flash-comet.com Sa page Facebook : https://www.facebook.com/flashcomet Remerciement & sources Merci à tout les stagiaires, élèves et centres de formations qui ont contribués à la réalisation de ce support. Sources: Wikipedia, le journal du net, flash-comet.com, joomla.fr André Debaisieux 2015 andre@debaisieux.com Flash-comet.com Cours version 2015 21