|
|
|
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<head>
<link rel="shortcut icon" href="{favicon}" >
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta name="DESCRIPTION" content="{description}">
<meta name="KEYWORDS" content="{keyword}">
<meta name="COPYRIGHT" content="{copyright}">
<meta name="GENERATOR" content="{generator}">
<meta name="RESOURCE-TYPE" content="DOCUMENT">
<meta name="DISTRIBUTION" content="GLOBAL">
<meta name="AUTHOR" content="Rene Boulard">
<meta name="ROBOTS" content="INDEX, FOLLOW">
<meta name="REVISIT-AFTER" content="30 DAYS">
<meta name="RATING" content="GENERAL">
</head>
<body>
<form>
<div align="center">
<table width=780 cellpadding="0" cellspacing="0" class="MainBorder">
<tr valign="top">
<td align="left">
{banner}
<div class="menu">
{tabmenu}
</div>
<table style="height: 100%" width="100%" cellpadding="0" cellspacing="0" border="0">
<tr valign="top">
<td>
<table width="100%" border="0">
<tr valign="top">
<td class="LeftPane">{leftspacer}{leftpane}</td>{leftline}
<td class="ContentPane" width="100%">{contentpane}</td>{rightline}
<td class="RightPane">{rightspacer}{rightpane}</td>
</tr>
</table></td>>/tr>
<tr valign="bottom">
<td>{footer}</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</form>
</body>
</HTML> |
|
|
| Pour modifier l'apparence de votre site vous avez deux fichiers que vous pouvez modifier. Le fichier Portail.CSS et le fichier menu.tpl1.js. Vous trouverez ces fichiers dans votre répertoire racine de votre portail. De plus si vous utilisez le forum et la galerie vous pourrez adapter leurs styles dans le fichier ttt.css. Je vous invite à utiliser un éditeur de style css pour modifier les fichiers css. Vous pouvez facilement trouver ce type d'éditeur sur l'internet. J'utilise acehtml, ce logiciel est disponible en version partagiciel. |
Haut de page
#banner {text-align: left; background: ivory} - Style pour toute la section haut de page
#logo {background: url(bk.jpg)} - Style pour la tranche horizontale du logo
.LogoImage {} - Style pour l'image logo mettre width et height pour accélérer l'affichage
#BreadCrumb {background: #f5f5f5;} - pour positioner le menu alternatif
.bread {font-size: 8px; color: gray; font-family: Wingdings 3} - pour le menu alternatif
|
Panneau Gauche
.LeftPane { } |
Panneau Central
.ContentPane { }
td.line { } - pour une séparation conditionnelle entre les panneaux |
Panneau Droite
.RightPane { } |
Bas de page
#footer {width: 100%; text-align: center } - Pour la section bas de page
.A1 {color: #DCDCDC;}
.A2 {background: #FFFFF0}
div.a2 { border-bottom: Gray 1px solid; border-left: White 1px solid; border-top: White 1px solid; border-right: Gray 1px solid; width: 750}
|
Autres éléments d'importances de la page
- La table principale - Utiliser le paramètre CSS #maintable { } pour désigner un style qui englobera .leftpane .contentpane et .rightpane
- Le menu - Vous trouverez un fichier menu_tp1.js dans votre répertoire racine. Ce fichier détermine le paramètres d'affichages du menu. Pour changer la position du menu vous devez modifier block_top et block_left . Le menu est très flexible vous pouvez l'afficher ou vous voulez dans l'écran vertical ou horizontal. je vous invite à aller voir la documentation ici
- Le panneau d'administration - Pour le panneau d'administration utiliser le paramètre CSS .admin {z-index: 100; max-width: 370px; top:0; background: silver; border: thin dotted; padding: 4; position: absolute}
- Le panneau d'ouverture de session - Pour positionner le menu d'ouverture de session utiliser le paramètre CSS
#signin {position: absolute; background: ivory; top: 150px; right: 60px; z-index: 100; border: thin dotted black; width: 160px}
Un module
La structure de base d'un module est :
Utiliser la fonction "Modifier les paramètres du module" pour faire des modifications.
- Le paramètre [COLOR] injecte dans le module bgcolor="xxxxxx", vous devez utiliser des définitions de couleurs valide HTML.
- Le paramètre [ALIGN] injecte dans le module align="xxxxx", vous avez trois choix dans une liste.
- Le paramètre [BORDER] injecte dans le module border="xx".
- Le paramètre [CONTAINER] injecte l'info du module, tel que du texte ou tous autres choses que vous avez dans le module.
|
|
|
|
|
|
|
|
|
|