Skip to Content
āđ€āļĄāļ™āļđ
āļ„āļļāļ“āļ•āđ‰āļ­āļ‡āļĨāļ‡āļ—āļ°āđ€āļšāļĩāļĒāļ™āđ€āļžāļ·āđˆāļ­āđ‚āļ•āđ‰āļ•āļ­āļšāļāļąāļšāļ„āļ­āļĄāļĄāļđāļ™āļīāļ•āļĩāđ‰
āļ„āļģāļ–āļēāļĄāļ™āļĩāđ‰āļ–āļđāļāļ•āļąāđ‰āļ‡āļ„āđˆāļēāļŠāļ–āļēāļ™āļ°
2 āļ•āļ­āļšāļāļĨāļąāļš
531 āļĄāļļāļĄāļĄāļ­āļ‡

Please 😊 could someone help me customize Odoo website header by coding not from the website editor


āļ­āļ§āļ•āļēāļĢ
āļĨāļ°āļ—āļīāđ‰āļ‡
āļ„āļģāļ•āļ­āļšāļ—āļĩāđˆāļ”āļĩāļ—āļĩāđˆāļŠāļļāļ”

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.odoo.com/documentation/18.0/developer/tutorials/website_theme/03_customisation_part1.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