Index de l'article
Création template joomla 1.0
Le Contenu du dossier template
Le fichier index.html
Le fichier template_thumbnail.png
Le fichier templateDetails.xml
Le squelette du fichier index.php
Le corps du fichier index.php
Le fichier template_css.css
Publication des positions de modules
Les styles de publication des positions
Choix des dimensions du site
Image du banner
Polices et couleurs de fond
Marges et taille de police des blocs
Outils pour repérer les styles css joomla
Bordure et titres des modules
Liens hypertextes de la page
Liens du menu principal
.contentpane, .button, .inputbox, label
Eléments de tableau thead et td
table.contentpanopen et table.moduletable
div.componentheading et td.sectiontableheader

Création template joomla 3.0
Création template joomla 2.5 et joomla 1.7
Création template joomla 1.5
Template joomla professionnel

Création template joomla 1.0

Votre site web devra être bien identifié dans la toile internet avec une charte graphique caractéristique reflétant l'activité de l'entité bénéficiaire (entreprise, administration, université, association, ...), les thèmes abordés et domaines d'intérêt .. etc.

Cette charte graphique est traduite en modèle communément connu sous le nom de template joomla.

Pour préparer votre propre modèle et concevoir le design de votre site web, vous devez maîtriser la structure d'un template pour pouvoir l'analyser dans ses détails et le modifier à votre convenance. C'est le but de ce tutoriel et des tutoriels qui vont le compléter.

Joomla 1.0 n'étant pas compatible avec les versions joomla 1.5 et supérieure (cf version joomla), ce tutoriel reste valable pour joomla 1.0 uniquement.

Pour des raisons pédagogiques, on va commencer par les notions fondamentales et les éléments de base. Au préalable, installez joomla 1.0 sur votre ordinateur local. Nous passerons, après, à travers ce tutoriel à la création d'un template simple tout en expliquant sa structure et les éléments le constituant.

Rappelons qu'un minimum de connaissances sur l'html et le langage css est requis. La lecture des articles correspondants s'avère nécessaire pour les débutants qui vont s'apercevoir que l'apprentissage des éléments de base de ces deux langages est à la fois facile et bénéfique pour une meilleure maîtrise du code.

Si vous êtes bien initiés, le tutoriel sur le positionnement css des blocs div vous sera d'un apport considérable. En effet, ce dernier propose des solutions à des problèmes fréquents sur la mise en oeuvre de certaines propriétés css. La résolution de ces problèmes vous sera utile lors de la construction de votre template professionnel.

Pour commencer, on admet que "c:\xampplite\htdocs\" est la racine de votre serveur web (cf installation xampp). Le dossier de votre site portant le nom "MonSitePerso" est, par conséquent, "c:\xampplite\htdocs\MonSitePerso\" à l'issue de l'installation de joomla sur votre ordinateur local.

Après l’installation de votre site "MonSitePerso", vous avez bien remarqué que son url "http://localhost/MonSitePerso" donne un affichage par défaut basé sur le template "rhuk_solarflare_ii" fourni en standard avec joomla.

TemplatePerso1.jpg

Le template est l'élement qui gère toute la partie design de votre site. Concrétement, il s'agit d’un répertoire portant le nom de votre template et situé dans le dossier "c:\xampplite\htdocs\MonSitePerso\templates\" de votre site "MonSitePerso".

Par défaut, l’installation de joomla 1.0.15 fournit deux templates: "rhuk_solarflare_ii" et "madeyourweb". Vous pouvez rajouter vos propres modèles. Ainsi, pour le même site, différents templates seront disponibles et chacun fournit une apparence et un design particulier.

Dans les pages suivantes, vous allez créer votre propre template nommé "TemplatePerso". Alors, le dossier de votre nouveau template sera le suivant:

  • "c:\xampplite\htdocs\MonSitePerso\templates\TemplatePerso".



 

Copyright © 2009-2014 apprendre-joomla.com - Tous Droits Réservés -