Templates Joomla!

Téléchargez gratuitement le tutoriel de création d'un template Joomla! 3. L'ouvrage de près de 90 pages vous guidera pas à pas dans la création du template Joomla! 3. De la maquette graphique à l'utilisation des styles CSS3, apprenez comment créer votre propre template.

livre_creation_template_joomla_1.6

Voici le livre électronique (eBook) pour la création de template Joomla 1.6 (compatible Joomla 1.7 et 2.5) qui vous guidera à travers près de 200 pages pour vous aider à construire votre propre template Joomla. Vous aborderez les problématiques HTML et CSS et entrerez dans les entrailles d'un template en abordant les thèmes comme la traductions de fichiers de langues et la gestion de paramètres d'administration.

Le livre est structuré en deux parties, la première est une documentation technique qui se veut être une véritable ressource documentaire pour vous aider à trouver l'information dont vous avez besoin lors de la conception de votre template. La deuxième partie de l'ouvrage est consacrée à un tutoriel complet pour créer un template nommé "basket_ck" qui est totalement compatible Joomla 1.6 ,1.7 et 2.5.

tutoriel template joomla mobile

 

Envie de proposer une version mobile de votre site Joomla! ?

 

Ne cherchez plus voici un tutoriel qui vous guidera pas à pas dans l'élaboration d'un design compatible avec la plupart des périphériques mobiles (iPhone, iPad, tablettes, Android, etc ...). Avec un exemple concret partant d'un template fourni dans le package, vous allez voir comment créer votre propre template Joomla! Responsive Design !

 

 

 

 

 

 

 

 

Après une brève présentation des techniques possibles, vous allez plonger dans le code d'un template Joomla! et y ajouter vos propres styles pour adapter le design aux différents périphériques. Chaque étape vous est expliquée, et le code CSS vous est fourni pour comprendre comment ça marche et vous allez voir quels sont les soucis qu'on peut rencontrer et comment y remédier.

Le package comprend :

  • Un tutoriel PDF d'environ 50 pages avec exemples et illustrations
  • Un template Joomla! 2.5 Responsive Design : celui utilisé pour le tuto et qui contient déjà tous les codes décrits dans le tutoriel
  • Un gabarit Template Creator pour pouvoir modifier le template dans le composant Template Creator CK que j'ai utilisé pour créer le template

Et bien sur le tout est gratuit !

Télécharger le Tutoriel adapter son template Joomla! pour mobiles

Télécharger le tutoriel vidéo sur Tuto.com

Sommaire du tutoriel :

I.Introduction 6
II.Du blabla pour la théorie 7
1.Les techniques 8
1.1)User agent - PHP 8
1.2)Javascript 8
1.3)Mediaqueries 8
2.Les périphériques 9
3.Comment ça marche ? 10
3.1)Fixer le redimensionnement de l'affichage sur les smartphones 10
3.2)Ajouter des conditions de taille d'écran 10
III.Cas pratique - tutoriel 11
1.Création de la base du template 12
2.Définir le design en fonction des résolutions 15
2.1)Design avec largeur de 758px 17
2.2)Design avec largeur de 524px 17
2.3)Design avec largeur de 292px 18
3.Modification du fichier index.php 19
4.Création de la feuille de styles CSS 20
4.1)Tablette en mode portrait : 758px 20
4.2)Mobile en mode paysage : 524px 24
4.3)Mobile en mode portrait : 292px 30
5.Bonus – Réglage de sous-menus dans Maximenu CK 39
6.Bonus 2 – Détection User-agent pour le Slideshow 46
7.Extensions utilisées 48
7.1)Template Creator CK 48
7.2)Maximenu CK 48
7.3)Slideshow CK 48
8.Ressources 49


apercu_structure

Le tutoriel est entièrement fait maison avec quelques participations annexes, il va vous permettre d'aborder la construction de votre propre template pour Joomla! 1.5.

Plus besoin de naviguer entre 10 sites différents pour trouver l'information qu'on cherche, dans ce tuto vous pouvez suivre pas à pas la démarche qui m'a conduit à créer un template personnalisé avec des explications détaillées pour certains points importants.

En plus du tutoriel, un document d'annexes est disponible dans lequel j'ai regroupé toutes les informations trouvées à travers mes recherches et qui feront une bonne base de documentation à avoir sous la main !

 

Téléchargez le tutoriel création de template Joomla! 1.5

 

Une nouvelle documentation est disponible. Une documentation technique avec un tutoriel totalement remanié et amélioré. Toutes les informations sont sur la page dédiée à l'eBook sur la création de templates Joomla! 1.5.

 

tutoriel, documentation, template, joomla

Vous pouvez télécharger le Tutoriel sur la création de templates pour Joomla! 1.6 / 2.5. C'est un document qui vous guidera pas à pas dans la démarche pour arriver à créer le template '1870' dont vous trouverez l'aperçu plus bas.

couvertures_ebook_template

Voilà la documentation sur les templates est disponible ! Vous pouvez désormais utiliser mon eBook sur la création de templates Joomla! 1.5 pour créer votre propre architecture HTML et CSS et l'intégrer à votre site Joomla!. Toutes les informations, les points techniques et lignes de code nécessaires à la création d'un template sont répertoriés avec des explications et des exemples pour vous permettre de comprendre comment ça fonctionne à travers plus de 160 pages.

Si la documentation pure est encore trop floue pour vous, vous trouverez dans la troisième section du eBook un tutoriel complet pour créer de A à Z le template "basket_ck" (le template est inclus dans le package). Ce tutoriel vous apprendra à créer le template en partant de zéro, étape par étape en vous donnant le code HTML et CSS, même javascript si nécessaire, pour réaliser chaque morceau.

Télécharger le eBook (français)  : 10 euros (template inclus)

Télécharger le eBook (anglais)  : 10 euros (template inclus)

 

Voici ce que pensent les personnes qui ont téléchargé l'eBook :

JAKOLS :

"Alors moi je dis : BRAVO CED !
Nan vraiment... excellent.
160 pages de pur bonheur..."

THIERRYHL :

"bon, j'ai quaisiment tout lu, et je ne regrette pas du tout l'achat.
merci CED"

BOREMY03 :

"Bonjour et bravo à Ced,
il est super ce tuto !!
J'y ai appris énormément de choses, qui plus est il est accessible pour le débutant que je suis , les exemples sont clairs et bien décortiqués et même l'humour y a sa place !
Ce tuto mérite nombre d'étoiles et une place de choix"

 

Vous pouvez suivre le fil de discussion sur le forum Joomla.fr

Voici un aperçu de quelques pages de la documentation et du tutoriel sur les templates :

Extrait 1 : Structure du template

Extrait 2 : Les appels JDOC

Extrait 3 : Les CSS conditionnels pour Internet Explorer

Extrait 4 : Cahier des charges du template

Extrait 5 : Le fichier templateDetails.xml

et pour finir voici la table des matières complète de l'ouvrage :

 

I.INITIATION HTML ET CSS

1.C'est quoi un template ?

2.Les bases HTML et CSS

2.1)HTML ou XHTML

2.2)Structure d'une page HTML

2.3)Balises HTML

2.4)Utiliser les CSS

2.5)Forcer le comportement en CSS

2.6)Validation du code

II.DOCUMENTATION TECHNIQUE

1.Structure d'un template

1.1)index.php

a)Tout en haut de la page

b)Partie HEAD

c)Partie body

d)Code complet

1.2)index.html

1.3)templateDetails.xml

a)Champs d'information

b)Fichiers à installer

c)Langues

d)Positions

e)Paramètres

calendar

category

editors

filelist

folderlist

helpsites

hidden

imagelist

languages

list

menu

menuitem

password

radio

section

spacer

sql

text

textarea

timezones

usergroup

1.4)params.ini

1.5)template_Thumbnail.png

1.6)favicon.ico

2.Les différents appels JDOC

2.1)Head

2.2)Component

2.3)Message

2.4)Module

a)Chargement d'un module

b)Chargement de plusieurs modules

c)Personnalisation des modules

3.Template override

3.1)Override de composant

3.2)Override de modules

3.3)Module chrome

3.4)Override de plugins

4.Les paramètres

5.Les CSS de Joomla!

5.1)Module Menu

a)Affichage style liste

b)Affichage style liste simple

c)Affichage style horizontal

d)Affichage style vertical

5.2)Module Dernières infos

5.3)Module Articles populaires

5.4)Module Identification

5.5)Module Qui est en ligne

5.6)Publicité

5.7)Bannière

5.8)Sondage

5.9)Vote

5.10)Navigation

5.11)Article

5.12)Article au format blog

5.13)Page contact

5.14)Page catégorie de contact

5.15)Page enregistrement d'un contact

5.16)Autres sources

6.Compatibilité Internet Explorer

6.1)Créer une architecture compatible

6.2)CSS conditionnels pour IE

6.3)!important : une propriété CSS un peu particulière

6.4)La transparence sous IE6

6.5)pseudo-classe :hover avec IE

7.Conditions d'affichage et countmodules

7.1)countmodules

7.2)mode éditeur

7.3)Combinaison finale

8.Module à coins arrondis

8.1)Méthode 1 : taille unique

8.2)Méthode 2 : modulable

8.3)Méthode 3 : multi-tailles

9.Suffixes de classes CSS

9.1)Suffixe de module

9.2)Suffixe de page

9.3)Mode avancé

10.Les langues

10.1)Insérer des termes traduisibles

10.2)Langage LTR ou RTL

11.Inclusion de mootools

12.Convertir un template 1.0 en 1.5

12.1)templateDetails.xml

12.2)index.php

13.Outils pour le développement

13.1)Webdeveloper

13.2)Firebug

13.3)Colorzilla

13.4)JSview

13.5)Wampserver

13.6)IEtester

13.7)Notepad++

III.TUTORIEL DU TEMPLATE "BASKET_CK"

1.Cahier des charges

2.Pour commencer

2.1)L'éditeur

2.2)Le serveur local

2.3)Firefox et ses extensions

2.4)IEtester

2.5)Les logiciels graphiques

2.6)Les bases du langage

2.7)Installation de joomla!

3.Commençons...

4.Mise en place

5.index.html

6.params.ini

7.index.php

7.1)Bannière, logo et recherche

7.2)Menu top

7.3)3 modules à largeur variable

7.4)Colonnes principales : gauche, centre et droite

7.5)Bas de page

8.templateDetails.xml

9.Mise en place des CSS

9.1)Paramètres généraux

9.2)Conteneurs principaux

9.3)Colonnes centrales : gauche, centre et droite

a)Module de menu

b)Titre bicouleur des modules

c)module à coins arrondis

9.4)Modules de news "userstop"

9.5)Topmenu déroulant

a)Dérouler en CSS

b)Rendre compatible Internet Explorer

c)Code final

9.6)Module d'identification

9.7)Corps de la page

a)Articles

b)Liste des articles ou catégories

c)Formulaire de contact

9.8)Bas de page

9.9)Module de recherche

9.10)Module de sondage

10.Transparence PNG avec IE6

11.Finition : Mise en paquet installable

12.Bonus – Ajout d'une position

IV.ANNEXES

1.Template override, contenu du fichier pagination.php

2.Positions usuelles

3.CSS joomla!

 

Outil de création rapide, puissant et responsive.

En savoir plus