Odoo How can I replace or over-ride the automatic footer or header (ie. navigation menu) in a custom theme (eg. theme_clean)?
5 March, 2021 by
Odoo How can I replace or over-ride the automatic footer or header (ie. navigation menu) in a custom theme (eg. theme_clean)?
Administrator

 

I’ve been working on creating a custom theme based on the layout and structure of theme_clean and adding building blocks as snippets is remarkably easy and very simple to understand. Unfortunately I am currently stuck on how to replace or override the automatic footer with my theme’s own as it seems i’ll need to override and replace the automatic footer which is being pulled from the base theme built into the Odoo CMS/Website collection of modules.

Here’s the tags that I can see in the HTML Editor from the base theme:

<data inherit_id=”website.footer_custom” optional=”enabled” name=”Automatic Footer”>
<xpath expr=”//div[@class=’oe_structure’]” position=”replace”>
<div class=”container hidden-print”>
<div class=”row”>
<div class=”col-md-3″>
<h4>Our products &amp; Services</h4>
<ul class=”list-unstyled” id=”products”>
<li><a href=”/”>Home</a></li>
</ul>
</div>
<div class=”col-md-3″ id=”info”>
<h4>Connect with us</h4>
<ul class=”list-unstyled”>
<li><a href=”/page/website.contactus”>Contact us</a></li>
</ul>
<ul class=”list-unstyled”>
<li t-ignore=”true”><i class=”fa fa-phone”/> <span t-field=”res_company.phone”/></li>
<li t-ignore=”true”><i class=”fa fa-envelope”/>  <span t-field=”res_company.email”/></li>
</ul>
<h2>
<a t-att-href=”website.social_facebook” t-if=”website.social_facebook”><i class=”fa fa-facebook-square”/></a>
<a t-att-href=”website.social_twitter” t-if=”website.social_twitter”><i class=”fa fa-twitter”/></a>
<a t-att-href=”website.social_linkedin” t-if=”website.social_linkedin”><i class=”fa fa-linkedin”/></a>
<a t-att-href=”website.social_youtube” t-if=”website.social_youtube”><i class=”fa fa-youtube-play”/></a>
<a t-att-href=”website.social_googleplus” t-if=”website.social_googleplus”><i class=”fa fa-google-plus-square”/></a>
<a t-att-href=”website.social_github” t-if=”website.social_github”><i class=”fa fa-github”/></a>
</h2>
</div>
<div class=”col-md-5 col-lg-offset-1″>
<div>
<h4>
<span t-field=”res_company.name”/>
<small> – <a href=”/page/website.aboutus”>About us</a></small>
</h4>
<p>
We are a team of passionate people whose goal is to improve everyone’s
life through disruptive products. We build great products to solve your
business problems.
</p>
<p>
Our products are designed for small to medium size companies willing to optimize
their performance.
</p>
</div>
<ul class=”list-inline js_language_selector mt16″ t-if=”(request.website_multilang and len(languages) &gt; 1) or editable”>
<li t-foreach=”languages” t-as=”lg”>
<a t-att-href=”url_for(request.httprequest.path + ‘?’ + keep_query(), lang=lg[0])” t-att-data-default-lang=”editable and ‘true’ if lg[0] == website.default_lang_code else None”>
<t t-esc=”lg[1].split(‘/’).pop()”/></a>
</li>
<li groups=”base.group_website_publisher”>
<t t-set=”url_return” t-value=”url_for(”, ‘[lang]’) + ‘?’ + keep_query()”/>
<a t-attf-href=”/web#action=base.action_view_base_language_install&amp;website_id=#{website.id}&amp;url_return=#{url_return}”>
<i class=”fa fa-plus-circle”/>
Add a language…
</a>
</li>
</ul>
</div>
</div>
</div>
</xpath>
</data>

I know that I need to add this to layout.xml in my theme folder and I have successfully added a section that allows me to add javascript and other code after the closing </footer> tag on the page with the following code:

<template id=”clean_script_footer” inherit_id=”website.layout” name=”Clean scripts”>
<xpath expr=”//footer[last()]” position=”after”>
<!– Custom Theme Footer Scripts –>
<script src=”/theme_custom/static/js/custom.js”></script>
</xpath>
</template>

I’ve tried to use the following code to replace/override the automatic footer:

<template id=”clean_script_footer_custom” inherit_id=”website.layout” optional=”enabled” name=”Automatic Footer”>
<xpath expr=”//div[@class=’oe_structure’]” position=”replace”>
<!– Insert footer code here –>

</xpath></template>
However this is obviously incorrect and is throwing some traceback errors when I try to install the theme.

I’m also trying to do a similar thing with the header so that I can replace the default navigation menu and header with my own.

Has anyone had any success with replacing default headers (ie. nav menu) and footers on Odoo 8.0 yet?

The rest of the basic theme development looks like it will be incredibly easy thanks to the brilliant simplicity of the templating system. I have to say, hats off to the developers behind this project, it looks like it’s going to be a real game-changer.

 

Overriding the default Header in theme_clean:
I’ve found the answer to this in the layout.xml file of theme_gourmand module that can be found at the following link: https://github.com/odoo/design-themes/blob/master/theme_gourmand/views/layout.xml . Just copy the following snippet from that file:

<template id=”theme_gourmand_nav” name=”Gourmand Name” inherit_id=”website.layout”>
<xpath expr=”//div[@id=’wrapwrap’]/header” position=”replace”>
<header t-att-class=” ‘editable_mode’ if editable else ” “>
<nav class=”navbar navbar-default” role=”navigation”>
<div class=”container-fluid”>
<div class=”navbar-header”>
<button type=”button” class=”navbar-toggle” data-toggle=”collapse” data-target=”#bs-example-navbar-collapse-1″ />
<span class=”sr-only”>Toggle navigation</span>
<span class=”icon-bar”></span>
<span class=”icon-bar”></span>
<span class=”icon-bar”></span>
</div>
<a class=”navbar-brand” href=”/” t-field=”res_company.name” />
<div class=”collapse navbar-collapse” id=”bs-example-navbar-collapse-1″>
<ul class=”nav navbar-nav” id=”top_menu”>
<t t-foreach=”website.menu_id.child_id” t-as=”submenu”>
<t t-call=”website.submenu” />
</t>
<li class=”divider” groups=”base.group_user,base.group_portal” t-ignore=”true” />
<li class=”dropdown” t-ignore=”true” groups=”base.group_user,base.group_portal”>
<a href=”#” class=”dropdown-toggle” data-toggle=”dropdown”>
<b>
<span t-esc=”user_id.name” />
<span class=”caret”></span>
</b>
</a>
<ul class=”dropdown-menu js_usermenu” role=”menu”>
<li>
<a href=”/web” role=”menuitem”>My Account</a>
</li>
<li class=”divider” />
<li>
<a t-attf-href=”/web/session/logout?redirect=/” role=”menuitem”>Logout</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</header>
</xpath>
</template>

You’ll then need to open your custom theme’s layout.xml file (please note this has only been tested with a theme_clean clone). I used a modified version of theme_clean i’ve cloned called theme_custom. For me the file was located in /opt/odoo/custom/addons/theme_custom/views/layout.xml. Just open your equivalent file and locate the following opening <openerp> and <data> tags. You’ll need to place the above code somewhere after these two opening tags. I chose to add them after the last closing </template> tag from the other items in that layout file and before the closing </data> and </openerp> tags.

The only modification I made to the code snippet copied from https://github.com/odoo/design-themes/blob/master/theme_gourmand/views/layout.xml was as follows:

At the very top of the snippet I changed the following:
<template id=”theme_gourmand_nav” name=”Gourmand Name” inherit_id=”website.layout”>

To this:

<template id=”theme_custom_nav” name=”My Custom Name” inherit_id=”website.layout”>

Then any modifications that I want to make to the new overridden nav menu can be done in between the following opening and closing tags:
<template id=”theme_gourmand_nav” name=”Gourmand Name” inherit_id=”website.layout”>
<xpath expr=”//div[@id=’wrapwrap’]/header” position=”replace”>

<!– My Custom Navigation and Header Code Goes Here –>

</xpath></template>
Be sure to use XHTML not HTML in all of these xml files. If you are unsure of how to write valid XHTML simply run your HTML through a converter. I used the following online converter – http://www.csgnetwork.com/cvthtml2xhtml.html

You’ll need to uninstall your theme, update your modules list, and then reinstall to see the changes. You will need to do this with any changes you make to your theme files if you would like to see/test the changes.

You can add any extra images you require for your snippets in the /opt/odoo/custom/addons/theme_custom/static/img/ directory. Make sure you reference the image path correctly in your snippet (eg. <img src=”/theme_custom/static/img/example.jpg” />).

Overriding the default footer in theme_clean:

  1. open the file: /opt/odoo/custom/addons/theme_custom/views/layout.xml (or the equivalent with your theme_clean clone)

<template id=”theme_custom_automatic_footer” name=”My Custom Footer” inherit_id=”website.footer_default”>
<xpath expr=”//div[@class=’container hidden-print’]” position=”replace”>

<!– Your Footer Here –>

</xpath></template>
For a brief and very basic tutorial on how to clone theme_clean to create your own theme check out this post:

https://www.odoo.com/forum/help-1/question/new-bootstrap-theme-on-website-builder-58809

I will post another answer later once I have put together instructions on how to replace the default/automatic footer. There are probably better ways to do this, and I welcome any comments or suggestions on improving the process.

Reference link

http://superuser.com/questions/770232/remove-links-that-appear-on-the-login-page-of-openerp-odoo