Embed Size (px)
Citation preview
Apprendre joomla Prérequis HTML et XHTML
Langage CSS
PHP et Mysql
base html
Avant de donner une définition, vous constatez une chose importante. La présente page que vous êtes en train de consulter maintenant, est affichée grâce à votre navigateur (mozilla firefox, internet explorer, safari, opera, netscape, google chrome ou autre).
Par analogie aux êtres humains qui ont besoin d’un langage pour communiquer et d’un traducteur le cas échéant qui fera l’intermédiaire, votre navigateur a besoin d’un langage pour comprendre ce qu’on lui demande de faire.
Pour afficher le texte « Comprendre html » en gras, vous devez le placer entres <b> et </b>. Votre page web contiendra par conséquent, la ligne suivante :
<b> Comprendre html </b>
qui sera lue et interprétée par votre navigateur. Celui-ci affichera le résultat suivant:
Comprendre html
Pour afficher une image « MonImage.gif », vous devez placer le code suivant dans votre page web :
<img src="MonImage.gif " >
<b> et <img> sont appelées des balises html. <b> est une balise ouvrante et </b> une balise fermante.
Le langage html (Hypertext Markup Language) est donc un langage de balisage qui permet d’organiser et mettre en forme des informations sur une page web. Il vous donne la possibilité d’inclure des éléments tels que des formulaires de saisie, des tableaux, des ressources multimédias (images, vidéos) etc.
En fin de compte, votre page entière n’est qu’une série de balises saisies les unes après les autres que le navigateur interprète pour afficher à l’écran le contenu de la page avec la présentation demandée.
La maîtrise de la base html consiste à apprendre la liste des balises disponibles et les règles de syntaxe y afférentes à respecter.
Exemple de balises
Les balises qui constituent la base html du langage, sont nombreuses et vous n'êtes pas censés les apprendre toutes par coeur. Une balise peut avoir plusieurs attributs, ce qui rend un peu difficile leur mémorisation. Avec la pratique, vous mémorisez certaines plus que d'autres. L'essentiel c'est de savoir où aller chercher la syntaxe et comment faire une recherche. Pour les balises les plus connues, on peut citer les suivantes:
• <a>: pour insérer un lien hypertexte • <p>: pour un bloc de page. • <br>: pour un saut de ligne
- 1 -
• <b> : pour la mise en gras • <img>: pour l'insertion d'une image • <table>: pour insérer un tableau • <tr>: pour une ligne de tableau • <td>: pour une cellule de tableau • <div>: pour insérer un bloc de mise en forme div • <h1>...<h6>: pour marquer les titres (niveaux 1 à 6) • etc
Le xhtml c’est quoi ?
Pour simplifier, xhtml (X pour eXtensible) vient étendre le langage html par l’ajout de normes à respecter dans la syntaxe.
Si par exemple l’html n’était pas rigoureux avec les balises de fermeture, xhtml, par contre, est plus exigeant. Voici un exemple:
En html
Il est tolèré d’avoir cette page de code :
<img src="MonImage1.gif ">
<br>
<img src="MonImage2.gif ">
En xhtml, il faudra corriger le code ci-dessus. Soit après correction:
<html>
<head>
</head>
<body>
<img src="MonImage1.gif " />
<br />
<img src="MonImage2.gif " />
</body>
</html>
La fermeture des balises se fait dans tous les cas par un slash « / »:
• <Nom-de-balise> ….. </Nom-de-balise> : pour les balises par paires telles que la balise <body> pour le corps de votre page.
• <Nom-de-balise ……… />: pour les balises simples telle que <img /> pour l’insertion d’images.
- 2 -
Pourquoi comprendre l'html?
Le puissant cms joomla permet de réaliser des sites web professionnels sans connaissances approfondies sur le langage html. Cependant, il est important de comprendre le langage pour agir avec plus de flexibilité.
Bien que vous pouvez utiliser des éditeurs pour générer le code de vos pages web, une bonne maîtrise des balises html et des styles css vous permettra de personnaliser vos templates joomla. Maitriser les langages sous-entend une bonne compréhension et non pas une mémorisation par coeur qui demeure, bien évidemment, difficile.
En outre, vous voudriez peut être analyser un dysfonctionnement ou faire des retouches d'amélioration sur votre code html. Le passage par un éditeur n’est pas toujours suffisant. Pour affiner votre page web, vous aurez sûrement besoin de décrypter son contenu de manière globale et aller au bon endroit dans le texte du code pour apporter les ajustements nécessaires.
Conclusion
Pour trouver la syntaxe d'une balise html quelconque et ses attributs correspondants, servez vous d'une documentation de référence html. Et pour vos premiers pas dans l’apprentissage du langage, un cours facile vous permettra de comprendre les éléments de base de l'html, cerner la structure et la terminologie du langage à travers des exemples pratiques. L'essentiel c'est d'apprendre les différentes balises html, les attributs de chaque balise, comment organiser vos textes, vos paragraphes, les titres, comment créer des liens hypertextes, insérer vos images. Vous apprendrez plus lorsque vous abordez la partie sur le langage css qui vous révèle comment personnaliser le désign de votre site.
Pourquoi le css?
Généralement, un site web comporte plusieurs pages au format html. Chacune des pages définit la disposition du contenu à publier. Dans une page, on doit distinguer, en effet, les titres, les paragraphes, les énumérations, les tableaux, les liens hypertextes ..etc. Ce sont les balises html qui permettent la mise en oeuvre de cette disposition du contenu de la page web.
Mais, pour la mise en forme de ces éléments (par exemple: titres en gras, tableaux avec bordure, énumérations colorées, liens repérés avec une couleur de fond etc..), elle peut être définie, ailleurs, dans un autre fichier de styles css dédié.
Faites attention à la différence entre les termes "disposition" et "mise en forme". La "disposition" des éléments de votre page web est définie par la succession de vos balises html dans la page et leurs imbrications, tandis que "mise en forme" est définie par vos styles css.
Pour l’ensemble des pages web de votre site, on peut créer un seul fichier css pour définir les propriètés des éléments de ces pages. Par exemple, dans le fichier css ainsi créé, on spécifie la couleur des titres, la taille de police des paragraphes, le type de police pour les énumérations, la couleur des liens hypertextes survolés ou cliqués, la couleur de fond pour les tableaux…etc
Il est également possible de définir les styles css au niveau de la page web elle même. Examinez l'utilisation de cette méthode à la page suivante avec l'exemple simple sur la création de cadres avec des coins arrondis moyennant des blocs div emboîtés.
- 3 -
Simple css
Dans votre fichier css, vous aurez, par exemple, le code générique suivant:
balise {
propriete: valeur propriete: valeur
}
Pour une balise <a> (lien hypertexte) pour laquelle on souhaite un texte de couleur jaune, sur fond bleu, le code css correspondant sera le suivant:
a {
color: yellow; background-color: blue;
}
Si vous souhaitez appliquer ce même style aux paragraphes du bloc <div class=MaClasse> et aux cellules du tableau <Table id=Entete>, le code css deviendra :
a, div.MaClasse p, table#Entete td {
color: yellow; background-color: blue;
}
Explications:
a, div, p, table et td relatifs à des balises dans le code html sont dits des sélecteurs de type.
La virgule "," c'est pour séparer des éléments auxquelles on va appliquer le même style.
Le point "." dans div.MaClasse signifie qu'il s'agit d'un sélecteur de classe.
Le dièze "#" dans table#Entete veut dire qu'il s'agit d'un sélecteur d'identifiant id.
L'espace entre div.MaClasse et p signifie qu'il s'agit d'un lien de parenté (<p> à l'intérieur de <div> de classe MaClasse)
Idem pour l'espace entre table#Entete et td: signifie que le style s'applique aux cellules <td> à l'intérieur de <Table> identifiée par id=Entete.
En bref :
« Le langage informatique css ("Cascading Style Sheets" traduit en "feuilles de style en cascade") sert à décrire la présentation des documents html…. » Définition wikipédia.
Pour un exemple simple css de A à Z, consultez la page suivante traitant un cas très pratique sur la réalisation de bloc avec des coins arrondis moyennant une disposition de blocs div emboités.
- 4 -
Des difficultés peuvent êtres rencontrées lors de la mise en oeuvre de certaines dispositions des blocs div. Les articles sur le positionnement div vous donnent des solutions à ces problèmes en montrant l'utilisation correcte de quelques propriètés css (float et margin).
Tous ces articles, bien choisis, vous seront utiles lors de la conception du design de votre site web avec le puissant cms joomla.
Exemple css - css arrondi
Dans ce tutoriel, vous allez vous familiariser davantage avec le langage css, en examinant l'une des utilités des blocs div emboités.
On se propose de créer la page web suivante:
Elle est constituée d'un bloc conteneur (bordure en vert) et d'un bloc fils flottant à gauche.
Comme vous le constatez, le bloc fils a des coins arrondis. La mise en oeuvre de ces coins arrondis est facilité par l'utilisation des blocs emboités.
Pour voir comment le faire, nous allons présenter le code de cette page xhtml en commentant chacun des blocs de code qui la constituent:
Initialement, le code de la page a la forme qui suit. Pour l'achever, il faudra, par la suite, renseigner la partie <body> et la partie <style>.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type= "text/css"> </style>
</head>
<body>
</body>
</html>
Dans le corps de la page (balise <body>), on place le code suivant. Le bloc gauche étant constitué de 4 blocs emboités, le bloc gauche lui même et 3 autres qui sont placés à l'intérieur de celui-ci:
<body> <div id="Principal">
- 5 -
<div id="gauche"> <div> <div> <div> Test de blocs div emboîtés à la manière des poupées russes. </div> </div> </div> </div> </div> </body>
Dans la suite, en commentant les styles css, on verra l'utilité de cette disposition qui ressemble à des calques superposés.
<style type= "text/css">
body { font-family: Tahoma, Arial, Verdana, sans-serif; font-size: 12px; color:blue; text-align: left; }
Ces paramètres s'appliquent à toute la page (balise "body"). Le texte de couleur bleu et de taille 12px, sera justifié à gauche.
#Principal{ width:800px; border: 2px solid green; /* redéfinition de bordure */ background-color:#FFFFFF; /* fond coloré */ }
Le bloc conteneur "Principal" a une largeur de 800px et une bordure verte de 2 pixels d'épaisseur.
#gauche { margin:20px; width: 152px; background: transparent url(images/module_middle.jpg) left repeat-y;
}
Le bloc "gauche" de largeur 152 pixels, a une marge de 20 pixels (espacement à gauche, en haut, à droite et en bas avec son bloc parent).
Ce bloc a un fond de couleur transparente, et une image de fond (module_middle.jpg) qui se répète le long de la hauteur. C'est l'image de fond de premier niveau figurant dans le shéma suivant :
#gauche div { width: 152px; background: transparent
- 6 -
url(images/module_top.jpg) top left no-repeat; }
Le bloc fils de l'élément "gauche" a la même largeur et la même couleur de fond (transparent) mais une image de fond différente qui ne se répète pas cette fois-ci (no-repeat) mais s'affiche une seule fois en haut à gauche du bloc (top left). C'est l'image de second niveau figurant dans le schéma ci-dessus.
#gauche div div { width: 152px; background: transparent url(images/module_bottom.jpg) bottom left no-repeat; }
C'est le bloc fils du bloc fils de l'élément "gauche". Il a la même largeur et la même couleur de fond (transparent) mais une image de fond différente qui ne se répète pas cette fois-ci (no-repeat) mais s'affiche une seule fois en bas à gauche du bloc (bottom left). C'est l'image de troisième niveau figurant dans le schéma ci-dessus.
#gauche div div div { width: 132px; height:300px; padding: 10px; background: transparent;
C'est le bloc fils le plus profond qui contient le texte à afficher. Il a un fond transparent. Le padding de 10 pixels, définit l'espacement intérieur de ce bloc, entre ses bords et son contenu. Le texte, par exemple, qui y est affiché, ne sera pas collé contre le bord du bloc.
}
</style>
C'est ainsi, que viennent se superposer ces 4 blocs, l'un en dessus de l'autre. Le bloc le plus profond "#gauche div div div " sera le plus haut et l'élément parent "#gauche" sera au niveau le plus bas. Ils restent tous visibles parce qu'ils ont tous une couleur de fond transparente. Par contre les images top et bottom viennent cacher localement l'image de premier niveau. L'image de troisième niveau ne cache pas celle de deuxième niveau parce qu' elles sont placées à des endroits différents (top et bottom).
Pour tester la page sur votre ordinateur locale, téléchargez les images de fond middle , top et bottom.
float css
Pour vous aider à créer facilement un site web de qualité professionnelle avec le puissant cms joomla, on explique dans le présent tutoriel comment résoudre des problèmes css courants. Des difficultés pouvent être rencontrées lorsque vous utilisez le positionnement css des blocs div : éléments conteneurs figurant dans vos pages web.
La solution vous servira certainement dans la conception du design de votre site .
Pour l'instant, essayons de poser le problème qui réside dans la difficulté de mise en oeuvre de la proprièté css float à travers l'exemple de homepage schématisé ci-après:
- 7 -
Par défaut, les blocs div, éléments conteneurs d'une page web sont affichés dans une succession verticale, c'est le positionnement en flux normal. Le flux fait en sorte que ces éléments s'affichent naturellement, les uns à la suite des autres.
Donc en flux normal, un bloc, génère un retour à la ligne après son affichage. La proprièté css "float" permet de sortir un élément du flux, autrement dit, le placer à doite ou a gauche sans générer de retour à la ligne après son affichage. Mais la difficulté réside dans le comportement des autres blocs qui reste difficile à expliquer, parfois, même pour les designers Web non débutants. Un exemple de comportement inattendu sera examiné à travers l'exemple que nous allons traiter ensemble. Pour réaliser le design du shéma cité avant, créez un fichier nommé "tuto-float.html" (en utilisant, par exemple, l'éditeur notepad++). Le code à insérer, au départ, est le suivant: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style type= "text/css"> </style> </head> <body> </body> </html> Pour créer les blocs avec l'imbrication souhaitée, placer le code suivant entre les balises <body> et </body>: <body> <div id="conteneur">
- 8 -
<div id="enhaut">ENHAUT</div> <div id="recherche">RECHERCHE</div> <div id="contenu"> <div id="gauche">GAUCHE</div> <div id="centre">CENTRE</div> <div id="droit">DROIT</div> </div> </div> <div id="enbas">ENBAS</div> </body> Pour le positionnement des blocs, il s'agit de:
• attribuer la proprièté "float: left" aux blocs "gauche", "centre" et "droit". • et annuler l'effet de la proprièté "float" moyennant la proprièté: "clear: both" qui permet un retour à
la ligne pour afficher le bloc suivant dans le flux. A savoir le bloc "enbas".
Mais où placer cette proprièté "clear"?
La définition des styles css sera défini dans le même fichier html entre les balises <style> et </style>. En voici le contenu avec des commentaires: <head> <style type= "text/css"> body { font-family: Tahoma, Arial, Verdana, sans-serif; font-size: 12px; text-align: center; } C'est la définition de police pour toute la page. Le texte est centré. div{ margin: 4px; border: 1px solid blue; /* définition de bordure par defaut pour tous les blocs */ } C'est bien indiqué en commentaire, il s'agit de la définition de bordure par défaut pour tous les blocs. (N.B: Pour commenter vos styles css, vous placez du texte entre /* et */ ). #conteneur { width:970px; border: 1px solid red; /* redéfinition de bordure */ margin: 0 auto; /* pour centrer tout le contenu de la page */ } Le conteneur global de largeur 970px, est centré dans la page et sa bordure est en rouge. #enhaut { width:960px; height:100px; } Le bloc "enhaut" a une largeur 960px et une hauteur de 100px; #recherche { width:960px;
- 9 -
height:33px; } #contenu { width:960px; min-height:30px; border: 2px solid green; /* redéfinition de bordure */ background-color:#ece9d8; /* fond coloré */ } La bordure du bloc "contenu" est en vert. Pour la bien visualiser, on lui a attribué un fond coloré (couleur "#ece9d8"). La taille minimale est de 30px. Ce bloc devra s'étendre, si nécessaire, pour inclure touts ses blocs fils. #gauche { float:left; width:200px; height:300px; } #centre { float:left; width:518px; height:300px; } #droit { float:left; width:200px; height:300px; } Ces trois blocs sont placés en position gauche à l'aide de la proprièté "float" qui ne génère pas de retour à la ligne après affichage de chacun des blocs. #enbas { clear:both; width:960px; height:33px; margin: 4px auto; /* pour centrer le bas page */ } A ce niveau, on a placé la proprièté clear pour tester son effet. </style> </head> En résumé, On a attribué une largeur et une hauteur et une bordure à chaque bloc div pour permettre une meilleure visualisation des conteneurs et leur positionnement les uns par rapport aux autres:
• le bloc "conteneur" avec une bordure rouge • "contenu" avec bordure verte et un fond coloré. • et les autres blocs avec bordure bleue
La question était où placer la proprièté clear? Si on la place, au niveau du style id "enbas", on constatera un comportement qui semble être normal avec le navigateur Internet Explorer (IE7) (visualiser la page)
- 10 -
Mais essayez de voir l'affichage avec Mozilla firefox (version testée 3.0.8) qui respecte mieux les normes css. L'affichage est incorrect. En effet, Internet Explorer ne suit pas strictement les standards, et de ce fait pour vérifier la conformité de vos pages web aux standards xhtml et css, il est vivement recommandé de faire les tests via firefox pour corriger toute anomalie constatée. Vous serez rassurés que les visiteurs de votre site web auront un affichage correct. Pour le cas présent, vous constatez, avec mozilla firefox, que le bloc "contenu" n'inclut plus ses blocs fils: "gauche", "centre" et "droit". Sa hauteur ne s'est pas étendue comme prévue.
Pour corriger, il faudra appliquer "clear" au bon endroit. En fait, c'est juste avant de quitter le bloc père "contenu" qui est le conteneur immédiat des blocs flottants à gauche. Pour ce faire, on va créer un bloc vide nommé "clr" : <div class="clr"></div> à placer vers la fin du bloc conteneur en question, c'est le bloc "contenu". Ce bloc "clr" sera affecté par la proprièté "clear:both" au niveau du fichier css comme suit: .clr { clear: both; font-size:0; line-height:0; border: 0px; } Voici, en entier, le fichier html corrigé: (les modifications ci-dessus y sont rapportées en gras) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style type= "text/css"> body { font-family: Tahoma, Arial, Verdana, sans-serif; font-size: 12px; text-align: center; } div{ margin: 4px;
- 11 -
border: 1px solid blue; /* définition de bordure par defaut pour tous les blocs */ } #conteneur { width:970px; border: 1px solid red; /* redéfinition de bordure */ margin: 0 auto; /* pour centrer tout le contenu de la page */ } #enhaut { width:960px; height:100px; } #recherche { width:960px; height:33px; } #contenu { width:960px; min-height:30px; border: 2px solid green; /* redéfinition de bordure */ background-color:#ece9d8; /* fond coloré */ } #gauche { float:left; width:200px; height:300px; } #centre { float:left; width:518px; height:300px; } #droit { float:left; width:200px; height:300px; } #enbas { /*clear:both;*/ width:960px; height:33px; margin: 4px auto; }
- 12 -
.clr { clear: both; font-size:0; line-height:0; border: 0px; } </style> </head> <body> <div id="conteneur"> <div id="enhaut">ENHAUT</div> <div id="recherche">RECHERCHE</div> <div id="contenu"> <div id="gauche">GAUCHE</div> <div id="centre">CENTRE</div> <div id="droit">DROIT</div> <div class="clr"></div> </div> </div> <div id="enbas">ENBAS</div> </body> Examiner le résultat dans les deux navigateurs.
Maintenant, mozilla firefox affiche correctement tous les blocs de votre page web.
css positionnement
A ce niveau, on examinera un autre problème que vous pouvez rencontrer lors de l'utilisation de la proprièté "margin". Le constat est fait lorsque vous tentez d'afficher votre page web sous firefox (3.0.8) ou google chrome (1.0.154.53).
- 13 -
Voici un exemple de page simple qui affiche un bloc parent "conteneur" incluant un bloc fils "contenu". L'image suivante montre le résulat escompté:
Pour faire le test, créez une page html avec un éditeur tel que notepad++ . Placez le corps suivant entre les balises <body> et </body>: <body> <div id="conteneur"> <div id="contenu">Contenu</div> </div> </body> Pour la définition des styles css, vous pouvez placer le code suivant entre les balises <head> et </head> de votre page html: <head> <style type= "text/css"> body { font-family: Tahoma, Arial, Verdana, sans-serif; font-size: 20px; /* taille de police */ text-align: center; /* texte centré */ color: blue; /* texte de couleur bleue */ } A ce niveau, on a défini les paramètres du texte pour toute la page (style de balise body). Les commentaires placés entre /* et */ permettent d'avoir un code plus lisible. #conteneur { width:960px; min-height:300px; /* hauteur minimale */ background-color:#A9A9A9; /* fond coloré */ }
C'est la définition du bloc parent.
#contenu { margin: 100px auto; /* bloc centré avec une marge en haut et en bas de 100 pixels */ width:300px; height:100px; background-color:#98FB98; } Le bloc fils est centré dans le bloc parent avec une marge en haut et en bas de 100 pixels.
- 14 -
</style> </head> Lorsque vous tentez d'afficher votre page sous internet explorer 7, l'affichage semble être correct. Cependant avec mozilla firefox ou google chrome, la proprièté margin semble être appliquée au bloc "conteneur" plutôt qu'au bloc fils!. L'image suivante:
montre le résultat obtenu et que vous pouvez, vous même, tester ici avec, bien entendu, mozilla firefox ou google chrome. Pour corriger, vous devez définir une bordure de 1pixel pour le bloc parent "#conteneur". Ajoutez, pour cela, la ligne suivante à votre code css au niveau du style id "#conteneur": border-top: 1px solid transparent; La bordure choisie est de couleur transparente. Affichez maintenant la page ainsi modifiée. L'affichage est maintenant correct avec firefox et google chrome.
Conclusion
Comme vous l'avez constaté, le css est un autre langage destiné à la mise en forme du contenu de vos pages web. Si vous êtes débutants, vous pouvez revenir vers les exemples des pages précédentes après avoir consulté le Siteduzero qui vous permettra d’apprendre le langage en douceur. Là, vous allez apprendre comment appliquer des styles à vos différentes balises html, comment définir le formatage de votre texte : taille de police, couleur, alignement, fond …etc
Vous allez apprendre également la partie fondamentale concernant la création du design de votre site, en définissant la présentation de vos différents blocs <div>: tailles, bordures, positionnement des unes par rapport aux autres etc.
Enfin, une fois que vous avez pris suffisemment du temps à apprendre et assimiler les éléments essentiels des deux langages html et css, vous êtes habilités à réaliser votre propre template : la partie fondamentale de votre projet de conception web avec le puissant cms joomla.
Ces deux langages sont prérequis pour pouvoir distinguer une balise, un attribut de balise, un sélecteur de class, un sélecteur d'identifiant id, les différents styles possibles, les propriètés de styles etc.
Certes, on vous demande pas de tout apprendre par coeur mais l'essentiel c'est de comprendre le principe et en cas de besoin savoir où aller chercher l'information. Vous pouvez vous servir d'une documentation de référence sur le css et l'html qui vous aidera à la mise en oeuvre d'une balise et de ses attributs ou d'un style css particulier. Un exemple d'utilisation de ces références est bien illustré à la page 8 du tutoriel sur la l'adaptation de template joomla.
- 15 -
PHP et Mysql
Serveur web apache - php et mysql
Bien que vous pouvez utiliser joomla sans connaissances approfondies du langage php ni de la base de données mysql, il s'avère utile de comprendre le fonctionnement de ces deux composants et de leur relation avec joomla.
Dans joomla, tout le contenu des articles et même la configuration du site (liste des utilisateurs, menus, liens, définition des modules et de leur positionnement ..etc) sont stockés dans une base de données mysql. Les pages web joomla sont des pages php. C’est pourquoi, vous aurez besoin d’un serveur web.
Le serveur web dont vous aurez besoin, est composé de apache et mysql ; apache en tant que serveur http qui interpréte le langage php et mysql en tant que serveur de base de données. Une illustration permet de mieux comprendre.
Voici un shéma illustratif :
1- Le client, un internaute par exemple, demande l'affichage d'une page web php en soumettant une requête http.
2- Le serveur web traite la page php demandée. Au cours du traitement de la page php, le serveur puise les données depuis la base de données mysql. Pour cela, il va soumettre une requête sql au serveur de base de données.
3- La base de données mysql traite les requêtes et envoie en réponse les données demandées au serveur web.
4- Ayant reçu tous les éléments nécessaires, le serveur web construit alors une page web sous format xhtml intégrant les données extraites de la base données.
Vous constatez que la requête php soumise par le client a déclenché une génération de page xhtml par le serveur web. Il est évident alors qu'une demande réelle de page xhtml ne génére pas de traitement particulier au niveau serveur. Le serveur web ne fait, en effet, dans ce cas, que renvoyer la page xhtml demandée.
Le langage xhtml , lui seul, ne permet de construire que des pages statiques. Une page statique est une page interprétée directement par le navigateur du client. Le serveur n'a qu'à envoyer la page xhtml demandée sans aucun traitement. Un traitement, cependant, est exigé pour une page php. Les pages php sont dites des pages dynamiques.
php est un langage utilisé pour intéragir avec des bases de données.
- 16 -
Joomla utilise des pages php et la base de données mysql.
En comprenant juste ce qu'on vient d'expliquer, vous serez en mesure d'avancer convenablement dans votre apprentissage et réaliser facilement votre site web avec le puissant cms joomla
Si vous êtes passionnés par le langage php, sachez bien qu'il permet de créer un site dynamique, ainsi vous pouvez créer un forum pour votre site, un livre d'or, des news, un compteur des visiteurs de votre site et bien plus.
Apprendre Installation joomla
Creation template simple
Modifier template simple
Creation template complet
Creation template simple
Creation template joomla
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èles communément connus sous le nom de template joomla.
Si vous avez préparé correctement votre ordinateur personnel et bien suivi nos conseils, vous pouvez commencer la conception de votre template joomla en toute sérénité.
Dans la réalisation de votre site, ce qui vous incombe principalement, c'est préparer votre propre modèle, le template, en adaptant un template existant ou en concevant un nouveau. Pour réussir cette opération, il faudra 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. Tout le monde y trouvera son compte, du débutant au professionnel en passant par les étudiants et chercheurs d'emploi de webmaster ou webdesigner.
Pour des raisons pédagogiques, on va commencer par les notions fondamentales et les éléments de base. Au préalable, installez joomla sur votre ordinateur local. Nous passerons, après, à travers ce tutoriel et le tutoriel suivant à la création d'un template simple pour joomla 1.0.15 (version toujours plébiscitée par un grand nombre de webmaters) tout en expliquant sa structure et les éléments le constituant.
Des tutoriels complémentaires vous apprennent, par la suite, à construire un template complet pour votre site web joomla 1.0.15 ou 1.5. L'objectif étant d'avoir un code propre parfaitement maitrisable et réussir à modifier et personnaliser un template pour son site web professionnel.
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. 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 traite des difficultés de 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.
- 17 -
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.
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 les vôtres. 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".
Le Contenu du dossier template
Le dossier "c:\xampplite\htdocs\MonSitePerso\Templates\" est le conteneur qui comprend tous les templates disponibles pour votre site web.
Pour la mise en oeuvre de votre template nommé "TemplatePerso", créez l'arborescence suivante dans le dossier "\Templates":
- 18 -
"\TemplatePerso\" : dossier contenant tout les éléments du template. "\TemplatePerso\css\" : dossier contenant les fichiers css. "\TemplatePerso\images\" : dossier contenant toutes les images du template.
Examinons le contenu de chacun de ces dossiers:
Le dossier "\TemplatePerso\" va contenir les fichiers suivants:
index.php : le fichier définissant la structure de votre template. templateDetails.xml : le fichier descriptif de votre template (auteur, nom, liste des images, etc) template_thumbnail.png : fichier correspondant à la miniature affichée dans joomla.
Cette image miniature, vous pouvez la créer après finalisation (création et amélioration) de votre template.
Le dossier "\TemplatePerso\css\" va contenir le fichier :
template_css.css : fiche des déclarations de style pour paramétrer l'affichage du contenu dans joomla (police, taille, couleurs, bordure, espacements, positionnement etc..)
Le contenu de ces fichiers sera examiné en détail dans les pages qui suivent.
Le dernier dossier de l'arborescence "\TemplatePerso\images\" comprend tous les fichiers images propres à votre template.
N.B: pour les images utilisées dans votre site quel que soit le template, elles sont placées dans un niveau plus haut, dans le dossier : "c:\xampplite\htdocs\MonSitePerso\images\". C’est là où vous placez les images illustrant vos articles.
Le fichier index.html :
Dans tous les dossiers de l’arborescence (racine et sous dossiers du template), un fichier index.html est placé pour sécuriser votre site. Il n’a pas de fonction ni sur le contenu ni sur la présentation de vos pages web. De ce fait, la présence d’un code particulier dedans n'est pas une obligation, cependant on y insère généralement le code suivant :
<html><body bgcolor="#FFFFFF"></body></html>
Jusqu'à présent, tous les fichiers de l’arborescence sont vierges. Aucun code n’est inséré dedans sauf pour le fichier de sécurité index.html.
A l’aide d’un éditeur de texte, Notepad ++ , par exemple, de votre « Boîte à outils », vous allez préparer, par la suite, les fichiers de votre template..
Le fichier template_thumbnail.png
En supposant que votre template final tiendra sur toute la page de votre navigateur pour une résolution de 1024*768 pixels, une image miniature de 25% de cette taille est généralement acceptable. Soit une dimension de 256*192 pixels pour votre template_thumbnail.png. Adoptez, par exemple, une dimension de 250*200 pixels.
Vous pouvez créer ce fichier miniature grâce à un outil de dessin tel que Gimp, une fois, la conception de votre template achevée. Une capture d'écran et une réduction de l'image en spécifiant les dimensions dans votre outil de dessin est une tâche facile et rapide.
- 19 -
Le fichier templateDetails.xml
Il s’agit d’un fichier comprenant une série de balises xml qu’il faudra adapter au contexte du template nouvellement créé, notamment pour la troisième ligne où il faut placer le nom exacte du template.
A l'aide de Notepad++ par exemple, créez un nouveau fichier nommé templateDetails.xml (la lettre "D" en majuscule). Voici le contenu à insérer dedans :
<?xml version="1.0" encoding="iso-8859-1"?> <mosinstall type="template" version="1.0.0">
<name>TemplatePerso</name> <creationDate>04/02/2009</creationDate> <author>Inserer-Votre-Nom</author> <copyright>GNU/GPL</copyright> <authorEmail>Inserer-Votre-Email</authorEmail> <authorUrl>http://www.Votre-Site.com</authorUrl> <version>1.0</version> <description>Inserer-Texte-Descriptif-De-Votre-Template.</description> <files>
<filename>index.php</filename> <filename>template_thumbnail.png</filename>
</files> <images>
<filename>images/powered_by.png</filename>
</images> <css>
<filename>css/template_css.css</filename>
</css>
</mosinstall>
Modifiez le texte, entre les balises xml ouvrante et fermante, par un texte qui vous correspond le mieux :
<name> : pour le nom de votre template <creationDate> : date de création du template <author> : le nom du créateur du template <copyright> : Information sur le copyright du template. <authorEmail> : l’email du créateur. <authorUrl> : adresse du site du créateur <version> : version du template <description> : texte descriptif du template
<files> : indique la liste des fichiers à installer associés au template. <images> : indique la liste des images associées au template <css> : indique la liste des feuilles de styles.
Après modification, sauvegarder le fichier avant de quitter.
- 20 -
Le squelette du fichier index.php
A l'aide de Notepad++ par exemple, créez un nouveau fichier nommé index.php et insérer dedans le squelette suivant :
<?php $iso = split( '=', _ISO ); echo '<?xml version="1.0" encoding="'. $iso[1] .'"?' .'>'; ?> <?php defined( '_VALID_MOS' ) or die( 'Direct Access to this location is not allowed.' ); ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<?php mosShowHead(); ?> <?php if ( $my->id ) {initEditor(); } ?> <meta http-equiv="Content-Type" content="text/html; <?php echo _ISO; ?>" /> <link href="<?php echo $mosConfig_live_site;?>/templates/<?php echo $GLOBALS[cur_template];?>/css/template_css.css" rel="stylesheet" type="text/css" />
</head> <body>
</body>
</html>
Explication de la balise <link>
Entre les balises <head> et </head> , on indique au ficher index.php le fichier css qu’il doit charger, et ce à l’aide la balise <link />. L’attribut "href" de cette balise indique l'emplacement de votre feuille de template_css.css.
La balise <link />, au départ, a la forme suivante :
<link href= "http://localhost/MonSitePerso/Templates/TemplatePerso/css/template_css.css" rel="stylesheet" type="text/css" />
En utilisant les variables joomla à la place des noms de dossier et fichier, on parvient à généraliser la balise et la rendre valable pour n'importe quel template.
Joomla! possède la variable $GLOBALS[cur_template] qui renvoie le nom du template courant et la variable $mosConfig_live_site qui contient l'adresse du site.
La balise <link /> devient après remplacement du contenu des variables par les noms des variables :
<link href="<?php echo $mosConfig_live_site;?>/templates/<?php echo $GLOBALS[cur_template];?>/css/template_css.css" rel="stylesheet" type="text/css" />
- 21 -
En procédant ainsi, le squelette de votre fichier index.php sera valable quel que soit le nom du site et pour tous vos futurs templates. Le code, de cette façon, est bien optimisé.
Le corps du fichier index.php
Pour compléter le squelette de votre fichier index.php, il faut insérer du code entre les balises <body> et </body>. Pour le préparer, schématisez tout d'abord, l’apparence de votre page d’accueil. On adopte, à titre pédagogique, le modèle suivant :
Pour réaliser ce schéma, vous allez utiliser des blocs <div> pour la mise en forme de votre site.
Insérer pour l’instant entre <body> et </body> le code suivant :
<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>
Chaque bloc <div> est identifié par son attribut "id". C'est le selecteur qui va vous servir pour paramétrer vos blocs dans le fichier css.
Il vous est conseillé d’ouvrir en même temps 2 fenêtres; la fenêtre de votre navigateur et la fenêtre de votre éditeur Notepad++ qui va vous servir pour la modification de vos 2 fichiers php et css. Cela vous permet de sauvegarder vos modifications et voir dans l’immédiat le résultat sur votre navigateur.
Sauvegarder votre fichier index.php.
- 22 -
Testez maintenant le résultat en rafraichissant l’affichage de l’url de votre site: "http://localhost/MonSitePerso/"
Vous constatez que le template standard par défaut est encore utilisé. C’est tout à fait normal.
Assigner un template par défaut
Pour assigner votre template en tant que modèle par défaut du site, accédez à la console d’administration via l'url http://localhost/MonSitePerso/administrator
Entrer le nom « admin » et le mot de passe correspondant (cf Etape 3 de l'installation de joomla sur votre ordinateur local)
Allez ensuit dans le menu "Site-->Gestion des Templates-->Template du Site"
Dans le nouveau écran ainsi affiché, cliquez sur le bouton en regard de votre template "TemplatePerso" et puis cliquez sur le bouton "Default".
- 23 -
Raffraichir l’écran dans votre navigateur pour l’url de votre site: "http://localhost/MonSitePerso/". L’affichage correspond maintenant à votre nouveau template.
Comme vous le remarquez, à ce stade, votre template affiche 4 bloc div, le bloc « haut » , le bloc « gauche », le bloc « centre » , le bloc « droit » et enfin le bloc « bas ».
Dans la page suivante, vous allez paramétrer votre fichier template_css.css qui est encore vierge jusqu'à maintenant.
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; }
- 24 -
#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. Pour la proprièté float, consultez l'article sur le Positionnement css qui traite un cas pratique et fournit des informations plus détaillées qui vous seront d'une grande utilité.
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 (modifications en gras) :
<div id= "conteneur">
<div id="haut">CONTENU BANNER</div> <div id="gauche">CONTENU GAUCHE</div>
- 25 -
<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 (modifications en gras) :
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.
- 26 -
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.
Publication des positions de modules joomla
Avant toute chose, distinguez bien entre les termes "bloc" et "position". un "bloc" correspond à un bloc <div> (balise html) vu précédemment et "position" c’est le terme joomla qu’on va examiner par la suite.
On se propose d’adopter l’organisation suivante pour la présentation du site :
• Le bloc "haut" affiche les modules publiés en position "banner". • Le bloc "gauche" affiche les modules publiés en position "left". • Le bloc "centre" affiche le « mainbody » càd le corps principal du site. • Le bloc "droit" affiche les modules publiés en position "right". • Le bloc "bas" affiche les modules publiés en position "bottom".
Un module est un élément de votre page web qui permet d’afficher un menu (exemple : module de menu principal), un formulaire pré-installé (module d'identification) ou un composant installé ultérieurement.
Un module est affiché dans une "position de publication".
Dans la console d’administration de votre site, vous pouvez consulter la liste des positions pré-définies dans le menu "Site--> Gestion des Templates-->Positions des Modules":
Vous pouvez modifier cette liste en ajoutant de nouvelles positions comme vous pouvez également renommer à votre convenance une position existante.
- 27 -
Par exemple, si vous renommer la position « left » en « gauche », vous devez assigner à la position « gauche » les modules déjà assignés à « left ». Pour ce faire, allez dans la menu de gestion des modules du site : « Module --> Modules du Site ». Là, on liste tous les modules disponibles et pour chacun, la position à laquelle il est assigné.
Notez, toutefois, que seules les positions prises en charge dans votre template seront affichées dans votre site. Pour notre exemple du template « TemplatePerso », étant donné que l’on souhaite la présentation suivante :
• Le bloc "haut" affiche les modules publiés en position "banner". • Le bloc "gauche" affiche les modules publiés en position "left". • Le bloc "centre" affiche le « mainbody » càd le corps principal du site. • Le bloc "droit" affiche les modules publiés en position "right". • Le bloc "bas" affiche les modules publiés en position "bottom".
seuls les modules assignés aux positions ("banner", "left", "right", "bottom") seront affichés dans votre site http://localhost/MonSitePerso. Les modules assignés à ces positions sont les seules qui seront publiés.
Le module assigné à "user1", par exemple, ne sera pas affiché dans votre template. Il est affiché par contre si vous utilisez le template standard « rhuk_solarflare_ii » étant donné que le fichier "index.php" correspondant :
«c:\xampplite\htdocs\MonSitePerso\Templates\rhuk_solarflare_ii\index.php»
fait appel à cette position à la ligne 122 via le code php :
<?php mosLoadModules ( 'user1', -2 ); ?>.
Revenons à notre template. Pour réaliser l’affichage souhaité, voici le code modifié du corps de votre fichier index.php:
<div id= "conteneur">
<div id="haut"><?php mosLoadModules ( 'banner' ); ?></div> <div id="gauche"><?php mosLoadModules ( 'left' ); ?></div> <div id="centre"><?php mosMainBody(); ?></div>
- 28 -
<div id="droit"><?php mosLoadModules ( 'right' ); ?></div> <div id="bas"><?php mosLoadModules ( 'bottom' ); ?></div>
</div>
Vous l'avez constaté, pour afficher dans le template les modules assignés à une position, on utilise la fonction mosLoadModules. La syntaxe de cette fonction est la suivante :
mosLoadModules ( $nom_position [, $style] ).
Nous y reviendrons à la page suivante pour plus d'explications.
Pour l'emplacement du MainBody qui est le corps principal, il a une particularité. Pour l'implanter dans le template, on utilise la fonction "mosMainBody()". Le script php utilisé est le suivant:
<?php mosMainBody (); ?>
Pour l’instant, examinez le résultat dans votre navigateur après sauvegarde des modifications.
Cette fois ci, un composant d'images est affiché en banner et du contenu dans les différentes positions de la page. C’est le contenu standard fourni avec l’installation joomla.
Les styles de publication des positions
La fonction "mosLoadModules()" permet d’afficher dans le template tous les modules qui sont assignés à une position donnée. La syntaxe de cette fonction est la suivante :
mosLoadModules ( $nom_position [, $style] )
"$nom_position" étant le nom de la position et le paramètre "$style" qui est facultatif définit le style d’affichage :
• $style = 0 : C'est la valeur par défaut. Les modules sont affichés dans une colonne de tableau. Un module par cellule.
• $style = 1 : Les modules sont publiés horizontalement. Chaque module est affiché dans une cellule d'un tableau comportant une seule ligne.
- 29 -
• $style = -1 : Les modules sont publiées horizontalement sous forme de textes bruts et sans titres. • $style = -2 : Les modules sont publiées dans le format de X-Joomla!. Le titre et le contenu de chaque
module sont inclus dans une balise <div>; le titre étant encadré par une balise <h3>. • $style = -3 : Les modules sont publiés dans un format qui permet, par exemple, les coins arrondis
étirables. Chaque module est affiché dans des blocs emboités, sorte de poupées russes. Consultez l'article sur le langage css pour plus d'explications sur la mise en oeuvre de ces blocs div emboités.
Donc, la fonction php "mosLoadModules", interprétée par le serveur web, génère un code html dont la structure dépend du paramètre "$style". Consultez, si vous en avez besoin, l'article expliquant le fonctionnement d'un serveur web conçu autour de php mysql et .
Voici le code généré avec le style -3:
<div class="module"> <div> <div> <div>
<h3>TITRE DU MODULE</h3>
Contenu affiché dans <table>, <form>, <div> selon le type du module (menu, identification, sondage ...etc)
</div>
</div> </div> </div>
Conclusion
Dans ce tutoriel, vous avez appris les différents éléments constituant un template et vous avez réussi à concevoir le vôtre qui est, jusqu'à maintenant, dans sa phase embryonnaire.
Modifier template simple
Modifier template joomla
Pour commencer, on rappelle que dans le tutoriel précédent, vous avez appris à concevoir un nouveau template simple, définir sa structure et l'assigner en tant que modèle par défaut pour votre site joomla 1.0. Deux autres tutoriels avancés vous apprennent par la suite à modifier un template pour joomla 1.0 ou 1.5.
Le présent tutoriel constitue une ébauche à votre travail de personnalisation. Pour l'instant, vous allez modifier légèrement votre template TemplatePerso conçu précédemment. Pour le contenu des articles, on va conserver le jeu d'exemples fourni en standard avec l'installation de joomla. Vous l'adapterez, par la suite, au contexte de votre site web "MonSitePerso" en créant vos propres menus, liens, articles , ...etc grâce à la console d'administration de votre site accessible via l'url: "http://localhost/MonSitePerso/administrator/" (cf à l'installation de joomla sur votre ordinateur personnel).
Avant de commencer
Ajuster 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
- 30 -
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, à l'issue du tutoriel précédent, 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 :
- 31 -
Modification de l'image du banner
Le bloc haut affiche la position "banner". Cette position publie par défaut le composant banner. Accédez à la console d'administration de votre site via l'url: http://localhost/MonSitePerso/administrator/ pour faire des modifications. Saisir votre identifiant "admin" et votre mot de passe (cf Etape 3 de l'installation de joomla sur votre ordinateur personnel) :
Accéder au menu "Modules ==> Modules du Site"
et puis dans le filtre des positions choisir "banner"
- 32 -
Dépublier le module affiché par défaut "Bannière"
et puis cliquez sur le bouton "Ajouter" pour ajouter votre module d'affichage de l'image "MonBanner.jpg" qu'on a préparé pour vous pour faire cette démonstration (sauvegarder cette image dans le dossier "\C:\xampplite\htdocs\MonSitePerso\images\")
Dans l'écran affiché dans la console d'administration, choisir "Ma Banniere" pour le titre, "Non" pour "Afficher le titre" et "banner" pour "Position".
- 33 -
et puis en bas dans la zone "Custom Output", cliquer sur le bouton "html" et puis dans la nouvelle fenêtre "html source Editor ", saisir le code suivant "
<img src="/MonSitePerso/images/MonBanner.jpg" alt="" width="468" height="60" />
Cliquer enfin sur "Update" et puis dans l'écran d'avant sur le bouton "Sauver".
Revenez à l'écran de votre site, Rafraichissez votre navigateur pour voir le résultat. Votre image est bien affichée en haut.
Choix des polices et des couleurs de fond
Préférez le choix d'un nombre limité de polices et de couleurs; un nombre exagéré n’est pas du tout apprécié. Les couleurs d'un site doivent être choisies en harmonie avec le thème abordé.
Préférez des polices standards pour garantir que votre texte soit interprétable par le navigateur des visiteurs de votre site et évitez des tailles de police réduites qui risquent d’êtres illisibles. D’autres polices non standards que vous pouvez télécharger sur internet, vous seront, toutefois, utiles pour la création de vos images. Dans une image, en effet, on peut tout insérer sans contrainte y compris les polices non standards.
- 34 -
Comme vous l'avez fait dans le tutoriel précédent "Création Template", Il vous est conseillé d’ouvrir en même temps 2 fenêtres ; la fenêtre de votre navigateur et la fenêtre de votre éditeur Notepad++ qui va vous servir pour la modification de votre fichier css. Cela vous permet de sauvegarder vos modifications et voir dans l’immédiat le résultat sur votre navigateur.
Insérez au début du fichier template_css.css les ligne suivantes:
body{ font-family: Verdana, Arial, sans-serif; }
Ce positionnement au début du fichier, permet d'appliquer ce style de police à toute la page.
Pour les couleurs d'arrière plan (background-color), faites les modifications suivantes : (seules les lignes modifiées sont reportées)
#conteneur { background-color: #c9d7db; }
#haut { background-color: #0099cc; }
#gauche { background-color: #ffcb6c; }
#centre { background-color: #e7e7e7; }
#droit { background-color: transparent; }
#bas { background-color: #0099cc; }
Vous vous demandez peut être comment piquer une couleur qui vous plaît sur internet. Eh bien, on verra comment lors de votre première utilisation de la boîte à outils "IE Developper Toolbar" un peu plus tard.
Pour l'instant, sauvegarder votre fichier css et RAFRAICHISSEZ l'écran de votre navigateur.
- 35 -
Remarquez qu'avec la résolution 1024*768 de l'écran, la page d'accueil tient dans une largeur inférieure à la largeur de l'écran. En plus, avec 800*600 que vous pouvez toujours tester, la largeur de l'écran ne suffit plus pour tenir la page en largeur (apparition de l'ascenseur horizontal qui n'est pas du tout apprécié par tout le monde). Voici le résultat dans votre navigateur:
Revenez à la résolution 1024*768 pour continuer.
Vous allez supprimer cet ascenseur horizontal en modifiant les largeurs des blocs div à la page suivante.
css joomla
Pour repérer, d'une manière simple, les styles css joomla, téléchargez et installez les barres d'outils destinés aux développeurs. Ces outils sont précieux et vous allez, sans doute, les apprécier, à travers des exemples d'application qui vont suivre (pages suivantes de ce tutoriel). D'autres styles css joomla seront abordés dans les tutoriels pour template joomla complet.
A force d'utiliser ces barres d'outils, vous vous aperceverez qu'ils se complètent et vous seront d'un apport considérable pour une conception optimale de votre template.
Il s'agit des barres d'outils:
• "Internet Explorer Developer Toolbar" utilisé dans ce tutoriel.
- 36 -
• Web developer pour Firefox (version Française) muni de l'inspecteur DOM (vous installerez le DOM en tentant de l'activer via le menu Outils-->Inspecteur DOM de la barre d'outils Web Developer)
Bien entendu, installez avant, les navigateurs Internet Explorer (version 7) et Mozilla Firefox (3.0.10 ou supérieur). Cela vous permettra de faire vos tests dans les deux navigateurs les plus répandus dans le monde. Et si votre travail s'avère adapté pour les deux, vous maximisez vos chances d'avoir un affichage correct de votre site pour tous les internautes.
Pour personnaliser votre template, vous serez amenés à paramétrer les styles css joomla. Vous n'êtes pas obligés de les apprendre tous par coeur ou d'en maitriser la liste exhaustive. Vous devez savoir, essentiellement, comment les repérer facilement.
Dans les pages suivantes, vous allez apprendre à utiliser "Internet Explorer Developer Toolbar" pour repérer et adapter les styles joomla de votre template. Pour les adeptes de Firefox, ils pourront utiliser l'Inspecteur DOM (menu outils de la barre "Web developer") qui offre des fonctionnalités similaires.
Piquer une couleur
Vous voulez savoir comment piquer une couleur sur internet et l'assigner à un élément de votre page. Vous souhaitez peut être changer le fond du bloc gauche. Voyons comment faire pour lui assigner une autre couleur.
Dans votre navigateur Internet explorer (IE7), lancer la Toolbar "IE Developper Toolbar" en cliquant sur son icône dans la barre d'outils.
Une infobulle sur fond jaune vous montre son emplacement losque vous passez le curseur en dessus.
Affichez un site de votre choix. Dans le menu de la Toolbar, allez dans "Tools ==> Show Color Picker". Une petite fenêtre "Color Picker" est affichée et votre curseur se transforme en pipette.
- 37 -
En déplaçant la pipette dans la page de votre site préféré, la petite fenêtre vous affiche la couleur pointée et le code correspondant.
Cliquez lorsque vous piquez la couleur qui vous convient et puis cliquez sur le bouton "Copy and Close " de la petite fenêtre. Collez ensuite le code de la couleur dans votre fichier css. En admettant que c'est la couleur "#e0dbd5" qui est choisie, votre code modifié est le suivant:
#gauche{
background-color: #e0dbd5;
}
Maintenant que vous savez comment faire, modifiez à votre convenance toutes les couleurs définies jusqu'à présent.
Sauvegarder et RAFRAICHISSEZ!
- 38 -
Bordure et titres des modules
Dans l'écran de votre navigateur Internet explorer, garder la toolbar "IE Developper Toolbar" active (lancée précédemment en cliquant sur son icône dans la barre d'outils).
Dans la fenêtre qui est ouverte en bas de votre navigateur, remarquez une zone à gauche qui affiche tous les éléments de votre page: c'est un arbre DOM qui répertorie toutes les balises, les noms de classe, les identificateurs id de la page affichée.
Pour repérer la balise ou le selecteur css à paramétrer pour personnaliser un élément de votre page, choisissez "select element by click" dans le menu "Find".
Maintenant, en cliquant sur un élément de la page, la zone DOM vous affiche l'élément correspondant.
Cliquer sur sur "Menu Principal". Vous vous apercevez que l'arbre DOM pointe vers la balise <th>. Vous avez donc le choix entre la définition des proprètés pour tout <th> dans votre site ou uniquement pour les <th> de l'élément conteneur en question. Déplacez vous en haut pour repérer le conteneur de cet élément <th>. Il s'agit de:
"<TABLE class="moduletable">".
- 39 -
Rappelez vous bien de la fonction mosLoadModules() qui, par défaut avec $style = 0, affiche les modules dans une colonne de tableau (un module par cellule). Cela a été déjà vu dans le tutoriel précédent . c'est bien confirmé par l'arbre DOM. Le module du "Menu principal" est affiché dans une balise "<table>".
En comprenant de quoi il s'agit, l'arbre DOM nous a juste aidé à repérer la bon selecteur à paramétrer.
Placer à la fin de votre fichier css le code suivant :
table.moduletable { border: 2px solid #ffcb6c; margin-bottom: 10px ; background-color: white;
}
Table.moduletable th { font-size: large; color: #ff6600; text-align:left;
}
Vous avez ainsi défini les paramètres de tous les moduletables et par la même occasion défini les propriètés des titres <th> inclus dans un moduletable.
Vos moduletables ont un encadrement de 2 px (border), un fond blanc (background-color: white) et une marge en bas de 10 px (margin-bottom). Les titres th inclus dedans (Table.moduletable th) sont d'une couleur #ff6600, de taille large et alignés à gauche (left).
Sauvegarder votre fichier template_css.css et RAFRAICHISSEZ la page de votre site pour voir le résultat obtenu jusqu'à maintenant!
Liens hypertextes de la page
Ajouter à la fin du fichier css le code suivant:
a {
- 40 -
font-size:small; text-decoration: none;
}
a:hover {
color:red; background-color: #e7e7e7;
}
La proprièté "color" permet de définir la couleur de police et "text-decoration: none" supprime le soulignement par défaut des liens hypertextes.
"font-size: small" permet d'avoir une taille de police plus petite pour les liens par rapport au reste de la page.
":hover" signifie quand on pointe sur un lien avant de cliquer dessus. Cela permet de paramétrer des liens survolés.
Là, c'est juste un rappel des propriètés css. Il est supposé que vous avez pris le temps nécessaire pour assimiler les prérequis avant d'aborder ce tutoriel sur les templates.
Certes, vous n'êtes pas censés apprendre par coeur toutes les balises html et tous les styles css. Cependant, vous devez avoir la capacité de vous retrouver; savoir lire le code et repérer une balise, un attribut, un style css, une proprièté, etc et être capable de différencier entre les termes manipulés dans le domaine. Et ce n'est qu'après que vous vous servez d'une documentation de référence pour écrire le code dont vous avez besoin.
Traitons un exemple:
Pour les liens du "Menu Principal", au départ ils sont soulignés. Vous vous proposez de supprimer le soulignement. Vous n'avez pas en mémoire la proprièté css correspondante. Eh bien, s'agissant d'une proprièté css, vous accédez, par exemple, à la documentation css de référence de mediabox
Cliquez dans la table des matières sur "Propriétés du texte" et puis sur "text-decoration"
- 41 -
Vous avez tout entre les mains; des explications et des exemples de code vous facilitant la tâche.
Comme d'habitude, une fois que vous avez modifié le fichier template_css.css, sauvegarder et RAFRAICHISSEZ la page de votre site dans votre navigateur.
Liens du menu principal
Dans l'écran de votre navigateur Internet explorer, lancer la Toolbar "IE Developper Toolbar" en cliquant sur son icône dans la barre d'outils.
- 42 -
Utilisez toujours la fenêtre Toolbar en bas de votre navigateur. L'option "Select Element by Click" dans le menu "Find" étant cochée, cliquer sur un lien du "Menu principal". Vous vous apercevez que l'arbre DOM pointe vers <A class="mainlevel">. C'est donc le style de class "a.mainlevel" que vous devez définir pour paramétrer les liens du menu principal.
L'ancien code (a {} ) du paragraphe précédent correspondait à toute balise <a>. Dans le cas présent, il s'agit d'un selecteur de class joomla qu'il faut paramétrer. L'arbre DOM nous a permis de le répérer.
Placer dans le fichier css le code suivant à la fin du fichier :
a.mainlevel {
color: #0099cc; font-size: small;
} a.mainlevel:hover {
background-color: #e7e7e7; color:black;
}
Sauvegarder votre fichier template_css.css et RAFRAICHISSEZ la page de votre site pour voir le résultat obtenu jusqu'à maintenant!
- 43 -
Les éléments .contentpane, .button, .inputbox, label
Cliquez sur le lien "FAQs" du "Menu Principal", vous constatez un débordement du texte. Idem pour le lien "Rechercher":
A cette occasion, pourquoi le bloc de droite "droit" n'est plus affiché?
Le bloc "droit" affiche les modules publiés en position "right". Si vous consultez la console d'administration via l'url: http://localhost/MonSitePerso/administrator/, vous vous apercevez ques les modules de la position "right" sont paramétrés pour n'être publiés qu'en page d'accueil:
Pour résoudre le problème de débordement du texte, plusieurs solutions sont possibles selon ce que vous projetez mettre dans votre site:
1. si vous ne comptez pas utiliser le bloc "droit" en dehors de la page d'accueil, vous pouvez utiliser cet espace libéré à droite de la page pour le lien "FAQs". La solution consiste à adapter la disposition des blocs div selon la valeur d'une fonction php mosCountModules('right') qui est bien expliquée dans le tutoriel suivant.
2. Une autre solution au débordement du texte, est de laisser l'espace "droit" pour d'éventuels affichages et "centre" occupe uniquement les 430 px qui lui sont alloués initialement.
Adoptons, pour l'instant, cette dernière solution.
- 44 -
Généralement, il faut savoir choisir le style adéquat à paramétrer. C'est là où joue votre niveau de maitrise des langages html et css un rôle primordial. Une connaissance de la logique adoptée par joomla pour ses propres style css est également importante. Rassurez vous, vous n'êtes pas censés apprendre tout par coeur, on vous le rappelle une autre fois. Pour le cas présent, il s'agit d'un lien "FAQs" qui affiche un "Tableau - Catégorie de contenu". Joomla utilise un style "contentpane" pour afficher ce type de contenu. Allons voir cela dans l'arbre DOM de la Toolbar "IE Developper Toolbar".
"IE Developper Toolbar" étant lancé et "Select Element by Clic" selectionné, cliquez sur l'image des deux clefs dans votre page web:
En cliquant une seconde fois sur le niveau supérieur "<table class=contentpane>" dans l'arbre DOM, vous remarquez un cadre bleu qui entoure l'élément correspondant dans votre page web. C'est l'élément à paramétrer pour l'instant.
Exploitons une autre fonctionnalité de la Toolbar. Voyons cette fois ci comment tester avant d'apporter la modification au fichier css. Dans la zone centrale à droite de l'arbre DOM, saisir une nouvelle entrée en double-cliquant sur la case "Name". Saisir "Font-size" et une valeur "small" dans la case "Value" et appuyer sur "Entrée" pour valider. L'affichage s'améliore mais nécessite encore une retouche. Cliquer sur la zone de saisi "Filtre" dans votre page web. Nous savons d'avance qu'il s'agit d'un "Inputbox" mais nous voulons le confirmer grâce à l'arbre DOM:
Toujours, pour tester dans la même fenêtre, saisissez "Name"= "Font-size" et une valeur "Value"="x-small" et appuyer sur "Entrée" pour valider .
- 45 -
En admettant que la taille de police courante est la taille admissible pour le texte, vous pouvez ajuster la largeur du bloc "Centre". Voici les modifications (20 px de plus pour "centre" soustraits du bloc "droit") à apporter au fichier css:
#centre {
width:450px;
}
#droit {
width:135px;
}
Maintenant l'affichage est correcte:
Pour rendre vos modifications, testées dans la fenêtre de l'outil "IE Developper Toolbar", persistantes, ajouter les lignes suivantes à la fin de votre fichier css:
.contentpane {
font-size: small;
}
.inputbox {
font-size:x-small;
}
Vérifier maintenant le lien "Rechercher":
- 46 -
Un peu de bon sens , pour savoir exactement ce qu'il faut paramétrer. En fait, ayant déjà fait un cours html, on reconnait facilement un formulaire (<form>) avec un bouton (<button>) et des labels (<label>). Heureusement L'arbre DOM est là pour nous le confirmer et nous rappeler tout risque d'oubli. Cliquez donc sur le bouton "Rechercher", "IE Developper Toolbar" étant lancée et "Select Element by Clic" dans le menu selectionné.
La modification à apporter au fichier css est la suivante:
.button, label {
font-size:x-small;
}
En fusionnant cette modification avec celle d'avant on obtient:
.inputbox, .button, label {
font-size:x-small;
}
Sauvegarder votre fichier template_css.css et RAFRAICHISSEZ la page de votre site pour voir le résultat obtenu !
- 47 -
Maintenant, l'affichage semble être correct.
Texte de table.contentpanopen et table.moduletable
Essayons de justifier le texte du bloc contenu.
Vous vous rappelez bien qu'on a vu dans le tutoriel précédent "Création template" que l'affichage du bloc contenu et des blocs de module sont respectivement publiés grâce aux fonctions mosMainBody() et mosLoadModules()
Dans le paragraphe sur "les styles de publication", on avait signalé que pour $style=0, valeur par défaut, les modules sont affichés dans une colonne de tableau; un module par cellule. C'est ce que va nous révéler l'arbre DOM.
Cliquez sur le texte dans "Qui est en ligne ", vous repèrez facilement "table.moduletable td" pour paramétrer le texte des moduletables.
Cliquer sur le texte contenu dans le bloc "Centre". On repère "table.contentpaneopen td" à paramétrer pour la justification du texte. En effet td{} déjà utilisé a mis en position "left" tous les "td" de votre page web.
Voici la modification à apporter au fichier css :
.moduletable td {
font-size: small;
}
.contentpaneopen td {
color: #2B60DE; text-align: justify;
}
En cliquant sur des zones de texte dans le bloc "centre", vous répérez facilement les éléments correspondant:
- 48 -
• "td.contentheading" pour "Bienvenue sur Joomla!" ".small " pour " Écrit par Webmaster " "td.createdate" pour "12-06-2004" et enfin
• "td.modifydate" pour "Dernière mise à jour : ( 12-06-2004 ) "
Voici le complément de modification du fichier css :
td.contentheading {
color: green; font-size:large;
}
td.createdate, td.modifydate, .small {
color: #606a8a; font-size:x-small;
}
Sauvegarder votre fichier template_css.css et RAFRAICHISSEZ la page de votre site pour voir le résultat obtenu :
Les titres div.componentheading et td.sectiontableheader
Faites un parcours sur les autres liens du "Menu principal".
Vous allez repérer les titres pour "News", "Blog," "Flux Rss" ayant ce selecteur css "div.componentheading". On le choisit identique à "td.contentheading" paramétré précédemment. Donc le code modifié sera:
td.contentheading, div.componentheading {
color: green; font-size:large;
}
Dans la page "FAQs", essayons de paramétrer la ligne de titre du tableau affichant la liste des articles.
- 49 -
"Date Titre de la publication Auteur Clics"
L'arbre DOM, toujours, de l'outil "IE Developper Toolbar" est à votre service. Il s'agit du selecteur "td.sectiontableheader" à paramétrer. Voici le code :
td.sectiontableheader {
background-color: #F0FFF0; color: #808000;
}
Sauvegarder votre fichier template_css.css et RAFRAICHISSEZ la page de votre site pour voir le résultat obtenu dans votre navigateur.
Couleur de fond de l'éditeur des articles
Supposons que vous changez le fond d'écran pour toute la page de votre site moyennant le proprièté css suivante:
body {
background: #637579;
}
En essayant d'ajouter ou de modifier vos articles joomla 1.0 avec l'éditeur par défaut (éditeur WYSIWYG TinyMCE), vous constatez que le fond d'écran de la zone d'édition est coloré (héritée de la couleur par défaut du selecteur de balise "body{}") :
Pour votre confort, adoptez une couleur blanche pour ce fond de page en insérant le code css suivant dans le fichier template_css.css:
.mceContentBody{
background: white;
}
- 50 -
Sauvegardez vos fichiers et actualisez la page d'édition dans votre navigateur pour que les changements prennent effet. Pour Mozilla Firefox, une actualisation de la page est généralement suffisante, tandis que pour Internet Explorer, vous êtes parfois obligés de supprimer l'historique de navigation pour que tout soit remis dans l'ordre.
Conclusion
En résumé, la personnalisation d'un template, comme vous l'avez constaté, consiste à repérer :
• d'une part, les blocs div utilisés dans le fichier index.php et leur disposition, ainsi que les modules joomla qui y sont affichés.
• et d'autre part les syles propres à joomla du fichier template_css.css et les éléments auxquels ils correspondent dans vos pages web pour pouvoir les modifier à votre grè.
En tant que webmaster, il vous appartient, en cas de besoin, de modifier avec une parfaite maitrise, les deux fichiers index.php et template_css.css. C'est l'objectif du tutoriel suivant qui vous apprend à concevoir un template complet pour votre site joomla 1.0
Une version du tutoriel pour joomla 1.5 est également disponible et enrichie de nouvelles fonctionalités, étant donné que les deux versions ne sont pas compatibles.
Sécurité de votre PC Configuration de votre ordinateur
Pour commencer votre projet de conception web avec le cms joomla, en toute sérénité, vous devez préparer votre ordinateur personnel.
Pourquoi la configuration de votre ordinateur est elle placée à la tête de liste des tâches à réaliser?
Parce que, tout simplement, c’est votre ordinateur dont il faut préserver la pérennité de fonctionnement et c’est votre moyen de travail sans lequel vous ne pouvez absolument rien faire.
Il vous appartient de réduire au maximum les temps d’interruption entre pannes, minimiser les arrêts de service et se mettre à l’abri des virus et intrusions malveillantes : « Mieux vaut prévenir que guérir ».
Sécurité informatique
Voici les éléments à satisfaire pour un minimum de sécurité:
• Si votre PC n’est pas assez performant, il est temps de le changer, de préférence, par un ordinateur portable de bonne configuration.
• Après installation du système d’exploitation Windows, n’oubliez surtout pas de planifier une mise à jour automatique et régulière à partir du site web Windows Update (pour un autre système d'exploitation, linux, macos ou autre, des actions similaires s'imposent)
• Activer le Par-feu Windows qui sécurise votre ordinateur et le protège contre les accès externes non autorisés. • Installer un antivirus et en planifier la mise à jour automatique et régulière. Choisissez un antivirus
professionnel qui a fait ses preuves (Kaspersky ou Norton de Symantec). • Prendre l’habitude de ne plus accèder à votre PC via un utilisateur ayant le pouvoir administrateur. Créer pour
cela un compte utilisateur avec des privilèges restreints. C’est le compte que nous vous recommandons de toujours utiliser. Le compte administrateur sera réservé aux opérations d’administration telles que l’installation de logiciels.
Une fois, votre ordinateur installé et bien configuré, vous pouvez commencer votre projet web en toute tranquillité. http://www.apprendre-joomla.com/
- 51 -
Modifier les mentions légales (mod_footer) sur Joomla! 1.5 Web - Joomla!
Joomla! propose nativement un module Pied de page qui permet d'afficher les informations relatives au copyright de votre site ainsi qu'une ligne concernant la licence sous laquelle Joomla! est distribué, à savoir la GNU GPL. Par défaut, le pied de page apparaît ainsi (ce qui est en italique ici est bien évidemment remplacé par l'année en cours et le nom de votre site) : Copyright © Année Nom du site. Tous droits réservés. Joomla! est un logiciel libre sous licence GNU/GPL.
Nous allons voir ici comment modifier ces informations sous Joomla! 1.5.
Pour modifier les informations affichées par défaut par défaut par Joomla!, il faut modifier au moins un fichier. En effet, le texte affiché se trouve dans les fichiers de langue de Joomla! ; si l'on s'en tient au français, il faut modifier le fichier fr-FR.mod_footer.ini qui se trouve dans le répertoire /language/fr-FR. Voilà à quoi doit ressembler votre fichier (j'ai fait abstraction des commentaires) :
FOOTER=Pied de page FOOTER_LINE1=Copyright © %date% %sitename%. Tous droits réservés. FOOTER_LINE2=<a href="http://www.joomla.org">Joomla!</a> est un logiciel libre sous <a href="http://www.gnu.org/licenses/gpl-2.0.html">licence GNU/GPL.</a> MOD_FOOTER=<em>mod_footer</em> THIS MODULE SHOWS THE JOOMLA! COPYRIGHT INFORMATION=Ce module affiche les infos du copyright de Joomla
Les informations affichées par défaut se trouve aux deuxième et troisième lignes de cet extrait de code, introduites par FOOTER_LINEX, où X est l'identifiant de la ligne. Ainsi vous pouvez modifier le contenu à votre guise, en ayant à l'esprit que vous pouvez utiliser du code HTML. Si vous n'avez pas besoin d'ajouter de nouvelles lignes, il vous suffit de sauvegarder le fichier modifié et de le renvoyer sur votre serveur et c'est tout. La marche à suivre est la même si vous voulez modifier ces informations pour une autre langue que le français.
Par contre, si vous avez besoin d'ajouter de nouvelles lignes, voilà la marche à suivre
1. pour ajouter une nouvelle ligne, il faut utiliser la syntaxe suivante :
FOOTER_LINE3=Mon texte FOOTER_LINE4=Mon texte - Le retour
Vous pouvez utiliser autant de lignes que vous souhaitez mais il ne faut pas oublier qu'il s'agit des mentions légales, que l'on cherche généralement à faire discrète dans le pied de
- 52 -
- 53 -
page. Une fois les modifications faites, enregistrer ce fichier et mettez-le à jour sur votre serveur.
2. Il faut maintenantmodifier légèrement le module en lui-même, plus précisément le fichier default.php qui se trouve dans le répertoire /modules/mod_footer/tmpl. Voilà le contenu de ce fichier par défaut :
<?php // no direct access defined('_JEXEC') or die('Restricted access'); ?> <div><?php echo $lineone; ?></div> <div><?php echo JText::_( 'FOOTER_LINE2' ); ?></div>
Si nous avons modifié le fichier /language/fr-FR/fr-FR.mod_footer.ini comme dans notre exemple ci-dessus, il nous faudra alors modifier le fichier /modules/mod_footer/tmpl/default.php de la sorte :
<?php // no direct access defined('_JEXEC') or die('Restricted access'); ?> <div><?php echo $lineone; ?></div> <div><?php echo JText::_( 'FOOTER_LINE2' ); ?></div> <div><?php echo JText::_( 'FOOTER_LINE3' ); ?></div> <div><?php echo JText::_( 'FOOTER_LINE4' ); ?></div>
Il ne vous reste plus qu'à sauver ce fichier et à le mettre à jour sur votre serveur et vous pourrez alors vérifier sur votre site que tout fonctionne.
