logo maximenuck 64Maximenu CK

Maximenu CK permet de créer un megamenu déroulant mootools.

logo slideshowck joomlaSlideshow CK

Slideshow CK, de superbes effets avec ce slideshow responsive design.

logo accordeonmenuck joomlaAccordeon Menu CK

Accordeon menu CK est un menu accordeon avec des effets mootools.

logo template creator joomlaTemplate Creator CK

Template Creator CK vous permet de créer vos propres templates Joomla!.

Tutoriel adapter son template Joomla pour mobiles

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

Mentions légales

Site réalisé par Cédric KEIFLIN - Copyright © 2010 - 2013

Mentions légales - Licence GNU/GPL - Conditions générales de vente

http://www.joomlack.fr n'est ni affilié à Open Source Matters ou au projet Joomla ni approuvé par eux.
Le nom Joomla!® est utilisé sous license limitée de Open Source Matters, le propriétaire mondial de la marque de commerce.