Vu pour l'image.
Tu dois d'abord placer l'image dans le répertoire 'images' du template 'water-drop';
Ensuite il faut modifier 2 scripts dans le template (faire par sécurité une copie des 2 scripts avant les modifications) :
Script style.css:
1) J'ai ajouté 1 ligne dans la déclaration du body (width: 75%) car la largeur de ton site est d'environ 75% (déclaré dans la configuration du site);
2) J'ai ajouté une nouvelle déclaration 'logo' pour l'affichage de l'image; je donne les explications de chaque ligne de la déclaration ce qui te permettra d'ajuster au besoin;
body {
background: url("images/bg.gif");
background-color: #F2F5F7;
font-family: "Trebuchet MS", Verdana, Geneva, Arial, sans-serif;
font-size : 12px;
color: #000666;
margin: 0px auto;
width: 75%;
}
/******************************************************************************
Présentation du logo dans le template.html :
background => url de l'image à afficher
no-repeat = pour l'afficher 1 fois
center = pour afficher l'image au centre de la cellule
background-color => couleur de fond car l'image ne prends pas toute la largeur
width et height => taille de l'image à afficher
*******************************************************************************/
#logo {
background: url("images/ladygaga.jpg") no-repeat center;
background-color: #F2F5F7;
width: 300px;
height: 170px;
}
Script template.html
Je donne ici toute la partie 'body' à recopier à la place de l'original dans le script.
<body>
{CUSTOM_HEADER}
<table width="100%" border="0" cellpadding="20" cellspacing="20">
<tr>
<td valign="top" style="border: 1px solid #CCD7E0; background-color: #FFFFFF;">
<!-- Partie modifiée pour afficher l'image et afficher le menu SOUS l'image -->
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<!-- L'image sera centrée grace à la déclaration dans le css -->
<td id="logo" width="100%">
<!-- Le titre et description seront affichés à gauche hors image pour être lisibles -->
<h1>{GAL_NAME}</h1>
<h3>{GAL_DESCRIPTION}</h3>
</td>
<!-- On déplace le menu sous l'image -->
<tr>
<td width="100%" align="center">{SYS_MENU}<br />{SUB_MENU}</td>
</tr>
</table>
<!-- Fin de la partie réservée à l'image et au menu -->
<img src="images/spacer.gif" width="1" height="15" alt="" />
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td valign="top">
{ADMIN_MENU}
{MESSAGE_BLOCK}
{GALLERY}
</td>
</tr>
</table>
</td>
</tr>
</table>
{CUSTOM_FOOTER}{CREDITS}
</body>
La présentation reste simple mais fonctionnelle.
Si toutefois tu dois changer de thème, tu dois faire les mêmes modifications sur l'autre thème choisi (image + style.css + template.html)
A toi de jouer pour le reste !
Pierre
Author
Topic: Modifié le nom et le design (Read 8640 times)