Themes: Templates overriding : a small Tutorial

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

Note 1:
In both examples, we have just modifed block templates, but for page templates, upload your files to:
/<yourthemefolder>/modules/mymodule
and not in
/<yourthemefolder>/modules/mymodule/blocks.

Note 2:
Have a look at this theme, 7dana-clean.
In this theme you will find:
- The new position blocks (bottom center blocks, bottom left blocks, bottom right blocks, )
- 7 templates for overriding

Note 3:
Copy index.html (from templates_c or any other core folder with index.html) to your new directory.


Images overriding
Finally, image overriding is also possible. 2 possible cases:
- If the module used overriding, you can just copy images the same way as templates overridng,
- Either, Let's modify a template and as:
<img src="<{[color=FF0000]xoImgUrl[/color] modules/mymodule/images/image1.gif}>" alt=""/>


Example:
Change image from the news module (the print.gif image)(article.html template from the news module)

Let's replace the following code in the article.html template
<img src="<{$xoops_url}>/modules/news/images/print.gif" border="0" alt="<{$lang_printerpage}>" />

with
<img src="<{[color=FF0000]xoImgUrl [/color]modules/news/images/icon/print.gif}>" border="0" alt="<{$lang_printerpage}>" />

When the page is displayed, the template will display the image located in /<yourthemefolder>/modules/news/icon/, and if the image doen't exist, the initial image will be displayed (/modules/news/icon).


CSS overriding
For CSS, overriding is used the same way, but the command is different:
<{$xoTheme->addStylesheet('modules/news/style.css')}>


javascript overriding
More information soon.


For developpers
Friends, when you next update your module(s), consider modifying your original templates with these new functionalities (images overriding, css overriding).


Big thanks to Dugris for his précisions on css, images and javascript.


So, now, you can play with that new feature !