Themes

Templates overriding : a small Tutorial

alain01  09-Sep-2006 13:47 12893 Reads   11 Comment(s) 

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

« 1 (2) 3 4 »
Rating 0/5
Rating: 0/5 (0 votes)
Voting is disabled!


Login

Who's Online

266 user(s) are online (8 user(s) are browsing Publisher)


Members: 0


Guests: 266


more...

Donat-O-Meter

Stats
Goal: $100.00
Due Date: Apr 30
Gross Amount: $0.00
Net Balance: $0.00
Left to go: $100.00
Make donations with PayPal!

Latest GitHub Commits

Categories