Modifier template joomla

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.

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 :