Wie formatiere ich die Topbar in Odoo?

Die Odoo Topbar kann über CSS-Anpassungen im Custom-Modul oder über die Theme-Einstellungen gestaltet werden. Farben, Schriftarten und Layout der oberen Navigationsleiste lassen sich per SCSS oder Inline-CSS anpassen.

Odoo – Topbar formatieren

Eric Fischer • 09. Dezember 2022 • 3 Min. Lesezeit

Odoo: ERP und CRM-Experte

Eric Fischer

OIT GmbH

Profil ansehen

Wenn du Odoo V15 nutzt und die Hintergrundfarbe der Topbar verändern möchtest, dann wird dir dieser Codeschnipsel weiterhelfen.

1. Navigiere zu den Ansichten

Aktiviere den Odoo Entwicklermodus um über Einstellungen in die Technischen Einstellungen zu wechseln.

Dort gehe zu dem Punkt Ansichten und erstelle dort eine neue Ansicht.

Odoo Ansicht erstellen

2. Neue Ansicht erstellen

Erstelle dann folgende Ansicht, welche die Standardeinstellung überschreiben wird. Damit diese Ansicht funktioniert, fülle folgende Felder:

Ansichtsbezeichnung – kann frei gewählt werden
Ansichtstyp – QWeb
Sequenz – 16
Abgeleitete Ansicht – Web layout
Abgeleitete Ansicht . Erweiterungsübersicht

Füge dann folgenden Code ein, die Klammer “<“ & “>” musst du nach dem kopieren manuell nachtragen.

<data inherit_id="web.layout">
    <xpath expr="//body" position="inside">
        <style>
            .o_main_navbar {background-color: #326D93 !important;border-bottom: 0px;}
            .o_main_navbar .show .dropdown-toggle {background-color: #326D93;}
            .o_main_navbar > ul > li > a:hover, .o_main_navbar 
                   > ul > li > label:hover {background-color: #4a666f;}
            .o_main_navbar > a:hover, .o_main_navbar > a:focus, .o_main_navbar 
                   > button:hover, .o_main_navbar 
                   > button:focus {background-color: #4a666f;color: inherit;}
            .o_main_navbar > a:hover, .o_main_navbar > a:focus, .o_main_navbar 
                   > button:hover, .o_main_navbar 
                   > button:focus {background-color: #4a666f;color: inherit;}   
        </style>
    </xpath>
</data>

Das Ergebnis sollte so aussehen:

Odoo Ansicht erstellen

Weitere Odoo Topbar-Anpassungen

Farben überschreiben

Odoos Topbar-Farben werden über Less-Variablen gesteuert. Im Backend-Theme-Editor kannst du o-navbar-color und o-brand-primary anpassen, um Hintergrund und Akzentfarbe zu ändern.

Logo einbinden

Das Firmenlogo in der Topbar wird unter Einstellungen → Allgemein → Firmenname & Logo gesetzt. Das Logo erscheint automatisch in der oberen linken Ecke der Topbar.

Custom XML-Erweiterung

Für weitergehende Anpassungen (eigene Menüpunkte, Icons oder Widgets in der Topbar) empfiehlt sich ein benutzerdefiniertes Odoo-Modul mit XML-View-Erweiterungen auf web.webclient_navbar.