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

Modifier template joomla

Personnaliser template joomla 3.0
Personnaliser template joomla 2.5
Personnaliser template joomla 1.5

Pour l'instant, vous allez modifier votre template TemplatePerso. Pour le contenu des articles, on va conserver le jeu d'exemples fourni en standard avec l'installation de joomla 1.0.

Ajustez la résolution de votre écran à 1024*768 pixels afin que nous puissions nous entendre par la suite. Nous allons interpréter ensemble les résultats affichés dans votre navigateur et nous devons parler de la même chose. Bien entendu, cette résolution n'est pas obligatoire mais une largeur de 1024 pixels est vivement recommandée pour que vous puissiez comparer facilement vos résultats aux captures d'écran fournies.

Choix des dimensions du site

Vous allez réaliser, dans un premier temps, un template d'une largeur fixe de 800 pixels. Une fois ce template terminé, nous consacrerons un prochain tutoriel à la modification des dimensions du template pour l'adapter à n'importe quelle résolution d'écran. En effet, des dimensions fixes obligent les internautes ayant des résolutions différentes, à utiliser l'ascenseur horizontal lorsque le template a une largeur supérieure à celle de la résolution d'écran. La solution idéale étant de faire un template avec des dimensions en pourcentage (%) pour tirer profit de la largeur maximale de l'écran quelle que soit la résolution, sans, pour autant, déborder, au delà, de l'écran.

Jusqu'à présent, le contenu de votre fichier template_css.css est le suivant:

 
div {
  padding:0;
  margin:0;
}
 
#conteneur {
  width:800px;
  margin: 0 auto;

}
 
#haut {
  width:800px;
  background-color: orange;
}
 
#gauche {
  width:200px;
  float:left;
  background-color: olive;
}
 
#centre {
  width:400px;
  float:left;
  background-color: silver;

}
 
#droit {
  width:200px;
  float:left;
  background-color: aqua;
}
 
#bas {
  clear:left;
  width:800px;
  background-color: gray;
}
 

Rappelez vous bien! Votre site a le design suivant :

TemplatePerso11.jpg




 

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