Home Blog How To Replace Header and Footer In Odoo Website
How To Replace Header and Footer In Odoo Website

How To Replace Header and Footer In Odoo Website

The layout of the website is one of the most important parts of the website's structure. Odoo's Website layout is very simple in structure & we can easily change the pattern of this layout by using the steps mentioned in this blog. Here we can mention step by step process to "Replace Header and Footer in Odoo Website".

When it comes to the success of a website, the most important aspect is the layout of its web pages. A good & interactive website of a company helps to increase the interest of users in their products & increase the reach of the users to the website.


In this blog, we are going to see "How we can Inherit & Replace the Headers & Footers in an Odoo Website".


Replace the Header in Odoo Website

Below is an image, where you can see the default structure of the header on the Odoo website.

Replace the Header in Odoo Website

Now we will replace the header. Below is the Code for Replacing the header

Replace the Header in Odoo Website

Here, we have inherited the default header of the Odoo website, and then we'll replace the header by using XPath. If you want, then you can add anything in the header by giving the position where you want to add by using XPath.

For Example -

position = "after"

position = "before"

position = "inside"


<?xml version="1.0" encoding="UTF-8"?>
<odoo>
    <template id="replace_header" inherit_id="portal.frontend_layout"mname="Header">
        <xpath expr="//nav[@class='navbar navbar-expand-md navbar-light bg-light']" position="replace">
                        <!-- Write here your custom code -->
        </xpath>
    </template>
</odoo>


After doing this, now you can see in Below given-image that your Header is Replaced

Replace the Header in Odoo Website

After replacing the header, we wil'll Create our own Custom Header.

Create your own Custom Header in Odoo

Here we have given the template id and inherit id(Module name.default template id of the website)

<template id="replace_header" inherit_id="portal.frontend_layout" name="Header">

Here we have used xpath for Replacing Header

​​<xpath expr="//nav[@class='navbar navbar-expand-md navbar-light bg-light']" position="replace">

            <div class="container">
              <div class='row' style='margin-top:10px;'>
                <h1>This is your new header.</h1>
                </div>
              </div>
            <hr/>
            <hr/>
        </xpath>
    </template>

After adding the above-mentioned code you can see your custom header

Replace the Footer in Odoo

Now, we will see how we can Replace the Footer in Odoo. Below is given an image, where you can see the default structure of the footer in Odoo Website.

Replace the Footer in Odoo

Now we will replace the footer. Below is the Code for Replacing the Footer in Odoo Website.

Replace the Footer in Odoo

We have inherited the footer just like we inherited the header of the website.

Here is the code for footer header.

<?xml version="1.0" encoding="UTF-8"?>
<odoo>
    <template id="replace_footer" inherit_id="website.footer_custom" name="Footer">
        <xpath expr="//div[@id='footer']" position="replace">
          <!-- Write here your custom code -->
        </xpath>
    </template>
</odoo>

After adding this Code you can See in below given image that your Footer is Replaced.

Footer is Replaced in odoo

After replacing footer we will Create our own Custom Footer



Here we have given template id and inherit id(Module name.default template id of website)

<template id="replace_footer" inherit_id="website.footer_custom" name="Footer">

Here we have used xpath for Replacing Footer.

<xpath expr="//div[@id='footer']" position="replace">

            <div id="footer" class="oe_structure oe_structure_solo" t-ignore="true" t-  if="not no_footer">
                <footer>
                  <hr/>
                  <hr/>
                  <div class="container">
                    <div class='row' style='margin-top:10px;'>
                        <h1>This is your new footer.</h1>
                    </div>
                  </div>
                </footer>
            </div>
        </xpath>
    </template>

After adding this code & upgrading the module, we can see that the footer of our website is changed.

Thus, we can easily replace or customize the header & footer on our website by following these simple steps in Odoo.

Our experienced team of Odoo Developers can assist you and guide you in the Odoo Website Development process. You can also check the Best Odoo Themes provided by Kanak Infosystems. Connect with us if you need any assistance regarding Odoo Website Designing & Development.


Leave a Comment

Your email address will not be published.

Submit
Your comment is under review by our moderation team.