Atelier template creator Joomladay France 2014

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