Themes: Templates overriding : a small Tutorial

Posted by: alain01On 2006/9/23 21:50:00 13423 reads

Didactic Exemple # 1:

Customization of the template "comments block" (system_block_comments.html from system module)

0a) Test on your test server prior to making production changes.

0b) You must use XOOPS 2.0.14 version or greater, (or version 2.3.x).

0c) If you currently use a cloned template set, you must active the default template set in order to use Overriding.
In this case, you can download the custom templates from your cloned set in order to move them to the proper directories for overriding.

0d) Your block must be visible to see the modification of templates ! (for beginners)

1) First let's download the template block file:
admin system / templates / System list / line system_block_comments.html, [Download]/i]

<table width="100%" cellspacing="1" class="outer">
  <{foreach item=comment from=$block.comments}>
  <tr class="<{cycle values="even,odd"}>">
    <td align="center"><img src="<{$xoops_url}>/images/subject/<{$comment.icon}>" alt="" /></td>
    <td><{$comment.title}></td>
    <td align="center"><{$comment.module}></td>
    <td align="center"><{$comment.poster}></td>
    <td align="right"><{$comment.time}></td>
  </tr>
  <{/foreach}>
</table>


2) Let's modify the file you just downloaded and now have locally.
<table width="100%" cellspacing="1" class="outer">
  <{foreach item=comment from=$block.comments}>
            <tr class="<{cycle values="even,odd"}>">
                [color=FF0000]<td style="text-align: left; vertical-align: middle;">
                    <img src="<{$xoops_url}>/images/commentaires_ico_16.gif" alt="Commentaire" /> <{$comment.title}>
                    <div style="text-align:right"><br /><{$comment.module}> - <{$comment.time}> - <{$comment.poster}></div>
                </td>[/color]
            </tr>
  <{/foreach}>
</table>


3) If my theme is 7dana-soft, via ftp, go to the directory
/themes/dana-soft Let's create the directory modules then down and create directory system then down and create directory blocks

4) Let's upload the local file system_block_comments.html to /themes/dana-soft/modules/system/blocks/ on the server.

5) Let's delete the files in the /template_c directory (except index.html) (or update modules cache) in order to see the results of our changes...
Resized Image <== default comments bloc - Custum ==>Resized Image
Thats's all