Je vois ça, c'est effectivement pas très esthétique.
La solution de facilité serait d'équilibrer autant que possible le contenu des blocs qui se font face. C'est à mon avis ce qu'avait en tête le créateur du thème ...
Si tu veux vraiment te lancer dans la modification du thème, voici les zones où intervenir :
• theme.html
<td id="centercolumn">
<!-- Display center blocks if any -->
<{if $xoops_showcblock == 1}>
<table cellspacing="0">
<tr>
<td id="centerCcolumn" colspan="2">
<!-- Start center-center blocks loop -->
<{foreach item=block from=$xoops_ccblocks}>
<{include file="flower_k/theme_blockcenter.html"}>
<{/foreach}>
<!-- End center-center blocks loop -->
</td>
</tr>
<tr>
<td id="centerLcolumn">
<!-- Start center-left blocks loop -->
<{foreach item=block from=$xoops_clblocks}>
<{include file="flower_k/theme_blockcenter.html"}>
<{/foreach}>
<!-- End center-left blocks loop -->
</td>
<td id="centerRcolumn">
<!-- Start center-right blocks loop -->
<{foreach item=block from=$xoops_crblocks}>
<{include file="flower_k/theme_blockcenter.html"}>
<{/foreach}>
<!-- End center-right blocks loop -->
</td>
</tr>
</table>
<{/if}>
<!-- End display center blocks -->
<div id="content">
<{$xoops_contents}>
</div>
<{if $xoBlocks.page_bottomleft or $xoBlocks.page_bottomright or $xoBlocks.page_bottomcenter}>
<table cellspacing="0">
<{if $xoBlocks.page_bottomcenter}>
<tr><td id="bottomCcolumn" colspan="2">
<{foreach from=$xoBlocks.page_bottomcenter item=block}><{include file="flower_k/theme_blockcenter.html"}><{/foreach}>
</td>
</tr>
<{/if}>
<{if $xoBlocks.page_bottomleft or $xoBlocks.page_bottomright}>
<tr>
<td id="bottomLcolumn">
<{foreach from=$xoBlocks.page_bottomleft item=block}><{include file="flower_k/theme_blockcenter.html"}><{/foreach}>
</td>
<td id="bottomRcolumn">
<{foreach from=$xoBlocks.page_bottomright item=block}><{include file="flower_k/theme_blockcenter.html"}><{/foreach}>
</td>
</tr>
<{/if}>
</table>
<{/if}>
</td>
• theme_blockcenter.html
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="blocks">
<tr>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0" >
<tr>
<td class="cornerTL"> </td>
<td class="cornerTC"> </td>
<td class="cornerTR"> </td>
</tr>
</table></td>
</tr>
<tr>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="cornerCL"><img src="<{$xoops_imageurl}>images/flow_04.jpg" alt="" width="27" height="198" /></td>
<td class="cornerCC">
<div>
<div class="blockTitle"><{$block.title}></div>
<img src="<{$xoops_imageurl}>images/1_line1.gif" width="200" height="8" alt="" />
<div class="blockContent"><{$block.content}></div>
</div>
</td>
<td class="cornerCR"><img src="<{$xoops_imageurl}>images/flow_06b.jpg" alt="" width="26" height="198" /></td>
</tr>
</table></td>
</tr>
<tr>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="cornerBL"> </td>
<td class="cornerBC"> </td>
<td class="cornerBR"> </td>
</tr>
</table></td>
</tr>
</table>
• style.css
#centercolumn {font-size: 12px;}
#centercolumn th {background-image: url(images/flower_05f.gif); color: #000000; vertical-align: middle;}
#centerCcolumn, #bottomCcolumn {padding: 3px 5px 1px;}
#centerCcolumn .blockTitle, #bottomCcolumn .blockTitle {padding: 1px;padding-left: 40px; color: #000000; font-weight: bold; margin-top: 0px; margin-right: 0px; margin-left: 0px;font-size: 115%}
#centerCcolumn .blockContent, #bottomCcolumn .blockContent {padding: 3px; margin-right: 0px; margin-left: 0px; margin-bottom: 2px; line-height: 120%;color: #000000}
#centerLcolumn, #bottomLcolumn, #centerRcolumn, #bottomRcolumn {
width: 50%; padding: 0px 3px 0px 5px;
}
#centerLcolumn .blockTitle, #bottomLcolumn .blockTitle, #centerRcolumn .blockTitle, #bottomRcolumn .blockTitle {
padding: 3px; color: #000000; font-weight: bold; margin-top: 0px;font-size: 115%;padding-left: 40px;
}
#centerLcolumn .blockContent, #centerRcolumn .blockContent, #bottomLcolumn .blockContent, #bottomRcolumn .blockContent {
padding: 3px; margin-left: 2px; margin-right: 3px; margin-bottom: 2px;color: #000000
}
...
.cornerTL {background-image: url(images/flow_01.jpg);height: 22px;width: 26px;
background-repeat: no-repeat;background-position: left;}
.cornerTC {background-image: url(images/flow_02.jpg);background-repeat: repeat-x;}
.cornerTR {background-image: url(images/flow_03.jpg);background-repeat: no-repeat;
background-position: right;height: 22px;width: 26px;}
...
.cornerCL {background-image: url(images/flow_04s.jpg);background-repeat: repeat-y;
background-position: left;width: 27px;vertical-align: top;}
.cornerCC {background-image: url(images/flow_05.gif);background-repeat: repeat-x;
background-position: top;}
.cornerCR {background-image: url(images/flow_06c.jpg);background-repeat: repeat-y;
background-position: right;width: 26px;vertical-align: top;}
Voila ce qui se passe avec ce thème :
• les blocs sont contenus dans un tableau maître, transparent (laissant apparaître la couleur de fond noire du thème)
• l'imbrication des blocs se fait par série dans les cellules du tableau maître (par exemple tous les blocs Top-Left sont empilés dans la même cellule)
• l'étirement des cellules (balise <td>) provoque nécessairement l'étirement de la ligne du tableau (balise <tr>)
• la mise en forme graphique porte directement sur le bloc (template theme_blockcenter.html), qui lui même est un tableau. Il s'auto-ajuste donc au contenu.
• pour uniformiser les blocs, il faut au final faire porter la mise en forme graphique sur les cellules du tableau maître et non pas sur les blocs eux-mêmes.
Bref, il y a du boulot : il faut revoir en partie la conception du canevas.
