Titre du sujet : Re: Xoopser un template xhtml/css en moins de 10mn
par baronxoops sur 24/07/2005 15:42:14
Bien, bien, bien,
bon alors un premier plantage, je recommence et ce n'est toujours pas la panacée puisque je n'ai que la première ligne devant contenir le logo (qui n'apparait pas mais il y a la couleur quand même) et la ligne en-dessous du menu.
Les blocs n'apparaissent pas et le footer non plus.
voici mon code du fichier theme.html
je pense que c'est à cause de l'écriture des blocs du centre mais je ne sais pas quoi
<!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><{$xoops_sitename}> - <{$xoops_pagetitle}></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="logo"> </div>
</div>
<div id="haut">
<ul id="menuhaut">
<li><a href="<{$xoops_url}>/index.php" target="_self" title="Accueil">Menu déroulant</a></li>
<li><a href="<{$xoops_url}>/modules/news/" target="_self" title="Articles">Articles</a></li>
<li><a href="<{$xoops_url}>/modules/mylinks/" target="_self" title="Liens">Liens</a></li>
<li><a href="<{$xoops_url}>/modules/contact/" target="_self" title="Contact">Contact</a></li>
</ul>
</div>
<div id="gauche">
<!-- Début de la boucle pour affichage des blocs dans la colonne de gauche -->
<{foreach item=block from=$xoops_lblocks}>
<{include file="xhtml/theme_blockleft.html"}>
<{/foreach}>
</div>
</div>
<div id="droite">
<!-- 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}>
</div>
<div id="centregauche">
<!-- Début de la boucle pour affichage des blocs dans la colonne de centre gauche -->
<{foreach item=block from=$xoops_clblocks}>
<{include file="xhtml/theme_blockcenter_l.html"}>
<{/foreach}>
</div>
<div id="centrecentre">
<!-- Début de la boucle pour affichage des blocs dans la colonne de centre centre -->
<{foreach item=block from=$xoops_ccblocks}>
<{include file="xhtml/theme_blockcenter_c.html"}>
<{/foreach}>
</div>
<div id="centredroite">
<!-- Début de la boucle pour affichage des blocs dans la colonne de centre droite -->
<{foreach item=block from=$xoops_crblocks}>
<{include file="xhtml/theme_blockcenter_r.html"}>
<{/foreach}>
</div>
<div id="pied">
<{$xoops_footer}>
</div>
</div>
</body>
</html>
Voilà le fichier CSS
/*<![CDATA[*/
/* CSS issu des tutoriels css.alsacreations.com */
body {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
margin: 0;
padding: 0;
}
#header {
height: 50px;
background-color: #99CCCC;
}
#haut {
height: 30px;
background-color:#CCCCFF;
}
#conteneur {
position: absolute;
width: 100%;
background-color:#CCCCFF;
}
#centre {
background-color:#9999CC;
margin-left: 150px;
margin-right: 150px;
}
#centregauche {
background-color:#9999CC;
margin-left: 150px;
margin-right: 150px;
}
#centredroite {
background-color:#9999CC;
margin-left: 150px;
margin-right: 150px;
}
#gauche {
float:left;
width: 150px;
}
#droite {
float:right;
width: 150px;
}
#pied {
clear:both;
height: 30px;
background-color: #99CC99;
}
#menuhaut {
list-style-type: none;
margin: 0;
padding:0;
}
#menuhaut li {
display: inline;
}
#menuhaut a {
margin: 0 2px;
color: #000000;
text-decoration: underline;
}
#menuhaut a:hover {
text-decoration: none;
}
#menugauche {
list-style-type: none;
margin: 0;
padding:0;
}
#menugauche li {
margin-bottom: 5px;
}
#menugauche a {
margin: 0 2px;
color: #000000;
text-decoration: underline;
}
#menugauche a:hover {
text-decoration: none;
}
#menudroit {
list-style-type: none;
margin: 0;
padding:0;
}
#menudroit li {
margin-bottom: 5px;
}
#menudroit a {
margin: 0 2px;
color: #000000;
text-decoration: underline;
}
#menudroit a:hover {
text-decoration: none;
}
p {margin: 0 0 10px 0;}
/*]]>*/
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;}
td#headerbanner {width: 100%; background-color: #2F5376; vertical-align: middle; text-align:center;}
td#headerbar {border-bottom: 1px solid #dddddd; background-image: url(hbar.gif);}
td#leftcolumn {width: 170px; border-right: 1px solid #cccccc; font-size:12px;}
td#leftcolumn th {background-color: #2F5376; color: #FFFFFF; vertical-align: middle;}
td#leftcolumn div.blockTitle {padding: 3px; background-color: #dddddd; color: #639ACE; font-weight: bold;}
td#leftcolumn div.blockContent {padding: 3px; line-height: 120%; line-height: 120%;}
td#centercolumn {font-size: 12px;}
td#centercolumn th {background-color: #2F5376; color: #FFFFFF; vertical-align: middle;}
td#centerCcolumn {padding: 0px 3px 1px 3px;}
td#centerCcolumn legend.blockTitle {padding: 3px; color: #639ACE; font-weight: bold; margin-top: 0px; margin-right: 0px; margin-left: 0px;}
td#centerCcolumn div.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%;}
td#centerLcolumn {width: 50%; padding: 0px 3px 0px 0px;}
td#centerLcolumn legend.blockTitle {padding: 3px; color: #639ACE; font-weight: bold; margin-top: 0px;}
td#centerLcolumn div.blockContent {border-left: 1px solid #cccccc; border-right: 1px solid #cccccc; border-bottom: 1px solid #dddddd; padding: 3px; margin-left: 3px; margin-right: 2px; margin-bottom: 2px; line-height: 120%;}
td#centerRcolumn {width: 50%; padding: 0px 3px 0px 0px;}
td#centerRcolumn legend.blockTitle {padding: 3px; color: #639ACE; font-weight: bold; margin-top: 0px;}
td#centerRcolumn div.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%;}
div#content {text-align: left; padding: 8px;}
td#rightcolumn {width: 170px; border-left: 1px solid #cccccc; font-size:12px;}
td#rightcolumn th {background-color: #2F5376; color: #FFFFFF; vertical-align: middle;}
td#rightcolumn div.blockTitle {padding: 3px; background-color: #dddddd; color: #639ACE; font-weight: bold;}
td#rightcolumn div.blockContent {padding: 3px; line-height: 120%;}
tr#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;}
#logo {
background-image: url("images/logo.gif");
background-repeat: no-repeat;
width: 90px;
height: 90px;
float: left;
}
Voila
Merci
Edit :
Je vais commencer par remplacer le nom du fichier de tutorial xhtml par le mien et j'aurais un peu moins l'air ridicule.
Pour les boucles des blocs centraux j'examine d'autres scripts de thèmes mais je navigue un peu dans le brouillard.
|
