Atelier template creator Joomladay France 2014

  • View
    892

  • Download
    0

Embed Size (px)

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.

Text of Atelier template creator Joomladay France 2014

  • 1. 1 Crez votre template Joomla! avec Template Creator CK Paris 23 mai 20141 Crez votre template Joomla! avec Qui sommes-nous Crer son template ? Template Creator Cration dun template en 10 tapes Questions rponses
  • 2. 2 Crez votre template Joomla! avec Template Creator CK Paris 23 mai 2014 Qui suis-je ? Cline ROBERT (c-line) Webdesigner / formatrice / consultante / Co-fondatrice et grante de Joomla! depuis 2007 Agence de communication Cration de supports de communication Formations la communication Conseil en communication
  • 3. 3 Crez votre template Joomla! avec Template Creator CK Paris 23 mai 2014 Qui suis-je ? Cdric Keiflin (ced1870) Joomla! depuis 2008 Modrateur sur forum.joomla.fr Dveloppeur de Template Creator CK entre autres
  • 4. 4 Crez votre template Joomla! avec Template Creator CK Paris 23 mai 2014 Les 3 mthodes pour crer son template
  • 5. 5 Crez votre template Joomla! avec Template Creator CK Paris 23 mai 2014 tout fait main Dans les rgles de lart
  • 6. 6 Crez votre template Joomla! avec Template Creator CK Paris 23 mai 2014 pourquoi rinventer la roue ? La ruse
  • 7. 7 Crez votre template Joomla! avec Template Creator CK Paris 23 mai 2014 pas toujours la hauteur Avec un logiciel
  • 8. 8 Crez votre template Joomla! avec Template Creator CK Paris 23 mai 2014 Template creator
  • 9. 9 Crez votre template Joomla! avec Template Creator CK Paris 23 mai 2014 Evolution Template Creator Un composant = Cration en direct sur le site Couleurs Responsive Dgrads Typographie Ombres CSS3 Compatibilit Positions Structure
  • 10. 10 Crez votre template Joomla! avec Template Creator CK Paris 23 mai 2014 Quelques exemples avec Template Creator www.chocolaterie-larra.fr
  • 11. 11 Crez votre template Joomla! avec Template Creator CK Paris 23 mai 2014 Quelques exemples avec Template Creator www.alaneo-formation.com
  • 12. 12 Crez votre template Joomla! avec Template Creator CK Paris 23 mai 2014 Quelques exemples avec Template Creator www.hoyado.com
  • 13. 13 Crez votre template Joomla! avec Template Creator CK Paris 23 mai 2014 Quelques exemples avec Template Creator www.com3elles.com
  • 14. 14 Crez votre template Joomla! avec Template Creator CK Paris 23 mai 2014 Le programme de latelier 1. installer le composant, crer le projet 2. crer un jeu de polices personnalises 3. choisir une structure de site (colonnes) 4. crer des conteneurs 5. crer des zones de modules 6. ajouter son propre logo 7. personnaliser le template 8. personnaliser les styles 9. paramtrer le responsive design Astuces Questions / rponse
  • 15. 15 Crez votre template Joomla! avec Template Creator CK Paris 23 mai 2014 Dmarrons ! Rappel : utilisez un installation de Joomla avec exemples en franais
  • 16. 16 Crez votre template Joomla! avec Template Creator CK Paris 23 mai 2014 Dmarrons ! Rcuprez les fichiers sur La cl USB !
  • 17. +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 RSULTAT FINAL Logo Menu horizontal droulant Zone pour slideshow Modules aligns Zone de contenu 3 colonnes Modules aligns Zone de pied de page 2
  • 18. +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 INSTALLER UNE POLICE GOOGLE 3 1 http://www.google.com/fonts#UsePlace:use/Collection:Open+Sans 2 3
  • 19. +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 CRER UN NOUVEAU TEMPLATE Menu >> Composants >> Template Creator CK Dans ladmin de Joomla! Cliquez sur le bouton Nouveau Dans Template Creator Choisissez votre version de Joomla! Donnez un nom au template Dans la fentre ddition Le nom du template ne doit comporter ni espaces ni caractres spciaux. 4 1 2 3
  • 20. +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 modle N 13 qui correspond le mieux au design souhait A la cration du template Lorsque le logiciel vous le demande, validez le chargement du thme par dfaut Chargement du thme par dfaut 5 1 2
  • 21. +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 rgulirement !
  • 22. +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 Crez un nouveau conteneur pour accueillir le bloc logo+menu Conteneur principal Glissez le bloc logo+module dans le nouveau conteneur Bloc logo+module
  • 23. +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 Crez un nouveau conteneur pour accueillir le bloc slideshow Conteneur principal Crez un nouveau bloc de module simple dans le conteneur Bloc slideshow
  • 24. +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 dj Bloc menu horizontal Editez le layout du bloc logo+module Dsactivez le module et activez le menu Rglez 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
  • 25. +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 COULEURS DE FOND 10 1 6 2 7 8 3 4 5
  • 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 CONFIGURER LE TEMPLATE 11 Largeur maxi de 1000px Design fluide qui sadapte tous les crans Charger Bootstrap pour Joomla! 3 Paramtres du template Couleur principale de la page #ebebeb Fond de page Couleur du texte et liens #969696 Couleur des liens survols #00b7f0 Texte de 12px Police Segoe UI Interligne de 20px Texte 1 3 4 5 6 7 Onglet Page 2
  • 27. +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 CONFIGURER LE TEMPLATE 12 1 Titre H1 2 7 8 3 5 6 4
  • 28. +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 CONFIGURER LE TEMPLATE 13 1 Titre H2 2 4 6 7 3 5
  • 29. +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 CONFIG