Story id 3367d

From XOOPS Web Application System

Themes : Templates overriding : a small Tutorial Posted by alain01 on 2006/9/23 16:50:00 (3942 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="<{xoImgUrl 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="<{xoImgUrl 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 !

Page « 1 2 3 (4)