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:
- āļĨāļđāļāļāđāļēāļŠāļąāļĄāļāļąāļāļāđ
- e-Commerce
- āļĢāļ°āļāļāļāļąāļāļāļĩ
- āļŠāļīāļāļāđāļēāļāļāļāļĨāļąāļ
- PoS
- Project
- MRP
āļāļģāļāļēāļĄāļāļĩāđāļāļđāļāļāļąāđāļāļāđāļēāļŠāļāļēāļāļ°
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
āļŠāļāļļāļāļāļąāļāļāļēāļĢāļāļđāļāļāļļāļĒāļāļĩāđāđāļāđāđāļŦāļĄ? āđāļāđāļēāļĢāđāļ§āļĄāđāļĨāļĒ!
āļŠāļĢāđāļēāļāļāļąāļāļāļĩāļ§āļąāļāļāļĩāđāđāļāļ·āđāļāđāļāļĨāļīāļāđāļāļĨāļīāļāđāļāļāļąāļāļāļĩāđāļāļāļĢāđāļāļīāđāļĻāļĐāđāļĨāļ°āļĄāļĩāļŠāđāļ§āļāļĢāđāļ§āļĄāļāļąāļāļāļāļĄāļĄāļđāļāļīāļāļĩāđāļāļĩāđāļĒāļāļāđāļĒāļĩāđāļĒāļĄāļāļāļāđāļĢāļē!
āļĨāļāļāļ·āđāļRelated Posts | āļāļāļāļāļĨāļąāļ | āļĄāļļāļĄāļĄāļāļ | āļāļīāļāļāļĢāļĢāļĄ | |
---|---|---|---|---|
Changes in "Customize JS/CSS/HTML" in Website module. Odoo v14
āđāļāđāđāļāđāļĨāđāļ§
|
|
1
āļ.āļ. 20
|
6162 | |
How to get rid of white space above the header
āđāļāđāđāļāđāļĨāđāļ§
|
|
1
āļ.āļ. 25
|
459 | |
|
3
āļ.āļ. 25
|
2759 | ||
|
2
āļ.āļ. 24
|
1703 | ||
|
0
āļ.āļ. 23
|
2436 |