Titre du sujet : Thème avec layout variable (1,2 ou 3 colonnes)
par olico sur 11/09/2006 18:24:41
Bonjour,
je suis actuellement dans la mise au point d'un thème pour Xoops.
Je travaille sur le thème "default" pour supprimer les balises <table> et n'utiliser que les balises <div> afin de simplifier le code du fichier theme.html et le rendre compatible W3C et CSS.
J'ai réussi à modifier le thème default en gardant l'apparence initiale.
Toutefois je me retrouve avec un petit problème sur le positionnement CSS entre les colonnes gauche/droite et la colonne centrale.
J'observe des chevauchements et des débordements du contenu des modules du cadre de ma page.
De plus j'aimerais aussi améliorer le thème par défaut afin que le bloc central utilise toute la place si je n'active aucune colonne de gauche et de droite.
voici mon fichier theme.html actuel :
<!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" xml:lang="<{$xoops_langcode}>" lang="<{$xoops_langcode}>">
<head>
<meta http-equiv="content-type" content="text/html; charset=<{$xoops_charset}>" />
<meta http-equiv="content-language" content="<{$xoops_langcode}>" />
<meta name="robots" content="<{$xoops_meta_robots}>" />
<meta name="keywords" content="<{$xoops_meta_keywords}>" />
<meta name="description" content="<{$xoops_meta_description}>" />
<meta name="rating" content="<{$xoops_meta_rating}>" />
<meta name="author" content="<{$xoops_meta_author}>" />
<meta name="copyright" content="<{$xoops_meta_copyright}>" />
<meta name="generator" content="XOOPS" />
<title>
<{if $xoops_pagetitle !=''}><{$xoops_pagetitle}> - <{/if}><{$xoops_sitename}>
</title>
<link href="<{$xoops_url}>/favicon.ico" rel="SHORTCUT ICON" />
<link rel="stylesheet" type="text/css" media="screen" href="<{$xoops_url}>/xoops.css" />
<link rel="stylesheet" type="text/css" media="screen" href="<{$xoops_themecss}>" />
<!-- RMV: added module header -->
<{$xoops_module_header}> <script type="text/javascript">
<!--
<{$xoops_js}>
//-->
</script>
</head>
<body>
<div id="conteneur">
<div id="header">
<div id="headerlogo">
</div>
<div id="headerbanner">
<{$xoops_banner}>
</div>
</div>
<div id="headerbar" colspan="2">
<!--appel de la navbar multimenu-->
<{foreach item=block from=$xoops_lblocks}> <{if $block.title == 'navbar'}> <{$block.content}> <{/if}> <{/foreach}>
</div>
<!-- test pour affichage éventuel de blocs dans la colonne gauche -->
<{if $xoops_showlblock == 1}>
<div id="leftcolumn">
<!-- Début de la boucle pour affichage des blocs dans la colonne de gauche -->
<{foreach item=block from=$xoops_lblocks}>
<!-- pour cacher la navbar en colonne de gauche-->
<{if $block.title != 'navbar'}> <{include file="xhtml/theme_blockleft.html"}> <{/if}> <{/foreach}>
<!-- Fin de la boucle pour affichage des blocs dans la colonne de gauche -->
</div>
<{/if}>
<!-- test pour affichage éventuel de blocs dans la colonne droite -->
<{if $xoops_showrblock == 1}>
<div id="rightcolumn">
<!-- Début de la boucle pour affichage des blocs dans la colonne de droite -->
<{foreach item=block from=$xoops_rblocks}> <{include file="xhtml/theme_blockright.html"}> <{/foreach}>
<!-- Fin de la boucle pour affichage des blocs dans la colonne de droite -->
</div>
<{/if}>
<!-- fin du test pour affichage éventuel de blocs dans la colonne droite -->
<div id="centercolumn">
<!-- Test pour vérifier s'il faut afficher des blocs au centre de la page -->
<{if $xoops_showcblock == 1}>
<div id="centerCcolumn">
<!-- Début de la boucle pour affichage des blocs centrés dans la colonne du milieu -->
<{foreach item=block from=$xoops_ccblocks}> <{include file="xhtml/theme_blockcenter_c.html"}> <{/foreach}>
<!-- Fin de la boucle pour affichage des blocs centrés dans la colonne du milieu -->
</div>
<div id="centerLcolumn">
<!-- Début de la boucle pour affichage des blocs centrés-gauche dans la colonne du milieu -->
<{foreach item=block from=$xoops_clblocks}> <{include file="xhtml/theme_blockcenter_l.html"}> <{/foreach}>
<!-- Fin de la boucle pour affichage des blocs centrés-gauche dans la colonne du milieu -->
</div>
<div id="centerRcolumn">
<!-- Début de la boucle pour affichage des blocs centrés-droit dans la colonne du milieu -->
<{foreach item=block from=$xoops_crblocks}> <{include file="xhtml/theme_blockcenter_r.html"}> <{/foreach}>
<!-- Fin de la boucle pour affichage des blocs centrés-droit dans la colonne du milieu -->
</div>
<{/if}>
<!-- Fin du test sur l'affichage des blocs dans la colonne du milieu -->
<!-- Affichage du contenu du module actuel -->
<div id="content">
<{$xoops_contents}>
</div>
<!-- fin de l'affichage du contenu du module actuel -->
</div>
<div id="footerbar">
<{$xoops_footer}>
</div>
<!-- fin du conteneur -->
</div>
</body>
</html>
et le fichier style.css qui lui est associé :
body {color: black; background: white; margin: 0; padding: 0;}
table {width: 100%; margin: 5; padding: 5; font-size: small}
table td {padding: 0; border-width: 0; vertical-align: top; font-family: Verdana, Arial, Helvetica, sans-serif;}
a {color: #666666; text-decoration: none; font-weight: bold; background-color: transparent;}
a:hover {color: #ff6600;}
h1 {}
h2 {}
h3 {}
h4 {}
h5 {}
ul { margin: 2px; padding: 2px; list-style: decimal inside; text-align: left;}
li { margin-left: 2px; list-style: square inside; color: #2F5376}
input.formButton {}
.item {border: 1px solid #cccccc;}
.itemHead {padding: 3px; background-color: #2F5376; color: #FFFFFF;}
.itemInfo {text-align: right; padding: 3px; background-color: #efefef}
.itemTitle a {font-size: 130%; font-weight: bold; font-variant: small-caps; color: #ffffff; background-color: transparent;}
.itemPoster {font-size: 90%; font-style:italic;}
.itemPostDate {font-size: 90%; font-style:italic;}
.itemStats {font-size: 90%; font-style:italic;}
.itemBody {padding-left: 5px;}
.itemText {margin-top: 5px; margin-bottom: 5px; line-height: 1.5em;}
.itemText:first-letter {font-size: 133%; font-weight: bold;}
.itemFoot {text-align: right; padding: 3px; background-color: #efefef}
.itemAdminLink {font-size: 90%;}
.itemPermaLink {font-size: 90%;}
th {background-color: #2F5376; color: #FFFFFF; padding : 2px; vertical-align : middle; font-family: Verdana, Arial, Helvetica, sans-serif;}
#conteneur {
margin:0 auto;
background-color: white;
}
#header {
height: 80px;
background-color: #2F5376;
}
#headerlogo {
background-image: url("images/logo.gif");
background-repeat: no-repeat;
width: 150px;
height: 80px;
float: left;
}
#headerbanner {width: 100%; background-color: #2F5376; vertical-align: middle; text-align:center;}
#headerbar {height: 20px; border-bottom: 1px solid #dddddd; background-image: url(images/hbar.gif);}
#leftcolumn {float: left;width: 170px; border-right: 1px solid #cccccc; font-size:12px;}
#leftcolumn th {background-color: #2F5376; color: #FFFFFF; vertical-align: middle;}
#leftcolumn div.blockTitle {padding: 3px; background-color: #dddddd; color: #639ACE; font-weight: bold;}
#leftcolumn div.blockContent {padding: 3px; line-height: 120%; line-height: 120%;}
#centercolumn {font-size: 12px;/*margin-left: 170px;
margin-right: 170px;*/}
#centercolumn th {background-color: #2F5376; color: #FFFFFF; vertical-align: middle;}
#centerCcolumn, #bottomCcolumn {padding: 0px 3px 1px 3px;}
#centerCcolumn .blockTitle, #bottomCcolumn .blockTitle {padding: 3px; color: #639ACE; font-weight: bold; margin-top: 0px; margin-right: 0px; margin-left: 0px;}
#centerCcolumn .blockContent, #bottomCcolumn .blockContent {border-left: 1px solid #cccccc; border-right: 1px solid #cccccc; border-bottom: 1px solid #dddddd; padding: 3px; margin-right: 0px; margin-left: 0px; margin-bottom: 2px; line-height: 120%;}
#centerLcolumn, #bottomLcolumn, #centerRcolumn, #bottomRcolumn {
width: 50%; padding: 0px 3px 0px 0px;
}
#centerLcolumn .blockTitle, #bottomLcolumn .blockTitle, #centerRcolumn .blockTitle, #bottomRcolumn .blockTitle {
padding: 3px; color: #639ACE; font-weight: bold; margin-top: 0px;
}
#centerLcolumn .blockContent, #centerRcolumn .blockContent, #bottomLcolumn .blockContent, #bottomRcolumn .blockContent {
border-left: 1px solid #cccccc; border-right: 1px solid #cccccc; border-bottom: 1px solid #dddddd; padding: 3px; margin-left: 2px; margin-right: 3px; margin-bottom: 2px; line-height: 120%;
}
#content {text-align: left; padding: 8px;}
#rightcolumn {float:right; width: 170px; border-left: 1px solid #cccccc; font-size:12px;}
#rightcolumn th {background-color: #2F5376; color: #FFFFFF; vertical-align: middle;}
#rightcolumn div.blockTitle {padding: 3px; background-color: #dddddd; color: #639ACE; font-weight: bold;}
#rightcolumn div.blockContent {padding: 3px; line-height: 120%;}
#footerbar {text-align:center; background-image: url(hbar.gif);}
td#mainmenu a {background-color: #e6e6e6; display: block; margin: 0; padding: 4px;}
td#mainmenu a:hover {background-color: #ffffff;}
td#mainmenu a.menuTop {padding-left: 3px; border-top: 1px solid silver; border-right: 1px solid #666666; border-bottom: 1px solid #666666; border-left: 1px solid silver;}
td#mainmenu a.menuMain {padding-left: 3px; border-right: 1px solid #666666; border-bottom: 1px solid #666666; border-left: 1px solid silver;}
td#mainmenu a.menuSub {padding-left: 9px; border-right: 1px solid #666666; border-bottom: 1px solid #666666; border-left: 1px solid silver;}
td#usermenu a {background-color: #e6e6e6; display: block; margin: 0; padding: 4px; border-right: 1px solid #666666; border-bottom: 1px solid #666666; border-left: 1px solid silver;}
td#usermenu a:hover {background-color: #ffffff;}
td#usermenu a.menuTop {border-top: 1px solid silver;}
td#usermenu a.highlight {background-color: #fcc;}
.outer {border: 1px solid silver;}
.head {background-color: #c2cdd6; padding: 5px; font-weight: bold;}
.even {background-color: #dee3e7; padding: 5px;}
.odd {background-color: #E9E9E9; padding: 5px;}
.foot {background-color: #c2cdd6; padding: 5px; font-weight: bold;}
tr.even td {background-color: #dee3e7; padding: 5px;}
tr.odd td {background-color: #E9E9E9; padding: 5px;}
div.errorMsg { background-color: #FFCCCC; text-align: center; border-top: 1px solid #DDDDFF; border-left: 1px solid #DDDDFF; border-right: 1px solid #AAAAAA; border-bottom: 1px solid #AAAAAA; font-weight: bold; padding: 10px;}
div.confirmMsg { background-color: #DDFFDF; color: #136C99; text-align: center; border-top: 1px solid #DDDDFF; border-left: 1px solid #DDDDFF; border-right: 1px solid #AAAAAA; border-bottom: 1px solid #AAAAAA; font-weight: bold; padding: 10px;}
div.resultMsg { background-color : #CCCCCC; color: #333333; text-align: center; border-top: 1px solid silver; border-left: 1px solid silver; font-weight: bold; border-right: 1px solid #666666; border-bottom: 1px solid #666666; padding: 10px;}
div.xoopsCode { background: #FFFFFF; border: 1px inset #000080; font-family: "Courier New",Courier,monospace; padding: 0px 6px 6px 6px;}
div.xoopsQuote { background: #FFFFFF; border: 1px inset #000080; font-family: "Courier New",Courier,monospace; padding: 0px 6px 6px 6px;}
.comTitle {font-weight: bold; margin-bottom: 2px;}
.comText {padding: 2px;}
.comUserStat {font-size: 10px; color: #2F5376; font-weight:bold; border: 1px solid silver; background-color: #ffffff; margin: 2px; padding: 2px;}
.comUserStatCaption {font-weight: normal;}
.comUserStatus {margin-left: 2px; margin-top: 10px; color: #2F5376; font-weight:bold; font-size: 10px;}
.comUserRank {margin: 2px;}
.comUserRankText {font-size: 10px;font-weight:bold;}
.comUserRankImg {border: 0;}
.comUserName {}
.comUserImg {margin: 2px;}
.comDate {font-weight: normal; font-style: italic; font-size: smaller}
.comDateCaption {font-weight: bold; font-style: normal;}
Attention:
- j'ai déplacé les images du dossier "default" dans un dossier "images"
- j'ai aussi crée une surcharge du template pour "multimenu_dyn_horiz_css.html" dans mon dossier de thème.
J'ai un peu creusé du côté du thème zetareticuli mais celui-ci est trop complexe pour moi, ceci dit, il integre la fonction que je cherche :
obtenir une colonne centrale sur toute la largeur s'il n'y a ni colonne de droite ni colonne de gauche.
N.B. voici les infos XoopsInfo de mon environnement :
Url du site : http://localhost
Version de Xoops : XOOPS 2.0.15
Thème Xoops : default
Jeu de templates : default
Version PHP : 4.4.1
Version MySQL : 4.0.27-standard-log
Logiciel serveur : Apache/1.3.33 (Darwin) PHP/4.4.1
Statut safe mode : OFF
Register Globals : OFF
Navigateur : Mozilla/5.0 (Macintosh; U; PPC Mac OS X; fr) AppleWebKit/418.8 (KHTML, like Gecko) Safari/419.3
Support librairie GD : Désactivé (vignettes non disponibles)
Statut d'upload du serveur : ON
Taille maximum d'upload autorisée :
Merci de votre attention à très vite
--
olico
|
