Pour Commencer

Prérequis

Tutoriels de base

Tutoriels extensions

00047374

Ressources

Communiquer

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

Page 8 sur 22

Le fichier template_css.css

Pour le démarrage, créez le fichier template_css.css à l'aide de Notepad++, en insérant dedans le code suivant :

 
div {
  padding:0;
  margin:0;
}
 
#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;
}

Dans ce fichier, on a définit pour chaque bloc <div> via son identifiant «id», la largeur (width), la couleur d’arrière plan (background-color), et le positionnement dans le flux des blocs (float).

Par défaut un nouveau bloc <div> vient s'insérer en dessous du bloc précédent. En effet, pour un flux de blocs <div>1, <div>2 ... <div>n déclaré dans cet ordre dans votre fichier php, les <div> seront affichés, par défaut, l'un en dessous de l'autre: <div>1 situé au niveau le plus haut et <div>n au niveau le plus bas de la page. Pour modifier ce comportement, on utilise la propriété de style css " float" qui spécifie de quel côté du conteneur, le bloc <div> doit s’aligner. "float:left" pour un alignement à gauche et "float: right" pour un alignement à droite. La propriété "clear" permet d'annuler l'alignement de float.

Si vous n’êtes pas encore familiarisés avec toutes ces notions, reportez vous au tutoriel sur le langage css qui donne des conseils bien adaptés. La page sur le Positionnement css traite un cas pratique et vous apprend à annuler correctement pour une disposition de blocs plus complexe l'effet de la propriété "float" moyennant le bloc "<div class="clr"></div>" et la propriété "clear: both".

Une fois que vous avez sauvegardé votre fichier template_css.css nouvellement créé, rafraichissez l’écran de votre navigateur pour votre site "http://localhost/MonSitePerso/". Le résultat affiché montre dès le départ l’apport du fichier css :

Pour centrer l’ensemble de vos blocs, ajouter un bloc conteneur. Le corps de votre fichier index.php devient:

 
    <div id= "conteneur">
 
        <div id="haut">CONTENU BANNER</div>
        <div id="gauche">CONTENU GAUCHE</div>

        <div id="centre">CONTENU PRINCIPAL</div>
        <div id="droit">CONTENU DROIT</div>
        <div id="bas">CONTENU PIED DE PAGE</div>

 
    </div>

Rappelez vous bien que le corps est entre les balises <body> et </body>.

Modifier le fichier template comme suit:

 
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;
}

La même fenêtre Notepad++ va vous servir pour l’édition des deux fichiers index.php et template_css.css; un onglet par fichier. Vous sauvegardez l’ensemble après modifications et rafraichissez la page sur votre navigateur pour voir le résultat : page bien centrée, cette fois ci.

En fait, "margin: 0 auto" définit les marges du bloc "conteneur" : une valeur nulle pour le haut et le bas et auto (une même valeur calculée automatiquement) pour la droite et la gauche. Ce qui permet de centrer l'ensemble dans la page.

Dans la suite, vous allez afficher du contenu fourni en standard avec l'installation de joomla.

<< Précédent - Suivant >>