+91 9818211679, +91 9998040067       [email protected]

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 Website layout is very simple in structure & we can easily change the pattern of this layout with the using the steps mentioned in this blog. Here we can mentioned 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 Header -   First of all, we will see how we can Replace the Header in Odoo Website. Below is an image, where you can see the default structure of the header on Odoo website.

How To Replace Header and Footer in Odoo Website

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

How To Replace Header and Footer 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

How To Replace Header and Footer in Odoo Website

After replacing the header, we will Create our own Custom Header.

How To Replace Header and Footer in Odoo Website

Here we have given template id and inherit id(Module name.default template id of 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 Footer - 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.

How To Replace Header and Footer in Odoo Website

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

How To Replace Header and Footer in Odoo Website

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 Seee in below given image that your Footer is Replaced.

How To Replace Header and Footer in Odoo Website

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 header & footer in our website with following these simple steps in Odoo.

Our experience team of Odoo Developers can assist you and guide you in 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.

There are no comments for now.

There are no comments for now.


There are no comments for now.