Please 😪 could someone help me customize Odoo website header by coding not from the website editor
Odoo is the world's easiest all-in-one management software.
It includes hundreds of business apps:
- CRM
- e-Commerce
- Accounting
- Inventory
- PoS
- Project
- MRP
This question has been flagged
Hii,
Create or Use a Custom Module
If you don’t already have one, create a custom module called (for example) custom_website_header.
Folder structure:
custom_website_header/ ├── __init__.py ├── __manifest__.py ├── static/ │ └── src/ │ └── css/ │ └── header.css ├── views/ │ └── header_template.xml
Inherit the Header Template
Odoo uses website.layout → website.header for the main header.
Here’s how to extend or replace part of the header in views/header_template.xml:
<?xml version="1.0" encoding="UTF-8"?> <odoo> <template id="custom_website_header" inherit_id="website.header" priority="20"> <!-- Example: Replace social media icons section --> <xpath expr="//div[contains(@class, 'o_header_social')]" position="replace"> <div class="o_header_social"> <!-- Add your own icons or links here --> <a href="https://facebook.com" target="_blank">FB</a> <a href="https://linkedin.com" target="_blank">LinkedIn</a> <a href="https://instagram.com" target="_blank">Insta</a> </div> </xpath> <!-- Example: Add a phone number above the menu --> <xpath expr="//header" position="inside"> <div class="my-top-bar text-center py-1 bg-warning text-dark"> <span>📞 +971 525585292 | ✉️ yahyasbini@gmail.com</span> </div> </xpath> </template> </odoo>
changes as your requiremnts
Add Custom CSS
Create static/src/css/header.css and style your changes:
.my-top-bar { font-weight: bold; font-size: 14px; } .o_header_social a { margin: 0 8px; color: #fff; }
add css as per your design
update __manifest__.py
{ 'name': 'Custom Website Header', 'category': 'Website', 'version': '16.0.1.0.0', 'depends': ['website'], 'data': [ 'views/header_template.xml', ], 'assets': { 'web.assets_frontend': [ 'custom_website_header/static/src/css/header.css', ], }, 'installable': True, }
i hope it is use full
Hi,
Refer to the following.
-https://www.odoo.com/documentation/18.0/applications/websites/website/pages/header_footer.html
- https://www.cybrosys.com/blog/how-to-create-custom-header-and-footer-for-website-in-odoo-16
Hope it helps
Thank you so much
Enjoying the discussion? Don't just read, join in!
Create an account today to enjoy exclusive features and engage with our awesome community!
Sign upRelated Posts | Replies | Views | Activity | |
---|---|---|---|---|
|
1
Dec 20
|
6073 | ||
|
1
Jul 25
|
341 | ||
|
3
May 25
|
2595 | ||
|
2
Feb 24
|
1642 | ||
|
0
Dec 23
|
2341 |