|
Page 19 sur 22
Package d'installation
Voyons maintenant comment créer le package d'installation du template:
Les fichiers constituant le dossier TemplatePro sont les suivants:
-
index.html, index.php, templateDetails.xml et template_thumbnail.png dans le dossier TemplatePro,
-
index.html et template_css.css dans le dossier css
-
index.html, et les images suivantes dans le dossier images:
Sauvegarder ces images dans le dossier images.
Fichier template_thumbnail.png
C'est une image miniature de votre template:
Sauveagrdez cette image dans votre dossier TemplatePro.
Pour le contenu des autres fichiers, ils sont listés dans les pages suivantes.
Créez ces fichiers à l'aide d'un éditeur de texte tel que notepad++.
Pour pouvoir tester votre template, assigner-le, comme décrit précédemment, en tant que template par défaut pour votre site web.
Fichier index.html
<html><body bgcolor="#FFFFFF"></body></html>
Ce fichier doit se trouver dans chaque répertoire du dossier template (TemplatePro, css et images)
Contenu du fichier templateDetails.xml
<?xml version="1.0" encoding="iso-8859-1"?>
<mosinstall type="template" version="1.0.0">
<name>TemplatePro</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.html</filename>
<filename>index.php</filename>
<filename>template_thumbnail.png</filename>
<filename>templateDetails.xml</filename>
<filename>images/index.html</filename>
<filename>css/index.html</filename>
</files>
<images>
<filename>images/arrow.jpg</filename>
<filename>images/h3.jpg</filename>
<filename>images/l_r_top1.jpg</filename>
<filename>images/l_r_bottom1.png</filename>
<filename>images/l_r_middle.png</filename>
<filename>images/content_top.jpg</filename>
<filename>images/content_bottom.jpg</filename>
<filename>images/soleil.gif</filename>
<filename>images/enhaut.gif</filename>
<filename>images/chevalier.gif</filename>
<filename>images/Banner.gif</filename>
</images>
<css>
<filename>css/template_css.css</filename>
</css>
</mosinstall>
Contenu du fichier index.php
<?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>
<div id="enhaut">
<div id="enhaut2">
<div id="enhaut3">
<div id="enhaut4"></div>
</div>
</div>
</div>
<div id="recherche"> <?php mosLoadModules ( 'user4' ); ?> </div>
<div id="contenu">
<div id="contenu2">
<div id="gauche"> <?php mosLoadModules ( 'left', -3); ?></div>
<?php if (mosCountModules('right')){ ?>
<div id="principal"><?php mosMainBody(); ?></div>
<div id="droit"><?php mosLoadModules ( 'right', -3 ); ?></div>
<?php } else { ?>
<div id="principal_full"><?php mosMainBody(); ?></div>
<?php } ?>
<div class="clr"></div>
</div>
</div>
<div id="enbas">
Ce site s'affiche mieux, en 1024*768 pixels, avec un navigateur conforme aux standards.
</div>
</body>
</html>
Contenu du fichier template_css.css
body {
width:100%;
font-family: Tahoma, Arial, Verdana, sans-serif;
margin: 0;
padding: 0;
font-size: 12px;
background: #637579;
text-align: center;
}
#enhaut{
background: transparent url(../images/enhaut.gif) top left repeat-x;
height:160px;
width:100%;
}
#enhaut2{
background:transparent url(../images/soleil.gif) left -40px no-repeat;
height:160px;
width:100%;
}
#enhaut3{
background: transparent url(../images/Banner.gif) center 0px no-repeat;
height:160px;
width:100%;
}
#enhaut4{
background: transparent url(../images/chevalier.gif) right center no-repeat;
height:160px;
width:100%;
}
#recherche {
margin: -30px auto 25px auto;
width:200px;
}
#contenu{
background: #fff url(../images/content_bottom.jpg) bottom center no-repeat;
width:980px;
margin:0 auto;
}
#contenu2 {
margin:0 auto;
padding:6px;
background: transparent url(../images/content_top.jpg) top center no-repeat;
}
#gauche, #droit {
float: left;
margin: 0;
padding: 0;
width: 201px;
text-align: center;
}
#principal {
float: left;
width: 550px;
padding:4px;
font-size:12px;
margin:4px;
text-align:left;
}
.clr {
clear: both;
font-size:0;
line-height:0;
}
#enbas {
margin: 0 auto;
width: 980px;
height: 20px;
vertical-align: top;
padding:10px 0 20px 0;
color:white;
}
#principal_full{
float: left;
width: 750px;
padding:4px;
margin:4px;
font-size:12px;
text-align:left;
}
p {
margin-top: 0;
margin-bottom: 5px;
text-align: justify;
}
td {
font-family: Arial,Helvetica,sans-serif;
color: #333;
}
a {
outline: none;
}
a:link, a:visited {
text-decoration: none;
font-weight: normal;
color: #929b43;
font-size:12px;
}
a:hover {
text-decoration: none;
font-weight: normal;
color: #929b43;
font-size:12px;
}
.moduletable {
margin: 0 auto;
}
#gauche div.module, #droit div.module {
margin:0 auto;
padding:0 0 10px 0;
text-align:center;
width:201px;
}
#gauche div.module div, #droit div.module div{
background: transparent url(../images/l_r_middle.png) center repeat-y;
padding:0;
margin:0;
}
#gauche div.module div div, #droit div.module div div {
background: transparent url(../images/l_r_bottom1.png) bottom center no-repeat;
padding:0;
margin:0;
}
#gauche div.module div div div, #droit div.module div div div {
background: url(../images/l_r_top1.jpg) top center no-repeat;
padding:0 0 10px 0;
margin:0;
}
#gauche .module div div div h3, #droit .module div div div h3 {
background: url(../images/h3.jpg) top center no-repeat;
font-size:12px;
font-family:Verdana, Tahoma, sans-serif;
font-weight:bold;
text-align:left;
height:30px;
line-height:30px;
margin:0 auto;
padding:0 0 5px 40px;
color:#fff;
}
a.mainlevel:link, a.mainlevel:visited {
margin: 0 0 0 10px;
padding: 0 0 0 20px;
line-height: 18px;
text-decoration: none;
color: #929b43;
font-weight: normal;
font-size: 12px;
font-family:Tahoma, Arial,sans-serif;
background: transparent url(../images/arrow.jpg) center left no-repeat;
}
a.mainlevel:hover {
color: #929b43;
background: transparent url(../images/arrow.jpg) center left no-repeat;
text-decoration: underline;
font-weight: normal;
}
a#active_menu.mainlevel:link, a#active_menu.mainlevel:visited {
color: #638c2e;
font-weight: bold;
}
#gauche div.module div div div table td{
padding:4px 0 0 0;
}
.sectiontableentry2, .sectiontableentry1 {
font-size: 11px;
text-align:left;
padding:2px;
}
.button {
background:#82ac40;
color: #fff;
font-size: 11px;
cursor:pointer;
font-family: Tahoma, Arial, sans-serif;
margin:5px 0 5px 0;
padding:0 5px 2px 5px;
height:22px;
line-height:20px;
border:none;
}
#gauche div.module form {
text-align:center;
margin:0 auto;
font-size:12px;
font-family:Tahoma, Verdana, sans-serif;
color:#ab854c;
width:170px;
}
table.contentpaneopen td {
line-height: 14px;
font-size:12px;
text-align:justify;
}
table.contentpaneopen td.contentheading {
font-family: Tahoma, Arial, Verdana, sans-serif;
font-size: 12px;
vertical-align: middle;
color: #929b43;
font-weight: bold;
padding: 0;
margin:0;
}
.small {
font-size: 10px;
color: #929b43;
font-weight: normal;
text-align: left;
}
table.contentpaneopen td.createdate {
height: 20px;
vertical-align: top;
font-size: 10px;
color: #929b43;
font-weight: normal;
padding-top: 0px;
text-align:left;
}
table.contentpaneopen td.modifydate {
height: 20px;
vertical-align: top;
font-size: 10px;
color: #929b43;
font-weight: normal;
padding-top: 0px;
text-align:right;
}
.componentheading {
margin: 0;
font-family: Verdana, Arial, Tahoma, sans-serif;
font-size: 12px;
text-align: left;
color: #929b43;
padding: 0 0 10px 0;
font-weight:bold;
}
.pagenav {
font-size:10px;
font-weight:normal;
}
.mceContentBody{
background: white;
}
Package d'installation
Une fois que vous avez créé l'arborescence de votre dossier template "TemplatePro" et l'assigner en tant que template par défaut pour votre site web pour le tester, vous pouver en créer un package d'installation à l'aide d'un utilitaire de compression tel que 7-zip
Sous windows, 7-Zip étant installé, vous accédez au dossier "TemplatePro" et vous sélectionnez tous ses fichiers et dossiers. Avec le bouton droit de la souris, vous choisissez dans le menu contextuel "7-zip" et puis l'option "Ajouter à TemplatePro.zip":
Le package .zip sera créé dans le dossier TemplatePro. Vous pouvez vous en servir pour installer le template via l'installateur joomla en accédant au menu "installation" ==> "Templates - site" dans la console d'administration du site
Tester le package d'installation .zip
- Conserver le package "TemplatePro.zip" dans un dossier de votre choix et supprimer le dossier template "TemplatePro"
- Accéder au menu "Installation" ==> "Templates-Site".
- Dans la zone "Fichier Package", entrer le fichier archive "TemplatePro.zip" avec le chemin d'accès et puis cliquez sur le bouton "Installer".
- Vous recevez un message accusant le succès de l'opération effectuée par l'installateur joomla.
- Vous constatez que le dossier template "TemplatePro" a été recréé automatiquement. Vous pouvez l'assigner en tant que template par défaut pour votre site web pour le tester.
N.B: Si vous rencontrez un message d'erreur avec le système linux ou unix :
"JInstaller::install: Le fichier '........../tmp/install_4b824fc2525f1/templateDetails.xml' n'existe pas",
sachez bien que le blocage est dû au système de permission de Linux/unix qui empêche l'extraction du fichier zip sur le dossier tmp dans une phase préliminaire à l'installation proprement dite.
Une solution simple consiste à extraire manuellement le fichier zip du template de votre choix dans un dossier "VotreTemplate" à placer ensuite dans le répertoire "templates" de votre site wed local ou distant.
|
