Fork me on GitHub




(1) 2 »


Xoopser un template xhtml/css en moins de 10mn
Xoops accro
Inscrit: 04/02/2003 01:54
De Le Mans
Messages: 12273
Suite à la publication de cet article , je pense que les questions complémentaires ne manqueront pas.

Posté le : 10/07/2005 23:36
Partager Twitter Partagez cette article sur GG+
Re: Xoopser un template xhtml/css en moins de 10mn
Semi pro
Inscrit: 23/02/2004 09:00
De guyancourt (78)
Messages: 586
Je n'ai pas pris le temps de tester encore, mais l'article est trés didactique et va aider plus d'un xoopssien pour créer son thème. Merci pour le travail de vulgarisation.

Posté le : 11/07/2005 07:28
Partager Twitter Partagez cette article sur GG+
Re: Xoopser un template xhtml/css en moins de 10mn
Semi pro
Inscrit: 05/06/2004 14:25
Messages: 750
effectivement très bon tutoriel :)
les tuto pour créer des tempaltes xhtml sont nombreux sur le net, il ne manquait plus que ce tuto !
merci :) :banana:

Posté le : 11/07/2005 13:26
Partager Twitter Partagez cette article sur GG+
Re: Xoopser un template xhtml/css en moins de 10mn
Régulier
Inscrit: 14/06/2004 13:20
Messages: 374
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}>" />
<!-- 
RMVadded module header -->
<{
$xoops_module_header}>
<
script type="text/javascript">
<!--
<{
$xoops_js}>
//-->
</script>
</head>
  <body>
    <div id="conteneur">
      <div id="header">
        <div id="logo">&nbsp;</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:VerdanaArialHelveticasans-serif;
font-size0.8em;
margin0;
padding0;
}
#header {
height50px;
background-color#99CCCC;
}
#haut {
height30px;
background-color:#CCCCFF;
}
#conteneur {
positionabsolute;
width100%;
background-color:#CCCCFF;
}
#centre {
background-color:#9999CC;
margin-left150px;
margin-right150px;
}
#centregauche {
background-color:#9999CC;
margin-left150px;
margin-right150px;
}
#centredroite {
background-color:#9999CC;
margin-left150px;
margin-right150px;
}
#gauche {
float:left;
width150px;
}
#droite {
float:right;
width150px;
}
#pied {
clear:both;
height30px;
background-color#99CC99;
}
#menuhaut {
list-style-typenone;
margin0;
padding:0;
}
#menuhaut li {
displayinline;
}
#menuhaut a {
margin0 2px;
color#000000;
text-decorationunderline;
}
#menuhaut a:hover {
text-decorationnone;
}
#menugauche {
list-style-typenone;
margin0;
padding:0;
}
#menugauche li {
margin-bottom5px;
}
#menugauche a {
margin0 2px;
color#000000;
text-decorationunderline;
}
#menugauche a:hover {
text-decorationnone;
}
#menudroit {
list-style-typenone;
margin0;
padding:0;
}
#menudroit li {
margin-bottom5px;
}
#menudroit a {
margin0 2px;
color#000000;
text-decorationunderline;
}
#menudroit a:hover {
text-decorationnone;
}
{margin0 0 10px 0;}
/*]]>*/
body {colorblackbackgroundwhitemargin0padding0;}

table {width100%; margin5padding5font-sizesmall}
table td {padding0border-width0vertical-aligntopfont-familyVerdanaArialHelveticasans-serif;}

{color#666666; text-decoration: none; font-weight: bold; background-color: transparent;}
a:hover {color#ff6600;}

h1 {}
h2 {}
h3 {}
h4 {}
h5 {}
ul margin2pxpadding2px; list-styledecimal insidetext-alignleft;}
li margin-left2px; list-stylesquare insidecolor#2F5376}

input.formButton {}

.
item {border1px solid #cccccc;}
.itemHead {padding3pxbackground-color#2F5376; color: #FFFFFF;}
.itemInfo {text-alignrightpadding3pxbackground-color#efefef}
.itemTitle a {font-size130%; font-weightboldfont-variantsmall-capscolor#ffffff; background-color: transparent;}
.itemPoster {font-size90%; font-style:italic;}
.
itemPostDate {font-size90%; font-style:italic;}
.
itemStats {font-size90%; font-style:italic;}
.
itemBody {padding-left5px;}
.
itemText {margin-top5pxmargin-bottom5pxline-height1.5em;}
.
itemText:first-letter {font-size133%; font-weightbold;}
.
itemFoot {text-alignrightpadding3pxbackground-color#efefef}
.itemAdminLink {font-size90%;}
.
itemPermaLink {font-size90%;}

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 {border1px 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-weightboldmargin-bottom2px;}
.
comText {padding2px;}
.
comUserStat {font-size10pxcolor#2F5376; font-weight:bold; border: 1px solid silver; background-color: #ffffff; margin: 2px; padding: 2px;}
.comUserStatCaption {font-weightnormal;}
.
comUserStatus {margin-left2pxmargin-top10pxcolor#2F5376; font-weight:bold; font-size: 10px;}
.comUserRank {margin2px;}
.
comUserRankText {font-size10px;font-weight:bold;}
.
comUserRankImg {border0;}
.
comUserName {}
.
comUserImg {margin2px;}
.
comDate {font-weightnormalfont-styleitalicfont-sizesmaller}
.
comDateCaption {font-weightboldfont-stylenormal;}

#logo {
    
background-imageurl("images/logo.gif");
    
background-repeatno-repeat;
    
width90px;
    
height90px;
    
floatleft;
}


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.

Posté le : 24/07/2005 15:42

Edité par baronxoops sur 24/07/2005 18:09:00

Baronxoops d'accord, mais loin d'être le roi
Partager Twitter Partagez cette article sur GG+
Re: Xoopser un template xhtml/css en moins de 10mn
Régulier
Inscrit: 04/02/2003 11:32
De wdforge.org
Messages: 285
Christian, je n'ai qu'un seul mot : A l'AIDE !!!!


En effet j'applique simplement ce thème sur un site xoops 2.0.12 et si tout est parfait en Firefox... avec IE c'est la catastrophe.

je n'tuilise que la colonne de droite, j'ai donc coupé le code relatif à la colonne gauche.

Pas de problèmes avec la page d'entête mais dès qu'on attaque un module dont la page contenant une table, la droite et soit dessus sois dessous la colonne centre selon l'odre dans theme.html !!!

j'ai beu jouer avec les 'lmites' des marges/float pour tenir compte des calculs en px IE rien à faire.

je fournis sur le champ tout ce qui peu aider à visualiser/corriger ce problème. En effet si cela est réglé je pourrai publier un début de travail sur une gamme de manu horizontaux en full css

Posté le : 03/11/2005 19:16
Partager Twitter Partagez cette article sur GG+
Re: Xoopser un template xhtml/css en moins de 10mn
Supporter Xoops
Inscrit: 24/11/2004 07:56
De Marseillan - Cap d'Agde
Messages: 687
Salut Romu ,

Peux-tu mettre un lien vers le theme en question pour qu'on puisse faire des tests avec

Posté le : 03/11/2005 19:57

Cordialement
Denis
Open in new window
Partager Twitter Partagez cette article sur GG+
Re: Xoopser un template xhtml/css en moins de 10mn
Xoops accro
Inscrit: 04/02/2003 01:54
De Le Mans
Messages: 12273
Je vois pas trop où se situe le problème, en effet à partir des fichiers téléchargeables sur l'exemple que j'ai donné, j'ai réalisé les modifications suivantes pour ne pas afficher la colonne de gauche :

1)theme.html
suppression de l
<div id="gauche">
  <!-- 
Start left blocks loop -->
  <{foreach 
item=block from=$xoops_lblocks}>
       <{include 
file="xhtml/theme_blockleft.html"}>
  <{/foreach}>
  <!-- 
End left blocks loop -->
</
div>

ajout de l'affichage du contenu de la colonne gauche dans la colonne droite, ce qui donne :
<div id="droite">
<!-- 
Start left blocks loop -->
  <{foreach 
item=block from=$xoops_lblocks}>
      <{include 
file="xhtml/theme_blockleft.html"}>
  <{/foreach}>
<!-- 
End left blocks loop -->
        
<!-- 
Start right blocks loop -->
  <{foreach 
item=block from=$xoops_rblocks}>
      <{include 
file="xhtml/theme_blockright.html"}>
  <{/foreach}>
  <!-- 
End right blocks loop -->
</
div>
<
div id="centre">
....


2)style.css
j'ai juste modifié l'attribut de l'id centre pour lui mettre une marge à gauche de 5px au lieu de 150px

Testé avec le module news 1.42 sur une 2.0.13.2 j'ai pas rencontré de souci.

Les fichiers joints vous permettront de tester.

Attacher un fichier:


zip xhtml_coldroite.zip Taille: 7.14 KB; Hits: 342

Posté le : 03/11/2005 20:29
Partager Twitter Partagez cette article sur GG+
Re: Xoopser un template xhtml/css en moins de 10mn
Supporter Xoops
Inscrit: 24/11/2004 07:56
De Marseillan - Cap d'Agde
Messages: 687
Salut ,

Romu j'utilise le jeu d'essai de Christian sans probleme .
Par contre faudrait voir le tien .
A part les 600 Notices habituelles j'ai juste une petite anomalie avec la liste deroulante du theme qui depasse un peu du bord droit , mais cette liste depasse souvent dans les themes de 800 de large .
Pour le reste , tout se cadre correctement .

Posté le : 03/11/2005 23:43

Cordialement
Denis
Open in new window
Partager Twitter Partagez cette article sur GG+
Re: Xoopser un template xhtml/css en moins de 10mn
Supporter Xoops
Inscrit: 24/11/2004 07:56
De Marseillan - Cap d'Agde
Messages: 687
OOPS j'ai parlé trop vite .
Sur Firefox ca marche correctement mais pas sous IE ou la colonne de droite recouvre la partie centrale de 30 pixels au moins .

Posté le : 03/11/2005 23:53

Cordialement
Denis
Open in new window
Partager Twitter Partagez cette article sur GG+
Re: Xoopser un template xhtml/css en moins de 10mn
Régulier
Inscrit: 04/02/2003 11:32
De wdforge.org
Messages: 285
Désolé de vous contredire mais (toujours en IE6) dès que j'ai un module utilisant une table dans le bloc content, le contenu déscent toujours en dessous du contenu de la colonne gauche :

HHHHHHH
LLL
LLL
CCCC
CCCC
CCCC
CCCC
FFFFFFF


j'ai enlevé le margin sur le tables, adapté celui des blocs content/righ...

Posté le : 04/11/2005 08:06
Partager Twitter Partagez cette article sur GG+

 Haut   Précédent   Suivant
(1) 2 »



Vous pouvez voir les sujets.
Vous ne pouvez pas débuter de nouveaux sujets.
Vous ne pouvez pas répondre aux contributions.
Vous ne pouvez pas éditer vos contributions.
Vous ne pouvez pas effacez vos contributions.
Vous ne pouvez pas ajouter de nouveaux sondages.
Vous ne pouvez pas voter en sondage.
Vous ne pouvez pas attacher des fichiers à vos contributions.
Vous ne pouvez pas poster sans approbation.

Propulsé avec XOOPS | Graphisme adapté par Tatane, Grosdunord, Montuy337513

90 Personne(s) en ligne (72 Personne(s) connectée(s) sur Forum) | Utilisateur(s): 0 | Invité(s): 90 | Plus ...