Template inheritance in odoo - odoo

Question

I want to create a new theme for odoo. I have done it by create a new module and install it. I see in this document here which said that odoo support template inheritance by using t-extend keyword. However I can't make it.
This is my customized template:
<?xml version="1.0" encoding="utf-8"?>
<openerp>
<data>
<template id="website.homepage" name="Homepage" page="True">
<div class="header">
<h1>FOO<h1>
<div class="main">
</div>
</div>
</template>
<template id="website.contact" name="Homepage" page="True">
<t t-extend="website.homepage">
<t t-jquery="div.main" t-operation="inner">
<h1>FOO 2</h1>
</t>
</t>
</template>
</data>
</openerp>
Template website.contact should have showed FOO and FOO 2 but it only showed FOO 2.
Please help me explain it. Thanks.

Answer 1

You use a syntax for client side templates, but those are server side templates. You use inheritance with server side templates this:
<template id="contact" inherit_id="website.homepage">
<xpath expr="//div[#class='main']" position="inside">
<h1>FOO 2</h1>
</xpath>
</template>
You can read more in the official documentation.

Answer 2

You are trying to create new theme.? and are you using odoo 8.0.? I am asking this because the link you posted is for OpenERP 7.0
So for Odoo 8.0 new documentation is available see here and for QWEB you can find it here QWEB.
Now Main thing if you are trying to create new theme for CMS or Website module then you must go through these steps.

Answer 3

Using Xpath here you can Inherit and make changes on parent tempaltes, examples follows.
<template id="homepage_extend" inherit_id="website.homepage">
<xpath expr="//div[#class='main']" position='inside'>
<h1>FOO 2</h1>
</xpath>
</template>
or try
<template id="homepage_extend" inherit_id="website.homepage">
<xpath expr="//div[#class='header']" position='replace'>
<div class="header">
<h1>FOO<h1>
<div class="main">
<h1>FOO 2</h1>
</div>
</div>
</xpath>
</template>
You can also try these by overriding that template like:
<template id="website.homepage">
<div class="header">
<h1>FOO<h1>
<div class="main">
<h1>FOO 2<h1>
</div>
</div>
</template>
while overriding don't forget to gave the exact id followed by module name.
Cheers !

Answer 4

In parent template, add <t t-raw="0"/> or <t t-raw="name"/>, template: ...code html...
https://www.odoo.com/documentation/9.0/reference/qweb.html

Answer 5

Hello Minh-Hung Nguyen,
Try this code,
<?xml version="1.0" encoding="utf-8"?>
<openerp>
<data>
<template id="website.homepage" name="Homepage" page="True">
<div class="header">
<h1>FOO<h1>
<div class="main">
</div>
</div>
</template>
<template id="website.contact" name="Homepage" page="True">
<t t-extend="website.homepage">
<!-- Use 'append' to add the h1 tag inside main div -->
<t t-jquery="main" t-operation="append">
<h1>FOO 2</h1>
</t>
</t>
</template>
</data>
</openerp>
I hope my answer is helpfull for you.